/* ==========================================================================
   Travelgems 2026 — stylesheet
   Afgeleid van de aangeleverde HTML-uitwerking (detail.css + site-pages.css
   + het design-canvas). Alles is hier samengebracht in één systeem met
   CSS-variabelen, zodat kleuren en spacing op één plek te wijzigen zijn.
   ========================================================================== */

/* 1. Tokens
   ========================================================================== */
:root{
  /* kleuren */
  --tg-ink:          #163331;   /* basis tekstkleur                */
  --tg-ink-soft:     #4b615f;   /* lopende tekst in secties        */
  --tg-ink-muted:    #62726f;   /* bijschriften                    */
  --tg-green-900:    #0b3634;   /* footer                          */
  --tg-green-800:    #0F4C4A;   /* donkergroen vlak / hero         */
  --tg-green-700:    #14504E;   /* koppen en links                 */
  --tg-teal:         #00807B;   /* accent, eyebrow, hover          */
  --tg-aqua:         #00B3AD;   /* vinkjes, accenten               */
  --tg-aqua-light:   #7FE0DA;   /* eyebrow op donkere achtergrond  */
  --tg-gold:         #CC9D00;   /* knoppen                         */
  --tg-gold-dark:    #B08800;   /* knop hover                      */
  --tg-sun:          #FFD76A;   /* kicker, script, Liesbet-blok    */
  --tg-cream:        #FAF6EF;   /* paginabodem                     */
  --tg-cream-2:      #F3F0E7;   /* topbar, kaders                  */
  --tg-white:        #ffffff;

  --tg-line:         rgba(22,51,49,.15);
  --tg-line-soft:    rgba(22,51,49,.08);

  /* typografie */
  --tg-font:         'Barlow', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  --tg-font-script:  'Caveat', 'Comic Sans MS', cursive;

  /* maten */
  --tg-wrap:         1320px;
  --tg-gutter:       28px;
  --tg-header-h:     76px;      /* hoogte van de sticky header, ook gebruikt
                                   als offset voor de subnav en anchors */
  --tg-radius:       2px;
  --tg-radius-card:  18px;
}

/* 2. Reset & basis
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--tg-font);
  color:var(--tg-ink);
  background:var(--tg-cream);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
h1,h2,h3,h4,h5,h6{font-weight:800;letter-spacing:-.02em}
iframe{max-width:100%}

.tg-wrap{max-width:var(--tg-wrap);margin:0 auto;padding:0 var(--tg-gutter)}
.tg-wrap--narrow{max-width:900px}

/* anchors niet onder de sticky header laten verdwijnen */
[id]{scroll-margin-top:calc(var(--tg-header-h) + 60px)}

/* mikpunt dat een blok een eigen anker geeft zonder de opmaak te raken */
.tg-anker{display:block;height:0;overflow:hidden}

.tg-visually-hidden{
  position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}
.tg-skip-link{
  position:absolute;left:-9999px;top:0;z-index:200;background:var(--tg-green-800);
  color:#fff;padding:12px 18px;
}
.tg-skip-link:focus{left:12px;top:12px}

:focus-visible{outline:2px solid var(--tg-aqua);outline-offset:3px}

/* 3. Knoppen
   ========================================================================== */
.tg-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:0;cursor:pointer;
  border-radius:999px;padding:15px 23px;min-height:50px;
  background:var(--tg-gold);color:#fff;font-weight:700;font-size:16px;line-height:1;
  transition:background .18s ease;
}
.tg-btn:hover{background:var(--tg-gold-dark);color:#fff}
.tg-btn--block{width:100%}
.tg-btn--ghost{background:transparent;color:var(--tg-green-700);border:1px solid rgba(20,80,78,.3)}
.tg-btn--ghost:hover{background:var(--tg-cream-2);color:var(--tg-green-700)}
.tg-btn--dark{background:var(--tg-green-800)}
.tg-btn--dark:hover{background:var(--tg-green-900)}
.tg-btn--light{background:#fff;color:var(--tg-green-800)}
.tg-btn--light:hover{background:var(--tg-cream-2);color:var(--tg-green-800)}

/* 4. Topbar + header
   ========================================================================== */
.tg-topbar{background:var(--tg-cream-2)}
.tg-topbar .tg-wrap{
  min-height:32px;display:flex;align-items:center;justify-content:flex-end;
  gap:18px;font-size:14px;color:#5a6b69;
}
.tg-topbar a{color:var(--tg-green-700);font-weight:700;white-space:nowrap}
.tg-topbar__socials{display:flex;gap:12px}
.tg-topbar__socials a{display:inline-flex;align-items:center}

.tg-header{
  position:sticky;top:0;z-index:90;
  background:#fff;border-bottom:1px solid var(--tg-line-soft);
}
.tg-header__inner{
  max-width:var(--tg-wrap);margin:0 auto;padding:0 20px;
  height:var(--tg-header-h);
  display:flex;align-items:center;gap:14px;flex-wrap:nowrap;
}
.tg-logo{display:flex;align-items:center;line-height:1;flex:0 0 auto}
.tg-logo img{height:52px;width:auto;max-height:52px}

.tg-nav{
  display:flex;align-items:center;gap:16px;
  font-size:15px;font-weight:500;color:var(--tg-green-700);
  margin:0 0 0 8px;flex:1;min-width:0;list-style:none;padding:0;
}
.tg-nav li{position:relative;display:flex;align-items:center;height:52px}
.tg-nav > li > a{
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
  color:var(--tg-green-700);
}
.tg-nav > li > a:hover,
.tg-nav > li.current-menu-item > a,
.tg-nav > li.current-menu-parent > a,
.tg-nav > li.current-menu-ancestor > a{color:var(--tg-teal)}
.tg-nav__caret{width:12px;height:8px;flex:0 0 12px;transition:transform .18s ease}
.tg-nav li:hover > a .tg-nav__caret{transform:rotate(180deg)}

/*
 * Megamenu: één paneel over de volle breedte onder de header, met kolommen.
 * De li krijgt position:static zodat het paneel zich uitlijnt op de header
 * in plaats van op het menu-item; de padding houdt de inhoud gelijk met de
 * rest van de pagina, ook op brede schermen.
 */
.tg-nav .sub-menu{
  position:absolute;left:0;right:0;top:100%;
  background:#fff;border-bottom:1px solid rgba(22,51,49,.1);
  box-shadow:0 24px 44px rgba(11,36,34,.13);
  margin:0;list-style:none;
  padding:34px max(20px, calc((100vw - var(--tg-wrap)) / 2 + 32px)) 26px;
  /* Gelijke kolommen die de breedte verdelen: vier bij de bestemmingen,
     drie bij "Reizen op maat", twee bij de groepsreizen. auto-fit laat lege
     sporen vallen, zodat het paneel bij weinig items niet leeg oogt. */
  display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:34px 44px;align-items:start;
  opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity .16s ease, transform .16s ease, visibility .16s ease;
  z-index:95;
}
.tg-nav > li{position:static}

/* De hoofditems lopen op desktop over de volle hoogte van de balk door, zodat
   er geen dode strook zit tussen het item en het paneel eronder. Zonder dat
   stukje valt het paneel dicht op weg naar beneden. Mobiel niet: daar is de
   lijst een uitklappaneel en zou een link van 100% hoogte het submenu
   wegduwen. */
@media(min-width:981px){
  .tg-nav{align-self:stretch}
  .tg-nav > li{align-self:stretch;height:auto}
  /* Uit de aanpasser: het item volgt zijn eigen hoogte. */
  .tg-nav > li > a{height:auto}
}

.tg-nav li:hover > .sub-menu,
.tg-nav li:focus-within > .sub-menu,
.tg-nav > li.is-open > .sub-menu{opacity:1;visibility:visible;transform:translateY(0)}

/*
 * Het paneel loopt over de volle breedte, dus de kolommen ervan liggen ook
 * onder de ándere hoofditems. Wie schuin naar een bestemming beweegt, schampt
 * onderweg "Reizen op maat" en zag daardoor plots dat paneel. Zodra
 * JavaScript meedoet, bepaalt theme.js welk paneel open is: een ander item
 * neemt het pas over als je er even blijft hangen. Zonder JavaScript blijft
 * de gewone hover-versie hieronder gelden.
 */
@media(min-width:981px){
  .tg-nav--js > li:hover:not(.is-open):not(:focus-within) > .sub-menu{
    opacity:0;visibility:hidden;transform:translateY(6px);
  }
}

/* niveau 2 = een kolom */
.tg-nav .sub-menu > li{display:block;height:auto;position:static}

/* kolomkop: klein, gespatieerd, grijs — en géén link */
.tg-nav__kop{
  display:block;font-size:12px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:#9aa6a4;margin-bottom:10px;
}
.tg-nav .sub-menu > li.tg-mega-goud .tg-nav__kop{
  color:var(--tg-gold);font-size:13px;letter-spacing:.14em;margin-bottom:16px;
}
/* een kop die wél een link is, blijft er hetzelfde uitzien */
.tg-nav .sub-menu > li.menu-item-has-children > a{
  display:block;padding:0;
  font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:#9aa6a4;margin-bottom:10px;
}
.tg-nav .sub-menu > li.menu-item-has-children > a:hover{color:var(--tg-gold)}
.tg-nav .sub-menu > li.tg-mega-goud.menu-item-has-children > a{
  color:var(--tg-gold);font-size:13px;letter-spacing:.14em;margin-bottom:16px;
}

/* een kolom zónder kinderen: een grotere link met eventueel een ondertitel */
.tg-nav .sub-menu > li.tg-mega-link > a{
  display:block;padding:0;font-size:17.5px;font-weight:700;color:var(--tg-green-700);
}
.tg-nav .sub-menu > li.tg-mega-link > a:hover{color:var(--tg-teal)}

/* de ondertitel onder een link of kop */
.tg-nav__desc{
  display:block;font-size:15px;line-height:1.5;color:#6a7d7b;
  font-weight:400;letter-spacing:normal;text-transform:none;margin-top:3px;
}
.tg-nav .sub-menu > li > .tg-nav__desc,
.tg-nav .sub-menu > li.menu-item-has-children > a .tg-nav__desc{
  font-size:16px;line-height:1.6;color:var(--tg-ink-soft);margin:0 0 14px;
}
.tg-nav a:hover .tg-nav__desc{color:#6a7d7b}

/* niveau 3 = de links in de kolom.
   Let op: hier moet `visibility` erven van het paneel, niet hard op `visible`
   staan. Anders blijven de linklijstjes van álle panelen aanklikbaar — ze
   liggen immers over de volle breedte op elkaar — en opende het menu van een
   ander hoofditem zodra je met de muis over het opengeklapte paneel ging. */
.tg-nav .sub-menu .sub-menu{
  position:static;opacity:1;visibility:inherit;transform:none;
  display:flex;flex-direction:column;gap:9px;
  background:transparent;border:0;box-shadow:none;padding:0;
}
.tg-nav .sub-menu .sub-menu > li > a{
  display:block;font-size:16.5px;font-weight:500;color:var(--tg-green-700);
  padding:0;border-radius:0;letter-spacing:normal;text-transform:none;margin:0;
}
.tg-nav .sub-menu .sub-menu > li > a:hover{background:transparent;color:var(--tg-teal)}
/* een link mét ondertitel wordt zwaarder gezet, zoals in het ontwerp */
.tg-nav .sub-menu .sub-menu > li > a:has(.tg-nav__desc) .tg-nav__label{
  font-weight:700;
}
.tg-nav .sub-menu .sub-menu:has(.tg-nav__desc){gap:14px}

/* een kolom als zandkleurig kaartje */
.tg-nav .sub-menu > li.tg-mega-card{
  background:var(--tg-cream-2);border-radius:16px;padding:20px;align-self:start;
}
.tg-nav .sub-menu > li.tg-mega-card .tg-nav__kop{margin-bottom:12px}
/* Geef het menu-item de CSS-klasse `fs-0` om de kop van die kolom te verbergen. */
.tg-mega-card.fs-0 > .tg-nav__kop{display:none}
.tg-nav .sub-menu > li.tg-mega-card .sub-menu{gap:12px}
.tg-nav .sub-menu > li.tg-mega-card .sub-menu > li + li{
  border-top:1px solid rgba(22,51,49,.1);padding-top:12px;
}
.tg-nav .sub-menu > li.tg-mega-card .sub-menu > li > a{
  font-size:15.5px;font-weight:600;color:var(--tg-green-800);
}

/* Het open-/dichtknopje wordt door JavaScript in elk hoofditem gezet, maar
   is alleen op mobiel aan de orde. Zonder deze regel staat er op desktop een
   leeg knopje achter elk menu-item. */
.tg-nav__toggle{display:none}

/* Melding voor beheerders wanneer er geen menu aan "Hoofdmenu" hangt. */
.tg-nav__melding > a{
  font-size:13px;line-height:1.4;font-weight:600;color:#9A6B00!important;
  background:var(--tg-sun);border-radius:8px;padding:7px 11px;max-width:340px;
  white-space:normal;
}

/* de CTA is het laatste item van de navigatielijst */
.tg-nav__cta{margin-left:auto}
.tg-nav__cta .tg-btn{padding:12px 20px;min-height:0;font-size:15px}
/* De knop houdt witte tekst; `.tg-nav > li > a` is specifieker dan `.tg-btn`
   en zou hem anders donkergroen kleuren. */
.tg-nav > li.tg-nav__cta > a,
.tg-nav > li.tg-nav__cta > a:hover{color:#fff}

.tg-burger{
  display:none;background:none;border:1px solid rgba(22,51,49,.2);
  border-radius:10px;width:48px;height:48px;
  align-items:center;justify-content:center;color:var(--tg-green-700);
  order:3;margin-left:auto;
}

@media(max-width:980px){
  :root{--tg-header-h:72px}

  .tg-header__inner{height:auto;min-height:72px;padding:12px 16px;flex-wrap:wrap}
  .tg-logo img{height:44px;max-height:44px}
  .tg-burger{display:flex}

  /* dezelfde lijst wordt hier het uitklappaneel */
  .tg-nav{
    display:none;flex-basis:100%;order:4;
    flex-direction:column;align-items:stretch;gap:0;
    margin:8px 0 0;padding:8px 0 16px;
    border-top:1px solid var(--tg-line-soft);
  }
  .tg-header.is-open .tg-nav{display:flex}

  .tg-nav li{display:block;height:auto;position:static}
  .tg-nav > li{position:relative}
  .tg-nav > li > a{
    display:block;padding:16px 4px;font-size:18px;font-weight:600;
    border-bottom:1px solid var(--tg-line-soft);
  }
  .tg-nav__caret{display:none}

  /* het knopje waarmee een hoofditem open- en dichtklapt */
  .tg-nav__toggle{
    display:flex;position:absolute;top:0;right:0;width:54px;height:54px;
    background:none;border:0;color:var(--tg-green-700);cursor:pointer;
    align-items:center;justify-content:center;
  }
  .tg-nav__toggle svg{width:14px;height:9px;transition:transform .18s ease}
  .tg-nav > li.is-expanded > .tg-nav__toggle svg{transform:rotate(180deg)}
  /* Dicht tenzij uitgeklapt. De klasse tg-nav--js zet JavaScript er zelf op,
     zodat zonder JavaScript alles gewoon open blijft staan. */
  .tg-nav--js > li.menu-item-has-children:not(.is-expanded) > .sub-menu{display:none}

  /* het megamenu wordt hier een gewone ingesprongen lijst */
  .tg-nav .sub-menu,
  .tg-nav .sub-menu .sub-menu{
    position:static;opacity:1;visibility:visible;transform:none;
    display:block;box-shadow:none;border:0;border-radius:0;
    padding:0 0 10px 14px;min-width:0;background:transparent;
  }
  .tg-nav .sub-menu a{
    font-size:17px;font-weight:500;color:#4a5f5d;padding:13px 4px;
    border:0;border-radius:0;display:block;
  }
  .tg-nav .sub-menu a:hover{background:transparent;color:var(--tg-teal)}
  /* kolomkoppen blijven ook mobiel als kopje leesbaar */
  .tg-nav .sub-menu > li.menu-item-has-children > a,
  .tg-nav .sub-menu .tg-nav__kop{
    display:block;font-size:12px;letter-spacing:.1em;text-transform:uppercase;
    color:#9aa6a4;font-weight:700;padding:14px 4px 4px;margin:0;
  }
  .tg-nav .sub-menu > li.tg-mega-link > a,
  .tg-nav .sub-menu .sub-menu > li > a{
    padding:13px 4px;font-size:17px;font-weight:600;color:var(--tg-green-700);
  }
  .tg-nav .sub-menu .sub-menu{gap:0}
  .tg-nav .sub-menu .tg-nav__desc{font-size:15px;margin-top:2px}
  .tg-nav .sub-menu > li > .tg-nav__desc{padding:0 4px 8px}
  /* het kaartje is mobiel gewoon een blok in de lijst */
  .tg-nav .sub-menu > li.tg-mega-card{background:transparent;padding:0;border-radius:0}
  .tg-nav .sub-menu > li.tg-mega-card .sub-menu > li + li{border:0;padding-top:0}

  .tg-nav__cta{margin:16px 0 0}
  .tg-nav__cta .tg-btn{width:100%;font-size:18px;min-height:52px;padding:15px 18px}
}

/* 5. Hero
   ========================================================================== */
.tg-hero{
  position:relative;display:flex;align-items:flex-end;
  min-height:650px;overflow:hidden;
  background:var(--tg-green-800) center/cover no-repeat;color:#fff;
}
.tg-hero--compact{min-height:460px}
.tg-hero__media{position:absolute;inset:0;z-index:0}
.tg-hero__media img{width:100%;height:100%;object-fit:cover}
.tg-hero::before{
  content:'';position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(90deg,rgba(6,52,50,.86) 0%,rgba(6,52,50,.60) 42%,rgba(6,52,50,.12) 76%),
    linear-gradient(0deg,rgba(6,52,50,.25),transparent 45%);
}
.tg-hero .tg-wrap{position:relative;z-index:2;width:100%;padding-top:120px;padding-bottom:90px}
.tg-hero h1{
  font-size:clamp(44px,7vw,100px);line-height:.92;max-width:950px;
  letter-spacing:-.04em;margin:0 0 26px;text-transform:uppercase;
}
.tg-hero p{font-size:21px;line-height:1.55;max-width:730px;margin:0 0 30px;color:rgba(255,255,255,.94)}
.tg-hero .tg-kicker{color:var(--tg-sun)}
.tg-hero .tg-script{color:var(--tg-sun)}

.tg-kicker{
  font-size:15px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--tg-sun);margin-bottom:16px;
}
.tg-script{
  font-family:var(--tg-font-script);font-size:34px;line-height:1.05;
  color:var(--tg-sun);margin:0 0 4px;font-weight:400;letter-spacing:0;
}
.tg-hero__meta{display:flex;flex-wrap:wrap;gap:10px;margin:24px 0 30px}
.tg-pill{
  padding:10px 14px;border:1px solid rgba(255,255,255,.3);border-radius:999px;
  background:rgba(15,76,74,.5);font-weight:600;display:inline-flex;align-items:center;gap:7px;
}
.tg-pill svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8}

/* 5b. Header slider (homepage)
   Maten en kleuren rechtstreeks uit het ontwerp overgenomen.
   ========================================================================== */
.tg-slider{
  position:relative;min-height:clamp(460px,55vw,560px);
  display:flex;align-items:flex-end;background:#123f3d;overflow:hidden;
}
.tg-slider__slides{position:absolute;inset:0}
.tg-slider__slide{position:absolute;inset:0;margin:0;opacity:0;transition:opacity 1.2s ease}
.tg-slider__slide.is-active{opacity:1}
.tg-slider__slide picture,.tg-slider__slide img{width:100%;height:100%;display:block}
.tg-slider__slide img{object-fit:cover}
.tg-slider::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(11,36,34,.14) 0%,rgba(11,36,34,.34) 44%,rgba(11,36,34,.72) 100%);
}
.tg-slider__overlay{position:relative;z-index:2;width:100%;padding:48px 0 52px;color:#fff}
.tg-slider__copy{max-width:700px}

/* portret + handgeschreven regel */
.tg-slider__intro{display:flex;align-items:center;gap:13px;margin-bottom:8px}
.tg-slider__portret{
  flex:0 0 auto;width:56px;height:56px;border-radius:50%;overflow:hidden;
  border:2px solid rgba(255,255,255,.85);display:block;
}
.tg-slider__portret img{width:100%;height:100%;object-fit:cover;display:block}
.tg-slider__intro .tg-script{
  font-size:clamp(25px,4vw,30px);color:var(--tg-sun);margin:0;line-height:1.1;
}

.tg-slider__overlay h1{
  font-size:clamp(31px,5.5vw,52px);line-height:1.08;font-weight:800;color:#fff;
  margin:0 0 14px;text-wrap:balance;letter-spacing:-.02em;
}
.tg-slider__lead{
  font-size:clamp(17px,2.2vw,19.5px);line-height:1.5;color:#fff;font-weight:500;
  margin:0;max-width:640px;text-shadow:0 1px 8px rgba(11,36,34,.35);
}
.tg-slider__buttons{display:flex;gap:18px;flex-wrap:wrap;align-items:center;margin-top:28px}
.tg-btn--hero{padding:17px 30px;font-size:18.5px;min-height:52px}

/* Tweede knop: onderlijnde tekstlink, geen tweede pil. In een knoppenrij is
   dit een flexkind; zonder deze regels rekt het uit tot de hoogte van de knop
   ernaast en zakt de onderlijning mee naar beneden. */
.tg-textlink{
  display:inline-flex;align-items:center;align-self:center;min-height:50px;
  color:#fff;font-weight:600;font-size:18px;
  text-decoration:underline;text-decoration-color:rgba(255,255,255,.5);
  text-decoration-thickness:1px;text-underline-offset:6px;
}
.tg-textlink:hover{text-decoration-color:#fff;color:#fff}

/* uitlijning volgt de keuze in ACF; het ontwerp gebruikt links */
.tg-slider--center .tg-slider__copy{margin-left:auto;margin-right:auto;text-align:center}
.tg-slider--center .tg-slider__intro,
.tg-slider--center .tg-slider__buttons{justify-content:center}
.tg-slider--right .tg-slider__copy{margin-left:auto;text-align:right}
.tg-slider--right .tg-slider__intro,
.tg-slider--right .tg-slider__buttons{justify-content:flex-end}

@media(max-width:700px){
  .tg-slider{min-height:clamp(420px,80vw,520px)}
  .tg-slider__overlay{padding:36px 0 40px}
  .tg-slider__buttons{gap:14px;margin-top:22px}
  .tg-btn--hero{width:100%}
}
@media(prefers-reduced-motion:reduce){
  .tg-slider__slide{transition:none}
}

/* melding voor beheerders wanneer er te weinig slides zijn */
.tg-slider__hint{
  position:absolute;left:0;right:0;bottom:0;z-index:5;margin:0;
  background:#F7EBD2;color:#7a5a00;border-top:2px solid var(--tg-gold);
  padding:10px 20px;font-size:14px;line-height:1.4;text-align:center;
}

/* 6. Subnav (sticky, op reisdetail)
   ========================================================================== */
.tg-subnav{
  position:sticky;top:var(--tg-header-h);z-index:70;
  background:#fff;border-bottom:1px solid rgba(22,51,49,.1);
}
.tg-subnav .tg-wrap{
  display:flex;gap:28px;overflow-x:auto;white-space:nowrap;align-items:stretch;
  scrollbar-width:none;
}
.tg-subnav .tg-wrap::-webkit-scrollbar{display:none}
.tg-subnav a{
  display:inline-flex;align-items:center;gap:7px;
  padding:16px 0;font-weight:700;color:var(--tg-green-700);
  border-bottom:2px solid transparent;
}
.tg-subnav a:hover,.tg-subnav a.is-active{color:var(--tg-teal);border-bottom-color:var(--tg-teal)}
.tg-subnav__icon{
  width:18px;height:18px;flex:0 0 18px;
  display:inline-flex;align-items:center;justify-content:center;color:var(--tg-teal);
}
.tg-subnav__icon svg{
  width:18px;height:18px;fill:none;stroke:currentColor;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
}
@media(max-width:900px){
  .tg-subnav .tg-wrap{gap:22px}
  .tg-subnav a{gap:6px;font-size:15px}
}

/* 7. Secties
   ========================================================================== */
.tg-section{padding:92px 0}
.tg-section--tight{padding:56px 0}
.tg-section--white{background:#fff}
.tg-section--cream{background:var(--tg-cream-2)}
.tg-section--dark{background:var(--tg-green-800);color:#fff}
.tg-section--dark .tg-eyebrow{color:var(--tg-aqua-light)}

.tg-eyebrow{
  font-size:14px;text-transform:uppercase;letter-spacing:.15em;
  color:var(--tg-teal);font-weight:800;margin-bottom:12px;
}
.tg-section h2,.tg-h2{
  font-size:clamp(32px,4.6vw,66px);line-height:1;letter-spacing:-.035em;
  color:var(--tg-ink);margin:0 0 25px;max-width:900px;
}
/* Op een donkere sectie zijn de koppen wit. Deze regel moet ná
   `.tg-section h2` staan: even specifiek, dus de laatste wint. */
.tg-section--dark h2,.tg-section--dark .tg-h2,
.tg-section--dark h3,.tg-section--dark h4{color:#fff}

.tg-lead{font-size:21px;line-height:1.65;color:#435b58;max-width:840px}
.tg-section--dark .tg-lead{color:rgba(255,255,255,.78)}

@media(max-width:900px){
  .tg-section{padding:56px 0}
  .tg-section--tight{padding:40px 0}
}

/* 8. WYSIWYG-content uit ACF / de editor
   ========================================================================== */
.tg-rte{font-size:18px;line-height:1.75;color:var(--tg-ink-soft);max-width:900px}
.tg-rte > *:first-child{margin-top:0}
.tg-rte > *:last-child{margin-bottom:0}
.tg-rte p{margin:0 0 18px}
.tg-rte h2{font-size:clamp(27px,4vw,34px);color:var(--tg-green-800);margin:44px 0 18px;line-height:1.05}
.tg-rte h3{font-size:28px;color:var(--tg-green-700);margin:36px 0 14px}
.tg-rte h4{font-size:22px;color:var(--tg-green-700);margin:30px 0 12px}
.tg-rte a{color:var(--tg-teal);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.tg-rte a:hover{color:var(--tg-green-700)}
.tg-rte ul,.tg-rte ol{padding-left:22px;margin:0 0 18px}
.tg-rte li{margin:9px 0}
.tg-rte ul{list-style:none;padding-left:28px}
.tg-rte ul li{position:relative}
.tg-rte ul li::before{
  content:'✓';position:absolute;left:-28px;color:var(--tg-aqua);font-weight:800;
}
.tg-rte ol{list-style:decimal}
.tg-rte img{margin:24px 0;border-radius:var(--tg-radius)}
.tg-rte blockquote{
  margin:28px 0;padding:22px 28px;background:var(--tg-cream-2);
  border-left:4px solid var(--tg-aqua);font-size:20px;line-height:1.6;
}
.tg-rte table{width:100%;border-collapse:collapse;margin:24px 0;font-size:16px}
.tg-rte th,.tg-rte td{border:1px solid var(--tg-line);padding:10px 12px;text-align:left}
.tg-rte th{background:var(--tg-cream-2)}
.tg-rte--invert{color:rgba(255,255,255,.85)}
.tg-rte--invert h2,.tg-rte--invert h3{color:#fff}
.tg-rte--invert ul li::before{color:var(--tg-aqua-light)}

/* 9. Overzicht + prijskaart (reisdetail)
   ========================================================================== */
.tg-overview{
  display:grid;grid-template-columns:minmax(0,1.5fr) minmax(300px,.65fr);
  gap:70px;align-items:start;
}
.tg-route{
  font-weight:700;font-size:18px;color:var(--tg-green-700);padding:18px 0;
  border-top:1px solid rgba(22,51,49,.14);border-bottom:1px solid rgba(22,51,49,.14);
  margin:28px 0;
}
/* De route als één regel tussen twee haarlijntjes, zoals in het ontwerp. */
.tg-route{
  font-weight:700;font-size:18px;color:var(--tg-green-700);
  padding:18px 0;margin:28px 0;
  border-top:1px solid rgba(22,51,49,.14);border-bottom:1px solid rgba(22,51,49,.14);
}

.tg-highlights{
  display:grid;grid-template-columns:1fr 1fr;gap:14px 28px;
  list-style:none;padding:0;margin:30px 0;
}

/*
 * De hoogtepunten komen uit een tekstveld, dus als een gewone <ul>. Hier
 * krijgen ze dezelfde twee kolommen met aqua vinkjes als de lijst in het
 * ontwerp.
 */
.tg-hoogtepunten ul{
  display:grid;grid-template-columns:1fr 1fr;gap:14px 28px;
  list-style:none;padding:0;margin:30px 0;
}
.tg-hoogtepunten ul li{position:relative;padding-left:28px;font-size:17px;line-height:1.45}
.tg-hoogtepunten ul li::before{
  content:'✓';position:absolute;left:0;color:var(--tg-aqua);font-weight:800;
}
.tg-highlights li{position:relative;padding-left:28px;font-size:17px;line-height:1.45}
.tg-highlights li::before{content:'✓';position:absolute;left:0;color:var(--tg-aqua);font-weight:800}
.tg-highlights li i{position:absolute;left:0;top:2px;color:var(--tg-aqua);font-style:normal}
.tg-highlights li.has-icon::before{content:none}

.tg-pricecard{
  position:sticky;top:calc(var(--tg-header-h) + 94px);
  background:var(--tg-green-800);color:#fff;border-radius:var(--tg-radius);padding:34px;
}
.tg-pricecard .tg-script{font-size:29px}
.tg-pricecard .tg-eyebrow{color:var(--tg-aqua-light);margin-top:22px}
.tg-price{font-size:38px;font-weight:800;line-height:1.05;margin:15px 0}
.tg-price small{display:block;font-size:15px;font-weight:500;color:rgba(255,255,255,.75);margin-top:6px}
.tg-small{font-size:14px;line-height:1.6;color:rgba(255,255,255,.75)}
.tg-pricecard .tg-btn{margin-top:10px}
.tg-pricecard__facts{list-style:none;padding:0;margin:20px 0 0;font-size:15px}
.tg-pricecard__facts li{
  display:flex;gap:10px;align-items:flex-start;padding:9px 0;
  border-top:1px solid rgba(255,255,255,.15);
}
.tg-pricecard__facts li:first-child{border-top:0}
.tg-pricecard__facts svg{width:17px;height:17px;flex:0 0 17px;margin-top:2px;fill:none;stroke:var(--tg-aqua-light);stroke-width:1.8}

/* 10. Dag per dag
   ========================================================================== */
.tg-itinerary{
  display:grid;grid-template-columns:minmax(0,1fr) 390px;gap:46px;
  align-items:start;margin-top:42px;
}
.tg-itinerary--nomap{grid-template-columns:1fr}
.tg-days{border-top:1px solid var(--tg-line)}
.tg-day{border-bottom:1px solid var(--tg-line)}
.tg-day > summary{
  list-style:none;display:grid;grid-template-columns:105px minmax(0,1fr) 34px;
  align-items:center;gap:18px;padding:22px 0;cursor:pointer;
}
.tg-day > summary::-webkit-details-marker{display:none}
.tg-day__no{
  font-size:15px;letter-spacing:.08em;text-transform:uppercase;
  font-weight:800;color:var(--tg-teal);margin:0;
}
.tg-day__title{font-size:23px;font-weight:700;color:var(--tg-green-700);line-height:1.2}
.tg-day__toggle{
  width:32px;height:32px;border:1px solid rgba(20,80,78,.22);border-radius:50%;
  position:relative;justify-self:end;
}
.tg-day__toggle::before,.tg-day__toggle::after{
  content:'';position:absolute;background:var(--tg-teal);
  left:9px;right:9px;top:15px;height:2px;
}
.tg-day__toggle::after{transform:rotate(90deg);transition:transform .2s ease}
.tg-day[open] .tg-day__toggle::after{transform:rotate(0)}
.tg-day__body{
  display:grid;grid-template-columns:minmax(220px,.44fr) 1fr;gap:28px;
  padding:0 0 30px 123px;
}
.tg-day__body.no-image{grid-template-columns:1fr;padding-left:123px}
.tg-day__photo{width:100%;height:220px;object-fit:cover;border-radius:var(--tg-radius)}
.tg-day__copy{font-size:17px;line-height:1.7;color:var(--tg-ink-soft)}
.tg-day__copy p{margin:0 0 14px}
.tg-day__copy p:last-child{margin-bottom:0}

.tg-map{
  position:sticky;top:calc(var(--tg-header-h) + 98px);
  background:#fff;padding:16px;box-shadow:0 10px 35px rgba(15,76,74,.08);
}
.tg-map__frame{display:block;width:100%;height:560px;border:0}
.tg-map__frame iframe{display:block;width:100%;height:100%;border:0}
.tg-map__caption{padding:15px 4px 3px}
.tg-map__caption strong{display:block;color:var(--tg-green-700);font-size:18px;margin-bottom:5px}
.tg-map__caption span{font-size:14px;line-height:1.45;color:var(--tg-ink-muted)}

/* 11. Logies
   ========================================================================== */
.tg-lodging{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:55px;align-items:center}
.tg-lodging__copy{font-size:18px;line-height:1.7;color:var(--tg-ink-soft)}
.tg-lodging__images{
  display:grid;grid-template-columns:1.15fr .85fr .85fr;grid-template-rows:185px 185px;gap:10px;
}
.tg-lodging__images img{width:100%;height:100%;object-fit:cover}
.tg-lodging__images img:first-child{grid-column:1/2;grid-row:1/3}
.tg-lodging__images--1{grid-template-columns:1fr;grid-template-rows:380px}
.tg-lodging__images--1 img:first-child{grid-column:auto;grid-row:auto}
.tg-lodging__images--2{grid-template-columns:1fr 1fr;grid-template-rows:380px}
.tg-lodging__images--2 img:first-child{grid-column:auto;grid-row:auto}

.tg-lodging-list{margin-top:56px;display:grid;gap:22px}
.tg-lodging-item{
  display:grid;grid-template-columns:280px 1fr;gap:30px;align-items:center;
  background:#fff;padding:22px;box-shadow:0 8px 26px rgba(15,76,74,.06);
}
.tg-lodging-item img{width:100%;height:200px;object-fit:cover}
.tg-lodging-item .tg-rte{font-size:17px}

/* 12. Prijs / inbegrepen
   ========================================================================== */
.tg-practical{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:34px}
.tg-box{background:var(--tg-cream-2);padding:36px}
.tg-box h3{font-size:28px;color:var(--tg-green-800);margin:0 0 18px}
.tg-box .tg-rte{color:var(--tg-ink-soft)}
.tg-box .tg-rte ul{padding-left:28px}
/* op een crèmekleurige sectie moeten de kaders wél opvallen */
.tg-section--cream .tg-box{background:#fff}
/* uitsluitingen krijgen een kruisje in plaats van een vinkje */
.tg-box--excl .tg-rte ul li::before{content:'×';color:#b4534a;font-size:20px;line-height:1;top:1px;position:absolute}
.tg-price-line{font-size:20px;font-weight:600;line-height:1.6;color:var(--tg-green-700);margin:0 0 10px}

/* 13. Galerij
   ========================================================================== */
.tg-gallery{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  grid-auto-rows:210px;grid-auto-flow:dense;gap:12px;margin-top:35px;
}
.tg-gallery figure{margin:0;overflow:hidden}
.tg-gallery figure:nth-child(9n+1),
.tg-gallery figure:nth-child(9n+6){grid-column:span 2;grid-row:span 2}
.tg-gallery img{width:100%;height:100%;object-fit:cover;transition:transform .45s ease}
.tg-gallery figure:hover img{transform:scale(1.03)}
.tg-gallery__note{margin-top:18px;color:rgba(255,255,255,.72);font-size:15px}

/* lightbox */
.tg-lightbox{
  position:fixed;inset:0;z-index:200;display:none;
  background:rgba(8,32,31,.92);align-items:center;justify-content:center;padding:30px;
}
.tg-lightbox.is-open{display:flex}
.tg-lightbox img{max-width:min(1200px,92vw);max-height:88vh;width:auto;height:auto;object-fit:contain}
.tg-lightbox__close,.tg-lightbox__prev,.tg-lightbox__next{
  position:absolute;background:rgba(255,255,255,.12);border:0;color:#fff;
  width:52px;height:52px;border-radius:50%;font-size:24px;cursor:pointer;line-height:1;
}
.tg-lightbox__close{top:22px;right:22px}
.tg-lightbox__prev{left:22px;top:50%;transform:translateY(-50%)}
.tg-lightbox__next{right:22px;top:50%;transform:translateY(-50%)}
.tg-lightbox__close:hover,.tg-lightbox__prev:hover,.tg-lightbox__next:hover{background:rgba(255,255,255,.24)}

/* 14. Liesbet-blok + CTA
   ========================================================================== */
.tg-liesbet{background:var(--tg-sun)}
.tg-liesbet__grid{display:grid;grid-template-columns:240px 1fr;gap:55px;align-items:center}
.tg-liesbet__grid img{width:220px;height:300px;object-fit:cover}
.tg-liesbet .tg-script{color:var(--tg-green-800)}
.tg-liesbet h2{color:var(--tg-green-800)}
.tg-liesbet .tg-lead{color:#163331}

.tg-cta{background:var(--tg-green-800);color:#fff;padding:75px 0}
.tg-cta .tg-wrap{display:flex;justify-content:space-between;align-items:center;gap:40px}
.tg-cta h2{color:#fff;margin:0 0 10px}
.tg-cta p{font-size:19px;color:rgba(255,255,255,.8);margin:0}
.tg-cta .tg-script{color:var(--tg-sun)}

/* formulierblok op donkere achtergrond */
.tg-formblock{
  background:#fff;color:var(--tg-ink);padding:38px;border-radius:var(--tg-radius);
  max-width:720px;margin-top:34px;
}
.tg-formblock h3{font-size:26px;color:var(--tg-green-800);margin:0 0 8px}
.tg-formblock p{color:var(--tg-ink-soft);margin:0 0 22px;line-height:1.6}

/* 15. Kaarten (reizen / bestemmingen)
   ========================================================================== */
.tg-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;margin-top:34px}
.tg-cards--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.tg-cards--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.tg-card{
  background:#fff;border-radius:var(--tg-radius-card);overflow:hidden;
  border:1px solid rgba(20,59,57,.1);display:flex;flex-direction:column;
  transition:transform .25s ease, box-shadow .25s ease;
}
.tg-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(15,76,74,.12)}
.tg-card__media{position:relative;display:block}
.tg-card__media img{width:100%;aspect-ratio:4/3;object-fit:cover}
.tg-card__badge{
  position:absolute;left:16px;top:16px;background:rgba(15,76,74,.88);color:#fff;
  padding:7px 13px;border-radius:999px;font-size:13px;font-weight:700;
  letter-spacing:.04em;
}
.tg-card__body{padding:25px;display:flex;flex-direction:column;flex:1}
.tg-card__meta{
  color:var(--tg-teal);font-size:14px;text-transform:uppercase;
  letter-spacing:.12em;font-weight:800;
}
.tg-card h3{color:var(--tg-ink);font-size:23px;margin:0 0 8px;line-height:1.12}
.tg-card p{line-height:1.55;color:var(--tg-ink-soft);margin:0 0 12px}
/* Ondertitel, prijs en prijs-met-vlucht, zoals in het ontwerp. */
.tg-card__sub{font-size:16.5px}
.tg-card__text{font-size:16px}
.tg-card__price{font-size:18px;font-weight:800;color:var(--tg-green-700);margin:6px 0 2px!important}
.tg-card__price-alt{font-size:15px;color:var(--tg-ink-muted);margin:0 0 12px!important}
.tg-card__date{
  display:flex;gap:8px;align-items:center;font-size:15px;
  color:var(--tg-ink-soft);margin:0 0 14px!important;
}
.tg-card__date svg{width:15px;height:15px;flex:0 0 15px;stroke:var(--tg-teal)}
.tg-card__facts{list-style:none;padding:0;margin:0 0 14px;font-size:15px;color:var(--tg-ink-soft)}
.tg-card__facts li{display:flex;gap:9px;align-items:center;padding:5px 0}
.tg-card__facts svg{width:16px;height:16px;flex:0 0 16px;fill:none;stroke:var(--tg-teal);stroke-width:1.8}
/* De "meer"-links (Bekijk alle …, Lees hoe ik werk, Ontdek …).
   Eén definitie voor alle blokken, zodat lettertype, grootte en gewicht
   nergens uiteenlopen. Donkergroen, met een duidelijke hover. */
.tg-card__go{
  display:inline-block;margin-top:auto;
  font-family:var(--tg-font);font-size:16px;font-weight:800;line-height:1.4;
  color:var(--tg-green-800);
  text-decoration:none;
  transition:color .15s ease;
}
.tg-card__go:hover,
.tg-card__go:focus-visible,
.tg-card:hover .tg-card__go{
  color:var(--tg-teal);text-decoration:underline;text-underline-offset:4px;
}

/* 15b. Tekstkolommen, afwisselende blokken en flip-boxen
   ========================================================================== */
.tg-textcols{display:grid;gap:44px}
.tg-textcols--2{grid-template-columns:1fr 1fr}
.tg-textcols--3{grid-template-columns:repeat(3,minmax(0,1fr))}

.tg-alternate{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:55px;align-items:center;margin:0 0 60px;
}
.tg-alternate:last-child{margin-bottom:0}
.tg-alternate img{width:100%;height:100%;max-height:460px;object-fit:cover}
.tg-alternate--flip img{order:2}

.tg-flipgrid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:20px;margin-bottom:20px;
}
.tg-flipgrid:last-child{margin-bottom:0}
.tg-flipcard{
  position:relative;overflow:hidden;border-radius:var(--tg-radius-card);
  background:var(--tg-green-800);color:#fff;min-height:260px;display:flex;
}
.tg-flipcard__bg{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:.42;
}
.tg-flipcard__body{position:relative;z-index:1;padding:28px;align-self:flex-end;width:100%}
.tg-flipcard h3{font-size:24px;color:#fff;margin:0 0 10px;line-height:1.15}
.tg-flipcard .tg-rte{color:rgba(255,255,255,.9)}
.tg-flipcard .tg-rte a{color:var(--tg-sun)}
.tg-flipcard .tg-rte ul li::before{color:var(--tg-aqua-light)}
.tg-flipcard__more{margin-top:14px;border-top:1px solid rgba(255,255,255,.25);padding-top:12px}
.tg-flipcard__more summary{
  cursor:pointer;font-weight:700;color:var(--tg-sun);list-style:none;
}
.tg-flipcard__more summary::-webkit-details-marker{display:none}
.tg-flipcard__more summary::after{content:' +'}
.tg-flipcard__more[open] summary::after{content:' –'}

@media(max-width:980px){
  .tg-textcols--2,.tg-textcols--3{grid-template-columns:1fr;gap:32px}
  .tg-alternate{grid-template-columns:1fr;gap:26px;margin-bottom:46px}
  .tg-alternate--flip img{order:0}
  .tg-flipgrid{grid-template-columns:1fr 1fr}
  .tg-flipcard{grid-column:span 1!important}
}
@media(max-width:700px){
  .tg-flipgrid{grid-template-columns:1fr}
}

/* 15c. Homepage-secties
   ========================================================================== */

/* bestemmingen als foto-tegels, over de volle breedte */
.tg-section--tiles{background:#fff;padding:44px 0 34px}
.tg-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px}
.tg-tile{
  position:relative;display:block;aspect-ratio:16/9;overflow:hidden;
  background:var(--tg-green-800);
}
.tg-tile img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
a.tg-tile:hover img{transform:scale(1.04)}
/* De naam staat als een donker pilletje midden onderaan de tegel, niet als
   een balk over de volle breedte. Zo blijft de foto beter zichtbaar. */
.tg-tile__name{
  position:absolute;left:50%;bottom:16px;transform:translateX(-50%);
  display:inline-block;max-width:calc(100% - 24px);
  padding:8px 20px;border-radius:999px;background:rgba(11,36,34,.5);
  text-align:center;color:#fff;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;
  font-size:clamp(17px,1.6vw,22px);font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;text-shadow:0 1px 6px rgba(0,0,0,.35);
}
.tg-tile--wide{
  grid-column:1/-1;aspect-ratio:auto;min-height:104px;
  display:flex;align-items:center;justify-content:center;
  background:var(--tg-green-800);
}
.tg-tile--wide span{
  color:#fff;font-size:clamp(17px,1.5vw,20px);font-weight:600;
  text-align:center;padding:0 16px;line-height:1.4;
}
a.tg-tile--wide:hover{background:var(--tg-green-900)}
@media(max-width:900px){.tg-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.tg-tiles{grid-template-columns:1fr}}

/* aankondigingsbalk */
.tg-announce{background:#F7EBD2;border-bottom:1px solid rgba(204,157,0,.35)}
.tg-announce .tg-wrap{
  padding-top:13px;padding-bottom:13px;
  display:flex;align-items:center;justify-content:center;gap:10px;
  flex-wrap:wrap;text-align:center;
}
.tg-announce span{font-size:17px;font-weight:600;color:var(--tg-green-700);line-height:1.4}
.tg-announce a{
  font-size:17px;font-weight:700;color:#9A6B00;white-space:nowrap;
  border-bottom:1px solid rgba(154,107,0,.45);
}

/* reviewstrook */
.tg-trust{background:#fff;border-bottom:1px solid rgba(22,51,49,.1)}
.tg-trust__grid{
  padding-top:18px;padding-bottom:18px;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:18px 40px;align-items:center;
}
.tg-trust__quote{margin:0;display:flex;flex-direction:column;gap:6px}
.tg-trust__stars{color:var(--tg-gold);font-size:15px;letter-spacing:2px}
.tg-trust__quote blockquote{margin:0;font-size:17px;line-height:1.5;color:#2c4340}
.tg-trust__quote figcaption{font-size:15.5px;color:#5a6b69;font-weight:700}
.tg-trust__facts{font-size:15.5px;line-height:1.6;color:#5a6b69}
/* De feiten als opsomming met een aqua vinkje ervoor. */
.tg-trust__lijst,
.tg-trust__facts ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.tg-trust__lijst li,
.tg-trust__facts ul li{
  position:relative;padding-left:26px;line-height:1.45;
}
.tg-trust__lijst li::before,
.tg-trust__facts ul li::before{
  content:"";position:absolute;left:0;top:.32em;width:15px;height:9px;
  border-left:2.2px solid var(--tg-aqua);border-bottom:2.2px solid var(--tg-aqua);
  transform:rotate(-45deg);border-radius:1px;
}
/* De regel met de Google-score, met het logo ervoor. */
.tg-trust__google{
  display:flex;align-items:center;gap:8px;margin:0 0 6px;
  font-size:15.5px;font-weight:700;color:var(--tg-green-800);
}
.tg-trust__google svg{flex:0 0 auto}
.tg-trust__google a{color:var(--tg-green-700);text-decoration:underline;text-underline-offset:3px}
.tg-trust__google a:hover{color:var(--tg-green-800)}

/* grote aanvraagsectie */
.tg-request{position:relative;padding:58px 0;overflow:hidden;background:var(--tg-green-800)}
.tg-request__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tg-request::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(11,36,34,.82),rgba(11,36,34,.9));
}
.tg-request__grid{
  position:relative;z-index:2;
  display:flex;gap:36px 56px;flex-wrap:wrap;align-items:flex-start;
}
.tg-request__copy{flex:1 1 400px;min-width:0;color:#fff}
.tg-request__copy h2{
  font-size:clamp(30px,4.4vw,44px);line-height:1.08;color:#fff;margin:0 0 16px;
}
.tg-request__intro{font-size:19px;line-height:1.55;color:rgba(255,255,255,.92);margin:0 0 26px}
.tg-request__tel{display:inline-flex;align-items:center;gap:10px;color:#fff;font-weight:800;font-size:26px}
.tg-request__mail{display:inline-block;color:rgba(255,255,255,.9);font-size:18px;font-weight:600;margin-top:4px}
.tg-request__buttons{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
.tg-request__note{font-size:16px;line-height:1.5;color:rgba(255,255,255,.8);margin:20px 0 0;max-width:440px}
.tg-request__form{
  flex:1 1 380px;min-width:0;background:#FFFDF8;border-radius:22px;padding:30px 32px;
}
/* De twee regels onder het formulier, binnen de kaart. */
.tg-request__formnote{font-size:15px;line-height:1.45;color:#5a6b69;margin-top:14px}
.tg-request__formnote p{margin:0 0 8px}
.tg-request__formnote p:last-child{margin-bottom:0}
.tg-request__privacy{font-size:14.5px;line-height:1.45;color:#7d8d8b;margin-top:10px}
.tg-request__privacy p{margin:0}
.tg-request__privacy a{color:#00807B;text-decoration:underline}
.tg-btn--ghostlight{
  background:rgba(255,255,255,.14);border:1.5px solid rgba(255,255,255,.55);color:#fff;
}
.tg-btn--ghostlight:hover{background:rgba(255,255,255,.26);color:#fff}
@media(max-width:700px){
  .tg-request{padding:44px 0}
  .tg-request__form{padding:24px 20px}
  .tg-request__buttons .tg-btn{flex:1 1 100%}
}

/* troeven als tekstkolommen, niet als kaarten */
.tg-usps{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));
  gap:40px 32px;margin-top:44px;
}
.tg-usp{text-align:center}
.tg-usp__icon{display:block;margin:0 auto 16px;height:66px;width:auto}
.tg-usp h3{font-size:20px;font-weight:700;margin:0 0 10px;color:var(--tg-ink)}
.tg-usp__text{font-size:17px;line-height:1.55;color:var(--tg-ink-soft)}
.tg-usp__text p{margin:0}

/* Op een donkere achtergrond, zoals de aqua strook "Waar ik het verschil
   maak": witte koppen, witte tekst en witte icoontjes. De icoontjes zijn
   geüploade beelden, dus die kleuren we met een filter — dat werkt voor de
   lijntekeningen uit het ontwerp. */
.tg-usps--donker .tg-centered,
.tg-usps--donker .tg-centered .tg-rte,
.tg-usps--donker .tg-centered h2{color:#fff}
.tg-usps--donker .tg-usp h3{color:#fff}
.tg-usps--donker .tg-usp__text{color:rgba(255,255,255,.9)}
.tg-usps--donker .tg-usp__icon{filter:brightness(0) invert(1)}
.tg-usps--donker .tg-usp__text a{color:#fff;text-decoration:underline}

.tg-section--teal{background:var(--tg-teal);color:#fff}
.tg-section--teal h2,.tg-section--teal h3{color:#fff}

.tg-centered{text-align:center;max-width:700px;margin:0 auto 30px}
.tg-centered .tg-lead{margin:0 auto;font-size:18px}
/* specificiteit moet boven `.tg-section h2` uitkomen */
.tg-section h2.tg-h2--mid,.tg-h2--mid{font-size:clamp(27px,4vw,34px);line-height:1.12;margin:0 0 10px}
.tg-section h2.tg-h2--sm,.tg-h2--sm{font-size:clamp(26px,3.4vw,32px);line-height:1.15;margin:0 0 14px}
.tg-card__media--short img{aspect-ratio:16/6}
/* Bij de inspiratiereizen is de foto lager, zodat de tekst meer gewicht
   krijgt en de drie kaarten korter blijven. */
.tg-inspiratie .tg-card__media img{aspect-ratio:16/6}

.tg-aftercards{margin-top:22px}
.tg-note{font-size:15.5px;line-height:1.55;color:var(--tg-ink-muted);margin:12px 0 0;max-width:760px}

/* portret + tekst */
.tg-portrait{display:flex;gap:36px;align-items:center;flex-wrap:wrap;max-width:1000px}
.tg-portrait__img{
  flex:0 0 auto;width:220px;height:220px;border-radius:50%;object-fit:cover;
}
.tg-portrait__copy{flex:1 1 340px;min-width:0}
.tg-script--gold{display:block;font-size:27px;color:var(--tg-gold);margin-bottom:2px}
.tg-script--dark{font-family:var(--tg-font-script);font-size:26px;color:var(--tg-green-800);margin:0 0 18px;font-weight:400}

/* begeleide vertrekken */
.tg-departures{display:flex;flex-direction:column;gap:16px}
.tg-departure{
  background:#fff;border:1px solid rgba(22,51,49,.09);border-radius:20px;
  padding:26px 28px;display:flex;gap:24px;flex-wrap:wrap;align-items:center;
}
.tg-departure--upcoming{border:2px solid var(--tg-gold);display:block}
.tg-departure__body{flex:1 1 300px;min-width:0}
.tg-departure__head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:4px}
.tg-departure__head h3{font-size:23px;font-weight:800;color:var(--tg-ink);margin:0;line-height:1.2}
.tg-departure__date{font-size:17px;color:#5a6b69;margin-bottom:8px}
.tg-departure__desc{font-size:17px;line-height:1.5;color:var(--tg-ink-soft);margin:0 0 10px}
.tg-departure__price{font-size:19px;font-weight:800;color:var(--tg-green-700)}
.tg-departure__basis{font-size:15.5px;line-height:1.45;color:#5a6b69;margin-top:2px}
.tg-departure__note{font-size:15.5px;line-height:1.5;color:#6b807e;margin:12px 0 0}
.tg-departure__extra{font-size:15.5px;line-height:1.45;color:#5a6b69;margin-top:4px}
.tg-departure__seats{font-size:16px;font-weight:700;color:#9A6B00;margin-top:8px}
.tg-departure__form{margin-top:18px;max-width:640px}
/* Geen extra ruimte onder de knop van dat formulier. */
.tg-departure__form .gform_wrapper.gravity-theme .gform_footer{margin:0;padding:0}
.tg-departure > .tg-btn{flex:0 0 auto;border-radius:12px}

.tg-tag{
  display:inline-block;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  font-size:11.5px;padding:6px 12px;border-radius:999px;
}
/* De keuzes hieronder staan ook in de keuzelijst "Kleur van het label"
   (ACF, blok "Home: Begeleide vertrekken"). Zet je er hier een bij, zet
   ze dan ook in LABEL_KLEUREN in build/make-acf.py. */
.tg-tag--goud{color:#0E2B29;background:var(--tg-sun)}
.tg-tag--aqua{color:#06403E;background:#B7EEEA}
.tg-tag--rood{color:#7d2118;background:#FBD9D4}
.tg-tag--roze{color:#71335A;background:#F2DDEB}
.tg-tag--paars{color:#4A3288;background:#E3DCF7}
.tg-tag--blauw{color:#154A78;background:#D6E8F8}
.tg-tag--groen{color:#1D5B36;background:#D6EFDD}
.tg-tag--oranje{color:#8A4212;background:#FBE3CD}
.tg-tag--grijs{color:#37423F;background:#E5E9E7}
.tg-tag--donker{color:#FFFFFF;background:var(--tg-green-800)}

/* infoavond / mailinglijst */
.tg-splitcard{display:flex;gap:32px 48px;flex-wrap:wrap;align-items:flex-start}
.tg-splitcard > *{flex:1 1 380px;min-width:0}
.tg-panel{
  background:#fff;border:1px solid rgba(22,51,49,.09);border-radius:20px;padding:28px 30px;
}
.tg-panel__eyebrow{
  font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--tg-teal);margin-bottom:10px;
}
.tg-panel__title{font-size:24px;font-weight:800;color:var(--tg-ink);margin-bottom:4px}
.tg-panel__meta{font-size:17.5px;color:var(--tg-ink-soft);margin-bottom:4px}
.tg-panel__intro{font-size:17.5px;line-height:1.55;color:var(--tg-ink-soft);margin:0 0 18px}
.tg-panel__form{margin-top:20px}

.tg-signup .gform_wrapper .gfield input[type=text],
.tg-signup .gform_wrapper .gfield input[type=email]{border:none!important}
.tg-signup .gform_wrapper .gform_footer{margin:0!important;padding:0!important}
.tg-signup .gform_wrapper .gform_footer input[type=submit],
.tg-signup .gform_wrapper .gform_button{width:100%;border-radius:14px!important}
.tg-signup__note{font-size:15.5px;color:rgba(255,255,255,.9);margin:10px 0 0}

/* Inschrijven voor een infoavond: velden onder elkaar, knop over de volle
   breedte in het donkergroen, zoals in het ontwerp. */
.tg-panel__form .gform_wrapper .gform_fields{gap:12px}
.tg-panel__form .gform_wrapper .gform_footer{margin:14px 0 0;padding:0}
.tg-panel__form .gform_wrapper .gform_footer input[type=submit],
.tg-panel__form .gform_wrapper .gform_page_footer input[type=submit],
.tg-panel__form .gform_wrapper .gform_button{
  width:100%;background:var(--tg-green-700)!important;border-radius:12px!important;
}
.tg-panel__form .gform_wrapper .gform_footer input[type=submit]:hover,
.tg-panel__form .gform_wrapper .gform_page_footer input[type=submit]:hover,
.tg-panel__form .gform_wrapper .gform_button:hover{background:var(--tg-green-800)!important}

/* Interesse in een reis in voorbereiding: voornaam, e-mail en de knop op
   één regel; onder 620px vallen ze onder elkaar. */
.tg-departure__form .gform_wrapper form{
  display:flex;gap:12px;align-items:flex-start;flex-wrap:wrap;
}
.tg-departure__form .gform_wrapper .gform_body{flex:1 1 320px;min-width:0}
.tg-departure__form .gform_wrapper .gform_fields{gap:12px}
.tg-departure__form .gform_wrapper .gform_footer{margin:0;padding:0;flex:0 0 auto}
.tg-departure__form .gform_wrapper .gform_footer input[type=submit],
.tg-departure__form .gform_wrapper .gform_page_footer input[type=submit],
.tg-departure__form .gform_wrapper .gform_button{border-radius:12px!important}
@media(max-width:620px){
  .tg-departure__form .gform_wrapper .gform_footer{flex:1 1 100%}
  .tg-departure__form .gform_wrapper .gform_footer input[type=submit],
  .tg-departure__form .gform_wrapper .gform_button{width:100%}
}

/* De aanvraag op de homepage: knop over de volle breedte onder de velden. */
.tg-request__form .gform_wrapper .gform_fields{gap:14px 16px}
.tg-request__form .gform_wrapper .gform_footer{margin:16px 0 0;padding:0}
.tg-request__form .gform_wrapper .gform_footer input[type=submit],
.tg-request__form .gform_wrapper .gform_page_footer input[type=submit],
.tg-request__form .gform_wrapper .gform_button{width:100%}

@media(max-width:700px){
  .tg-portrait{gap:24px}
  .tg-portrait__img{width:150px;height:150px}
  .tg-departure{padding:22px}
  .tg-departure > .tg-btn{width:100%}
  .tg-panel{padding:24px 22px}
}

/* 15d. Paginablokken: contact, zeker op reis, offerte
   ========================================================================== */

/* Gedeelde bouwstenen ---------------------------------------------------- */
.tg-btn--outline{background:#fff;color:var(--tg-green-700);border:1.5px solid var(--tg-green-700)}
.tg-btn--outline:hover{background:var(--tg-cream-2);color:var(--tg-green-700)}
.tg-btn--aqua{background:var(--tg-aqua);color:#fff}
.tg-btn--aqua:hover{background:#009a95;color:#fff}
.tg-btn--onbg{background:rgba(255,255,255,.12);color:#fff;border:1.5px solid rgba(255,255,255,.8)}
.tg-btn--onbg:hover{background:rgba(255,255,255,.22);color:#fff}

.tg-btnrow{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.tg-btnrow--center{justify-content:center}

.tg-eyebrow--gold{color:var(--tg-gold);font-size:12.5px;letter-spacing:.16em;margin-bottom:10px}
.tg-eyebrow--sun{color:var(--tg-sun);font-size:12.5px;letter-spacing:.16em;margin-bottom:10px}
.tg-eyebrow--onbg{color:rgba(255,255,255,.85);font-size:12.5px;letter-spacing:.16em;margin-bottom:10px}

/* Kader met gekleurde linkerrand. */
.tg-callout{background:#F3F8F6;border-left:4px solid var(--tg-aqua);border-radius:18px;padding:24px 26px}
.tg-callout--goud{border-left-color:var(--tg-gold)}
.tg-callout--groen{border-left-color:var(--tg-green-700)}
.tg-callout .tg-rte{font-size:17px;line-height:1.65;max-width:none}
.tg-callout .tg-rte p:last-child{margin-bottom:0}

.tg-linkrow{display:flex;gap:22px;flex-wrap:wrap;margin-top:18px}
.tg-linkrow a{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-weight:700;color:var(--tg-green-700);font-size:16.5px}
.tg-linkrow a:hover{color:var(--tg-gold)}

.tg-formnote{font-size:15px;line-height:1.55;color:#6b807e;margin:14px 0 0}
.tg-formnote a{color:var(--tg-green-700);font-weight:700}

/* Paginahero — tekst links, foto rechts ---------------------------------- */
.tg-phero{background:#fff;border-bottom:1px solid rgba(22,51,49,.08)}
.tg-phero__grid{padding-top:64px;padding-bottom:64px;display:grid;grid-template-columns:1.05fr .95fr;gap:34px;align-items:center}
.tg-phero--solo .tg-phero__grid{grid-template-columns:minmax(0,760px)}
.tg-phero__copy{min-width:0}
.tg-phero__title{
  font-size:clamp(28px,4.2vw,44px);line-height:1.07;font-weight:800;
  color:var(--tg-green-800);margin:0 0 16px;letter-spacing:-.02em;text-wrap:balance;
}
.tg-phero__lead{font-size:18px;line-height:1.6;color:var(--tg-ink-soft);margin:0;max-width:580px}
.tg-phero__note{font-size:15px;line-height:1.55;color:#4a5f5d;font-weight:600;margin:12px 0 0}
/* Foto links: de twee kolommen wisselen van plaats. De tekst houdt de
   breedste helft, net als wanneer de foto rechts staat. */
.tg-phero--fotolinks .tg-phero__grid{grid-template-columns:.95fr 1.05fr}
.tg-phero--fotolinks .tg-phero__copy{order:2}
.tg-phero--fotolinks .tg-phero__media{order:1}
.tg-phero__media{width:100%;border-radius:22px;overflow:hidden;aspect-ratio:4/3}
.tg-phero__media img{width:100%;height:100%;object-fit:cover;display:block}

/* Strook met vinkjes ------------------------------------------------------ */
.tg-checks{background:var(--tg-green-700)}
.tg-checks__grid{
  padding-top:26px;padding-bottom:26px;display:grid;gap:20px 26px;
  grid-template-columns:repeat(var(--tg-checks-cols,3),minmax(0,1fr));
}
.tg-checks__item{display:flex;gap:12px;align-items:flex-start;font-size:16.5px;line-height:1.5;color:#fff}
.tg-checks__item{align-items:center}
.tg-checks__dot{
  flex:0 0 auto;width:26px;height:26px;border-radius:50%;background:var(--tg-aqua);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;
}
.tg-checks__dot--gold,
.tg-checks__dot--goud{background:var(--tg-gold)}
.tg-checks__dot--licht{background:#E6F4F1;color:var(--tg-green-800)}
.tg-checks__dot--teal{background:var(--tg-teal)}
/* Met een icoon in het rondje wordt het wat groter, zoals in het ontwerp. */
.tg-checks__dot:has(svg){width:44px;height:44px}
.tg-checks__dot svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8}
/* Een geüpload icoon krijgt de kleur van het rondje mee: wit op een
   gekleurd bolletje, donkergroen op het lichte. */
.tg-checks__dot--eigen{width:44px;height:44px}
.tg-checks__eigen{width:22px;height:22px;object-fit:contain;display:block;
  filter:brightness(0) invert(1)}
.tg-checks__dot--licht .tg-checks__eigen{filter:brightness(0) saturate(100%) opacity(.85)}

/* Keuzekaarten ------------------------------------------------------------ */
.tg-choice{background:var(--tg-cream-2)}
.tg-choice__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin-top:24px}
.tg-choice__card{
  background:#fff;border:1px solid rgba(22,51,49,.14);border-radius:22px;padding:28px 26px;
  display:flex;flex-direction:column;align-items:flex-start;
}
.tg-choice__card.is-primary{border:2px solid var(--tg-gold)}
.tg-choice__card h3{font-size:21px;font-weight:800;color:var(--tg-green-800);margin:0 0 12px}
.tg-choice__card p{font-size:16.5px;line-height:1.6;color:var(--tg-ink-soft);margin:0 0 22px;flex:1}

/* Contactblok: formulier + contactkolom ----------------------------------- */
.tg-contactblok__grid{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:start}
.tg-contactblok__grid--solo{grid-template-columns:minmax(0,760px)}
.tg-contactblok__form{min-width:0}
.tg-contactblok__side{min-width:0;display:flex;flex-direction:column;gap:16px}
.tg-contactcard{background:var(--tg-cream-2);border:1px solid rgba(22,51,49,.1);border-radius:20px;padding:24px}
.tg-contactcard--plain{background:#fff;border-color:rgba(22,51,49,.14)}
.tg-contactcard__head{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.tg-contactcard__head h3{font-size:19px;font-weight:800;color:var(--tg-green-800);margin:0}
.tg-contactcard__icon{
  flex:0 0 auto;width:40px;height:40px;border-radius:50%;color:#fff;
  display:flex;align-items:center;justify-content:center;
}
.tg-contactcard__icon--wa{background:#25D366}
.tg-contactcard__icon--tel{background:var(--tg-aqua)}
.tg-contactcard__icon--mail{background:var(--tg-gold)}
.tg-contactcard__portret{flex:0 0 auto;width:64px;height:64px;border-radius:50%;overflow:hidden}
.tg-contactcard__portret img{width:100%;height:100%;object-fit:cover;display:block}
.tg-contactcard p{font-size:16px;line-height:1.6;color:var(--tg-ink-soft);margin:0 0 16px}
.tg-contactcard p:last-child{margin-bottom:0}
.tg-contactcard__big{
  display:inline-flex;align-items:center;min-height:44px;
  font-size:20px;font-weight:800;color:var(--tg-green-700);
}
.tg-contactcard__big--sm{font-size:18px;font-weight:700;word-break:break-word}
.tg-contactcard__rte{font-size:16px;line-height:1.6;color:var(--tg-ink-soft)}
.tg-contactcard__rte p{margin:0 0 12px}
.tg-contactcard__rte p:last-child{margin-bottom:0}

/* Stappen naast een foto -------------------------------------------------- */
.tg-steps{background:#fff}
.tg-steps__grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:38px;align-items:center}
.tg-steps__grid--rechts .tg-steps__media{order:2}
.tg-steps__grid--solo{grid-template-columns:minmax(0,820px)}
.tg-steps__media{width:100%;border-radius:22px;overflow:hidden;aspect-ratio:4/3}
.tg-steps__media img{width:100%;height:100%;object-fit:cover;display:block}
.tg-steps__copy{min-width:0}
.tg-steps__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:20px}
.tg-steps__list li{display:flex;gap:16px;align-items:flex-start}
.tg-steps__num{
  flex:0 0 auto;width:34px;height:34px;border-radius:50%;background:var(--tg-green-700);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:16px;
}
.tg-steps__body{min-width:0}
.tg-steps__title{display:block;font-size:17.5px;font-weight:700;color:var(--tg-green-800);margin-bottom:4px}
.tg-steps__text{display:block;font-size:16.5px;line-height:1.55;color:var(--tg-ink-soft)}

/* Hulp onderweg: genummerde kaarten + kader ------------------------------- */
.tg-helpblok{background:var(--tg-green-700)}
.tg-helpblok__intro{max-width:860px;margin:0 auto;text-align:center}
.tg-helpblok__rte{color:rgba(255,255,255,.88);font-size:17.5px;max-width:760px;margin:0 auto}
.tg-helpblok__rte p{margin:0 auto 14px}
.tg-helpblok__cards{
  list-style:none;margin:34px auto 0;padding:0;max-width:1140px;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;
}
.tg-helpblok__cards li{
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);border-radius:20px;
  padding:26px 24px;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;
}
.tg-helpblok__num{
  flex:0 0 auto;width:42px;height:42px;border-radius:50%;background:var(--tg-aqua);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:18px;
}
.tg-helpblok__title{font-size:18px;font-weight:700;color:#fff;line-height:1.3}
.tg-helpblok__text{font-size:16px;line-height:1.55;color:rgba(255,255,255,.85)}
.tg-helpblok__note{
  max-width:900px;margin:26px auto 0;background:rgba(255,255,255,.95);
  border-left:4px solid var(--tg-gold);border-radius:18px;padding:24px 26px;
}
.tg-helpblok__note h3{font-size:20px;font-weight:800;color:var(--tg-green-800);margin:0 0 10px}
.tg-helpblok__note .tg-rte{font-size:16.5px;line-height:1.6;max-width:none}
.tg-helpblok__note .tg-rte p:last-child{margin-bottom:0}
.tg-helpblok__slot{
  max-width:760px;margin:30px auto 0;text-align:center;
  font-size:clamp(23px,3vw,30px);line-height:1.3;color:var(--tg-sun);
}

/* Uitgelicht kader met links --------------------------------------------- */
.tg-infoblok{background:#fff}
.tg-infoblok__inner{max-width:860px}
/* Variant met een icoon links en de tekst ernaast, zonder kader. */
.tg-infoblok__icoonrij{display:flex;gap:40px;align-items:flex-start}
/* Het icoon staat bewust wat lager: naast de tekst, niet naast de kop. */
.tg-infoblok__icoon{flex:0 0 auto;width:96px;display:flex;justify-content:center;
  padding-top:58px;color:var(--tg-green-800)}
.tg-infoblok__icoon svg{width:72px;height:72px;fill:none;stroke:currentColor}
.tg-infoblok__icoon img{width:72px;height:72px;object-fit:contain;display:block}
.tg-infoblok__naast{min-width:0;flex:1 1 auto}
.tg-infoblok__naast > h2{margin-top:0}
.tg-infoblok__naast .tg-rte{font-size:18px;line-height:1.75}
@media(max-width:760px){
  .tg-infoblok__icoonrij{gap:20px}
  .tg-infoblok__icoon{width:56px;padding-top:34px}
  .tg-infoblok__icoon svg,.tg-infoblok__icoon img{width:48px;height:48px}
}

/* Formulier in een kaart -------------------------------------------------- */
.tg-formkaart__inner{max-width:900px}
.tg-formkaart__head{margin-bottom:24px}
.tg-formkaart__head .tg-lead{margin:0}
.tg-formkaart .tg-formnote{margin-top:18px;text-align:center}
/* Het formulier staat in een witte kaart. Het offerteformulier brengt zijn
   eigen kaart mee (tg-gform--offerte); die zetten we hier uit, anders staat er
   een kaart in een kaart. */
.tg-formkaart__kaart{
  background:#fff;border:1px solid rgba(22,51,49,.12);border-radius:22px;
  padding:26px 26px 28px;
}
.tg-formkaart__kaart .tg-gform--offerte{
  background:none;border:0;border-radius:0;padding:0;
}

/* Bestemming die tijdelijk niet boekbaar is ------------------------------- */
.tg-badge{
  display:inline-block;font-size:12.5px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:#8A3B00;background:#FBDCC2;
  padding:8px 14px;border-radius:999px;margin-bottom:14px;
}
/*
 * De hero volgt het ontwerp: de foto vult de hele strook, de naam staat
 * linksonder over de foto en het kaartje met de tekst zweeft rechtsonder
 * halfdoorzichtig over diezelfde foto. Het kaartje staat gewoon in de flow
 * (rechts onderaan uitgelijnd) in plaats van absoluut, zodat een langere
 * tekst de strook laat meegroeien in plaats van eruit te lopen.
 */
.tg-desthero{
  position:relative;background:var(--tg-green-800);
  /* Compact genoeg dat de bovenkant van de reistegels — met het gouden lint
     en het aantal dagen — al meteen mee in beeld staat. Het kaartje mag
     daarvoor wat breder worden. */
  height:clamp(280px,42vh,420px);
  display:flex;align-items:flex-end;justify-content:flex-end;
  padding:26px 4% 26px 0;
}
.tg-desthero__media{position:absolute;inset:0;overflow:hidden}
.tg-desthero__media img{width:100%;height:100%;object-fit:cover;display:block}
.tg-desthero__media::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(11,36,34,0) 45%,rgba(11,36,34,.6) 100%);
}
.tg-desthero__media h1{
  position:absolute;left:0;right:0;bottom:0;z-index:1;
  font-size:clamp(34px,5.5vw,54px);font-weight:700;color:#fff;margin:0;
  padding:0 24px 26px 32px;text-shadow:0 2px 12px rgba(0,0,0,.35);
}
.tg-desthero__card{
  position:relative;z-index:2;max-width:min(560px,48%);
  background:rgba(11,36,34,.78);border-radius:14px;
  padding:22px 26px;color:#fff;
  /* Past de tekst niet in de hoogte van de strook, dan schuift het kaartje
     zelf mee in plaats van eruit te lopen. */
  max-height:calc(clamp(280px,42vh,420px) - 52px);overflow:auto;
}
.tg-desthero__card .tg-badge{align-self:flex-start}
.tg-desthero__card h2{font-size:22px;font-weight:800;color:#fff;margin:0 0 14px;line-height:1.2}
.tg-desthero__rte{font-size:16px;line-height:1.55;color:rgba(255,255,255,.92)}
.tg-desthero__rte p{margin:0 0 12px}
.tg-desthero__rte p:last-child{margin-bottom:0}
.tg-destbar{background:#fff}
.tg-destbar .tg-btnrow{margin:0;padding:24px 0 4px}
.tg-destbar .tg-btn{border-radius:12px}

/* De voorbeeldreizen: titel en lead op wit, daaronder de tegels tegen
   elkaar aan over de volle breedte van het scherm. */
.tg-destreizen{background:#fff}
.tg-destreizen__kop{padding:34px 20px 18px}
.tg-destreizen__kop h2{
  font-size:clamp(25px,3.8vw,32px);font-weight:800;color:var(--tg-green-800);margin:0 0 10px;
}
.tg-destreizen__kop .tg-rte{max-width:680px;font-size:17px;line-height:1.6;color:var(--tg-ink-soft)}
.tg-destreizen__kop .tg-rte p:last-child{margin-bottom:0}
.tg-destreizen__voet{padding:26px 20px 48px;max-width:820px}

/* De tegels staan tegen elkaar aan: 2px, op elk schermformaat. Dat is de
   enige plek waar die afstand bepaald wordt. */
.tg-tegels{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px}
.tg-tegels--1{grid-template-columns:minmax(0,1fr)}
.tg-tegels--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.tg-tegels--3{grid-template-columns:repeat(3,minmax(0,1fr))}

/*
 * De tegel vult altijd de volle kolombreedte. `width:100%` moet erbij: met
 * alleen een aspect-ratio en een max-height krimpt de tegel op een breed
 * scherm mee in de breedte, en dan lijkt het alsof de tegels verder uit
 * elkaar staan — terwijl de tussenruimte gewoon 2px blijft. De hoogte wordt
 * geknipt door de max-height; de verhouding wijkt dan iets af, wat niet
 * opvalt omdat de foto toch bijgesneden wordt.
 */
.tg-tegel{
  position:relative;display:block;width:100%;
  aspect-ratio:3/4;max-height:560px;
  color:#fff;background:var(--tg-green-800);text-decoration:none;
  perspective:1400px;
}
/* Minder tegels betekent bredere tegels; dan mogen ze ook minder hoog zijn. */
.tg-tegels--3 .tg-tegel{aspect-ratio:1/1}
.tg-tegels--2 .tg-tegel{aspect-ratio:4/3}
.tg-tegels--1 .tg-tegel{aspect-ratio:2/1}
.tg-tegel:hover{color:#fff}

/* Het draaiende vlak met de twee kanten erin. */
.tg-tegel__vlak{
  position:absolute;inset:0;display:block;
  transform-style:preserve-3d;transition:transform .55s ease;
}
.tg-tegel__voor,
.tg-tegel__achter{
  position:absolute;inset:0;display:block;overflow:hidden;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
}
.tg-tegel__achter{
  transform:rotateY(180deg);background:#fff;color:var(--tg-ink);
  display:flex;align-items:center;justify-content:center;
}
/* Alleen met een muis draait de tegel om; op een touchscreen niet. */
@media(hover:hover){
  .tg-tegel:hover .tg-tegel__vlak,
  .tg-tegel:focus-visible .tg-tegel__vlak{transform:rotateY(180deg)}
}
@media(prefers-reduced-motion:reduce){
  .tg-tegel__vlak{transition:none}
}

.tg-tegel__img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
}
.tg-tegel__waas{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(11,36,34,0) 40%,rgba(11,36,34,.72) 100%);
}
.tg-tegel__lint{
  position:absolute;top:34px;right:0;z-index:2;
  background:var(--tg-gold);color:#fff;
  font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  padding:14px 7px;writing-mode:vertical-rl;
}
.tg-tegel__body{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  display:flex;flex-direction:column;align-items:center;
  padding:0 22px 26px;text-align:center;text-shadow:0 2px 12px rgba(0,0,0,.4);
}
.tg-tegel__titel{
  font-size:clamp(22px,2.2vw,27px);line-height:1.15;font-weight:600;color:#fff;margin:0 0 6px;
}
.tg-tegel__sub{font-size:16px;line-height:1.4;color:rgba(255,255,255,.92)}
.tg-tegel__go{
  display:inline-flex;align-items:center;gap:8px;margin-top:14px;
  font-size:16.5px;font-weight:600;
  border-bottom:1.5px solid rgba(255,255,255,.85);padding-bottom:2px;
}

/* De achterkant: witte kaart met de omschrijving, de feiten en een knop. */
.tg-tegel__achterin{
  display:flex;flex-direction:column;align-items:flex-start;gap:14px;
  padding:26px 28px;width:100%;max-width:440px;
}
.tg-tegel__achtertitel{
  font-size:clamp(21px,2vw,26px);line-height:1.15;font-weight:600;color:var(--tg-ink);
}
.tg-tegel__achtertekst{font-size:16.5px;line-height:1.55;color:var(--tg-ink-soft)}
.tg-tegel__feiten{display:flex;flex-direction:column;gap:9px}
.tg-tegel__feit{
  display:flex;align-items:center;gap:10px;font-size:16.5px;color:var(--tg-ink-soft);
}
.tg-tegel__feit svg{
  width:18px;height:18px;flex:0 0 18px;fill:none;stroke:var(--tg-teal);
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
}
.tg-tegel__knop{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--tg-teal);color:#fff;font-weight:600;font-size:16.5px;
  padding:13px 26px;min-height:48px;
}

.tg-tegel:focus-visible{outline:3px solid var(--tg-aqua);outline-offset:-4px}

@media(max-width:1050px){
  .tg-tegels,.tg-tegels--3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:620px){
  .tg-tegels,.tg-tegels--2,.tg-tegels--3{grid-template-columns:minmax(0,1fr)}
  .tg-tegels .tg-tegel,
  .tg-tegels--1 .tg-tegel,
  .tg-tegels--2 .tg-tegel,
  .tg-tegels--3 .tg-tegel{aspect-ratio:4/3}
  .tg-destreizen__kop{padding-top:40px}
}

/* Reviewstrook onder de reizen. */
.tg-destrev{background:#F3F8F6}
.tg-destrev__inner{max-width:1100px;padding-top:48px;padding-bottom:48px}
.tg-destrev h2{
  font-size:clamp(22px,3vw,28px);font-weight:800;color:var(--tg-green-800);margin:0 0 6px;
}
.tg-destrev__score{font-size:15.5px;color:#6b807e;margin:0 0 20px}
.tg-destrev__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:16px}
.tg-destrev__grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.tg-destrev__grid--1{grid-template-columns:minmax(0,1fr)}
.tg-destrev__kaart{
  background:#fff;border:1px solid rgba(22,51,49,.1);border-radius:18px;padding:22px 24px;
}
.tg-destrev__sterren{color:var(--tg-gold);font-size:16px;letter-spacing:2px;margin-bottom:10px}
.tg-destrev__kaart p{font-size:16.5px;line-height:1.6;color:#2c4442;margin:0 0 12px}
.tg-destrev__naam{font-size:15.5px;font-weight:700;color:var(--tg-green-700)}
.tg-destrev__link{
  display:inline-flex;align-items:center;gap:8px;margin-top:16px;
  font-weight:700;color:var(--tg-green-700);font-size:16.5px;min-height:44px;
}
.tg-destrev__leeg{
  display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-top:14px;
  background:#fff;border:1px solid rgba(22,51,49,.1);border-radius:18px;padding:20px 24px;
}
.tg-destrev__leeg .tg-destrev__sterren{font-size:18px;margin:0}
.tg-destrev__leeg p{flex:1 1 260px;min-width:0;font-size:16.5px;line-height:1.6;color:#2c4442;margin:0}
.tg-destrev__leeg .tg-destrev__link{margin-top:0}

@media(max-width:900px){
  .tg-destrev__grid,.tg-destrev__grid--2{grid-template-columns:minmax(0,1fr)}
}

/* "Voor wie deze bestemming past": drie witte kaartjes met een icoontje. */
.tg-destwie{background:#F5EFE4}
.tg-destwie__inner{padding-top:52px;padding-bottom:52px}
.tg-destwie h2{
  font-size:clamp(24px,3.4vw,30px);font-weight:800;color:var(--tg-green-800);margin:0 0 24px;
}
.tg-destwie__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.tg-destwie__grid--1{grid-template-columns:minmax(0,1fr);max-width:640px}
.tg-destwie__grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.tg-destwie__grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.tg-destwie__kaart{background:#fff;border-radius:20px;padding:24px 26px}
.tg-destwie__icoon{
  display:flex;width:42px;height:42px;border-radius:50%;background:#EAF6F5;
  align-items:center;justify-content:center;margin-bottom:14px;color:var(--tg-green-700);
}
.tg-destwie__kaart h3{font-size:19px;font-weight:800;color:var(--tg-green-800);margin:0 0 8px}
.tg-destwie__kaart p{font-size:16.5px;line-height:1.6;color:var(--tg-ink-soft);margin:0}

@media(max-width:1000px){
  .tg-destwie__grid,.tg-destwie__grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:680px){
  .tg-destwie__grid,.tg-destwie__grid--2,.tg-destwie__grid--4{grid-template-columns:minmax(0,1fr)}
  .tg-destwie__inner{padding-top:40px;padding-bottom:40px}
}

/* Op de bestemmingspagina staat het aantal dagen niet op de foto maar
   als bovenschrift in het kaartje zelf, zoals in het ontwerp. */
.tg-card__duur{
  font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:#00807B;margin:0 0 6px;
}

/* "… met Travelgems": tekst links, vinkjes rechts. */
.tg-destusp{background:#EAF6F5}
.tg-destusp__grid{
  padding-top:52px;padding-bottom:52px;
  display:grid;grid-template-columns:1.1fr .9fr;gap:26px 40px;align-items:start;
}
.tg-destusp h2{
  font-size:clamp(22px,3vw,28px);font-weight:800;color:var(--tg-green-800);margin:0 0 12px;
}
.tg-destusp__rte{font-size:16.5px;line-height:1.6;color:#2c4442}
.tg-destusp__rte p{margin:0 0 12px}
.tg-destusp__rte p:last-child{margin-bottom:0}
.tg-destusp__list{
  list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;
}
.tg-destusp__list li{
  display:flex;gap:11px;align-items:flex-start;
  font-size:16.5px;line-height:1.5;color:#2c4442;
}
.tg-destusp__dot{
  flex:0 0 auto;width:21px;height:21px;border-radius:50%;
  background:var(--tg-aqua);color:#fff;margin-top:2px;
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;
}
.tg-destusp__extra{display:block;font-size:15.5px;color:#5a6b69;margin-top:2px}
.tg-destusp__kicker{
  font-size:12.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--tg-gold);margin-bottom:10px;
}

/* Met een foto erbij: staande foto links, tekst en vinkjes onder elkaar rechts. */
.tg-destusp--foto .tg-destusp__grid{
  grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:30px;align-items:center;
}
.tg-destusp__foto{width:100%;border-radius:20px;overflow:hidden;aspect-ratio:4/5}
.tg-destusp__foto img{width:100%;height:100%;object-fit:cover;display:block}
.tg-destusp--foto .tg-destusp__list{margin-top:20px}

/* Strook over de groepsreizen. */
.tg-destgroep{background:var(--tg-green-700)}
.tg-destgroep__inner{
  padding-top:44px;padding-bottom:44px;
  display:flex;gap:22px;align-items:center;justify-content:space-between;flex-wrap:wrap;
}
.tg-destgroep h2{
  font-size:clamp(21px,2.8vw,27px);line-height:1.15;font-weight:800;color:#fff;margin:0 0 8px;
}
.tg-destgroep p{
  font-size:16.5px;line-height:1.6;color:rgba(255,255,255,.82);margin:0;max-width:720px;
}
.tg-destgroep .tg-btn{flex:0 0 auto}

@media(max-width:900px){
  .tg-destusp__grid,
  .tg-destusp--foto .tg-destusp__grid{grid-template-columns:1fr;padding-top:40px;padding-bottom:40px}
  .tg-destusp__foto{max-width:380px;margin:0 auto}
  .tg-destgroep__inner{padding-top:36px;padding-bottom:36px}
  .tg-destgroep .tg-btn{width:100%}
}

/* Het venster met de melding. */
.tg-modal__rte{color:var(--tg-ink-soft);line-height:1.6;margin:0 0 22px}
.tg-modal__rte p{margin:0 0 12px}
.tg-modal__rte p:last-child{margin-bottom:0}
.tg-modal__acties{
  display:flex;gap:18px;flex-wrap:wrap;align-items:center;margin-top:20px;
}
.tg-modal__acties a{font-weight:700;color:var(--tg-green-700);font-size:16px}
.tg-modal__acties a:hover{color:var(--tg-gold)}
.tg-modal__later{
  background:none;border:0;padding:0;cursor:pointer;
  color:#6b807e;font-family:var(--tg-font);font-size:16px;font-weight:600;
}
.tg-modal__later:hover{color:var(--tg-green-700)}

@media(max-width:900px){
  /* Mobiel schuift het kaartje onder de foto en wordt het effen donkergroen. */
  .tg-desthero{display:block;height:auto;min-height:0;max-height:none;padding:0}
  .tg-desthero__media{position:relative;inset:auto;min-height:0;aspect-ratio:4/3}
  .tg-desthero__card{
    max-width:none;max-height:none;overflow:visible;border-radius:0;
    background:var(--tg-green-800);padding:24px 20px 28px;
  }
}

/* Gecentreerde CTA-strook ------------------------------------------------- */
.tg-ctastrook{background:var(--tg-aqua);color:#fff}
.tg-ctastrook__inner{max-width:680px;padding-top:70px;padding-bottom:70px;text-align:center}
.tg-ctastrook h2{
  font-size:clamp(25px,3.8vw,36px);line-height:1.12;font-weight:800;color:#fff;margin:0 0 14px;
}
.tg-ctastrook p{font-size:17.5px;line-height:1.6;color:rgba(255,255,255,.92);margin:0 auto;max-width:560px}
/* De regel onder de knoppen, bv. "Of bel me: +32 469 79 03 79". */
.tg-ctastrook__voet{margin:26px auto 0;font-weight:700;font-size:17px}
.tg-ctastrook__voet a{color:#fff;text-decoration:none}
.tg-ctastrook__voet a:hover,.tg-ctastrook__voet a:focus-visible{
  text-decoration:underline;text-underline-offset:4px}

@media(max-width:900px){
  .tg-phero__grid{padding-top:44px;padding-bottom:44px;grid-template-columns:1fr;gap:26px}
  .tg-phero__media{order:-1}
  .tg-checks__grid{grid-template-columns:1fr 1fr}
  .tg-contactblok__grid,
  .tg-steps__grid{grid-template-columns:1fr;gap:28px}
  .tg-steps__grid--rechts .tg-steps__media{order:0}
  .tg-ctastrook__inner{padding-top:52px;padding-bottom:52px}
}
@media(max-width:560px){
  .tg-checks__grid{grid-template-columns:1fr}
}


/* 15e. De pagina Groepsreizen
   Maten en kleuren rechtstreeks uit het ontwerp.
   ========================================================================== */
.tg-grhero{
  position:relative;min-height:clamp(400px,52vw,560px);
  display:flex;align-items:flex-end;background:var(--tg-green-900);overflow:hidden;
}
.tg-grhero__media{position:absolute;inset:0;z-index:0}
.tg-grhero__media img{width:100%;height:100%;object-fit:cover;display:block}
.tg-grhero::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(11,36,34,.16) 0%,rgba(11,36,34,.42) 48%,rgba(11,36,34,.8) 100%);
}
.tg-grhero__inner{position:relative;z-index:2;width:100%;padding-bottom:46px;max-width:1320px}
.tg-grhero__inner > *{max-width:820px}
.tg-grhero .tg-script{font-size:clamp(25px,4vw,30px);color:var(--tg-sun);display:block;margin-bottom:4px}
.tg-grhero h1{
  font-size:clamp(29px,5vw,52px);line-height:1.05;font-weight:800;color:#fff;
  margin:0 0 16px;text-wrap:balance;
}
.tg-grhero__rte{
  font-size:clamp(16.5px,2vw,19px);line-height:1.5;color:rgba(255,255,255,.94);
  margin:0 0 22px;max-width:700px;
}
.tg-grhero__rte p{margin:0 0 10px}
.tg-grhero__rte p:last-child{margin-bottom:0}
.tg-grhero .tg-btnrow{margin:0}

/* De twee keuzekaarten ---------------------------------------------------- */
.tg-grkeuze__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin-top:26px}
.tg-grkeuze__kaart{
  display:flex;flex-direction:column;background:var(--tg-cream);
  border:1px solid rgba(22,51,49,.1);border-top:5px solid var(--tg-aqua);
  border-radius:20px;padding:30px 32px 28px;
}
.tg-grkeuze__kaart--goud{border-top-color:var(--tg-gold)}
.tg-grkeuze__icoon{
  width:66px;height:66px;border-radius:50%;background:var(--tg-aqua);color:#fff;
  display:flex;align-items:center;justify-content:center;margin-bottom:18px;
}
.tg-grkeuze__kaart--goud .tg-grkeuze__icoon{background:var(--tg-gold)}
.tg-grkeuze__icoon svg{width:32px;height:32px;fill:none;stroke:currentColor;stroke-width:1.6}
/* Een geüpload icoon wordt wit gemaakt zodat het in het rondje past. */
.tg-grkeuze__eigen{width:32px;height:32px;object-fit:contain;display:block;
  filter:brightness(0) invert(1)}
.tg-grkeuze__kaart h3{
  font-size:clamp(21px,2.6vw,25px);font-weight:800;color:var(--tg-ink);margin:0 0 10px;
}
.tg-grkeuze__kaart p{font-size:17px;line-height:1.55;color:#5a6b69;margin:0 0 22px;flex:1}
.tg-grkeuze__kaart .tg-btn{align-self:flex-start}

/* De vertrekken ----------------------------------------------------------- */
/* De koppen op deze pagina volgen het ontwerp. Zonder deze regels vallen de
   twee koppen zonder eigen klasse terug op de grote sectiekop van de homepage
   (tot 66px), en dat is hier veel te fors. */
.tg-grvertrek > .tg-wrap > h2{
  font-size:clamp(27px,4vw,40px);line-height:1.1;margin:0 0 12px;
}
.tg-grusp > .tg-wrap > h2,
.tg-grusp--kaarten h2{
  font-size:clamp(24px,3.2vw,30px);line-height:1.1;margin:0 0 12px;
}
.tg-section.tg-grkeuze h2{font-size:clamp(24px,3.4vw,34px)}
.tg-section.tg-grfaq h2{font-size:clamp(25px,3.6vw,36px)}
.tg-grvertrek{background:#F1ECE1}
.tg-grvertrek .tg-lead{margin:0 0 36px;max-width:740px}
.tg-grvertrek__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.tg-grvertrek__voet{font-size:17px;line-height:1.6;color:#5a6b69;max-width:820px;margin:26px 0 0}

.tg-grkaart{
  background:#fff;border:1px solid rgba(22,51,49,.09);border-radius:22px;
  overflow:hidden;display:flex;flex-direction:column;
}
.tg-grkaart__media{display:block;height:190px;background:var(--tg-cream-2)}
.tg-grkaart__media img{width:100%;height:100%;object-fit:cover;display:block}
.tg-grkaart__body{padding:24px 26px 28px;display:flex;flex-direction:column;flex:1}
.tg-grkaart__status{
  align-self:flex-start;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  font-size:11.5px;padding:7px 13px;border-radius:999px;margin-bottom:14px;white-space:nowrap;
}
.tg-grkaart h3{font-size:23px;font-weight:800;color:var(--tg-ink);margin:0 0 3px}
.tg-grkaart h3 a{color:inherit}
.tg-grkaart h3 a:hover{color:var(--tg-teal)}
.tg-grkaart__sub{font-size:16.5px;color:#5a6b69;font-weight:600;margin:0 0 12px}
.tg-grkaart__feiten{
  display:grid;grid-template-columns:104px minmax(0,1fr);gap:7px 10px;
  font-size:16px;color:#48605d;margin:0 0 14px;
  border-top:1px solid rgba(22,51,49,.1);padding-top:14px;
}
.tg-grkaart__feiten dt{color:#9aa6a4;margin:0}
.tg-grkaart__feiten dd{margin:0;font-weight:600}
.tg-grkaart__feiten .tg-grkaart__prijs{font-weight:700;color:var(--tg-green-700)}
.tg-grkaart__tekst{font-size:16px;line-height:1.5;color:#5a6b69;margin:0 0 20px;flex:1}
.tg-grkaart__knop{width:100%;border-radius:12px}

/* De videogetuigenis ------------------------------------------------------ */
.tg-grvideo__grid{
  display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1fr);
  gap:32px;align-items:center;max-width:1100px;
}
.tg-grvideo__speler{
  position:relative;aspect-ratio:9/16;width:100%;max-width:330px;justify-self:center;
  border-radius:20px;overflow:hidden;background:var(--tg-green-800);
}
.tg-grvideo__speler video,
.tg-grvideo__speler img{width:100%;height:100%;object-fit:cover;display:block}
.tg-grvideo .tg-lead{font-size:17.5px;margin:0 0 16px;max-width:520px}
.tg-grvideo__quote{
  margin:0 0 16px;border-left:3px solid var(--tg-aqua);padding:2px 0 2px 18px;
}
.tg-grvideo__quote blockquote{
  margin:0 0 8px;font-size:19px;line-height:1.5;color:#2c4340;
}
.tg-grvideo__quote figcaption{font-size:16.5px;font-weight:700;color:#5a6b69}

/* Klein genoeg om persoonlijk te blijven ---------------------------------- */
.tg-grusp__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px 36px;margin-top:30px}
.tg-grusp__icoon{
  width:54px;height:54px;border-radius:50%;color:#fff;
  display:flex;align-items:center;justify-content:center;margin-bottom:14px;
  background:var(--tg-aqua);
}
.tg-grusp__icoon--goud{background:var(--tg-gold)}
.tg-grusp__icoon--groen{background:var(--tg-green-800)}
.tg-grusp__icoon svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.6}
/* Een geüpload icoon wordt wit gemaakt, zodat het in het rondje past.
   Werkt voor lijntekeningen in één kleur. */
.tg-grusp__eigen{width:28px;height:28px;object-fit:contain;display:block;
  filter:brightness(0) invert(1)}
.tg-grusp__item h3{font-size:21px;font-weight:800;color:var(--tg-ink);margin:0 0 9px}
.tg-grusp__item p{font-size:17px;line-height:1.55;color:#5a6b69;margin:0}

/* Veelgestelde vragen ----------------------------------------------------- */
.tg-grfaq{background:#F1ECE1}
.tg-grfaq__inner{max-width:860px}
.tg-grfaq .tg-script{margin:0 0 26px}
.tg-grfaq__lijst{display:flex;flex-direction:column;gap:12px}
.tg-grfaq__item{
  background:#fff;border:1px solid rgba(22,51,49,.1);border-radius:16px;overflow:hidden;
}
.tg-grfaq--wit .tg-grfaq__item,
.tg-grfaq--wit .tg-grfaq__voet{background:var(--tg-cream)}
.tg-grfaq__item > summary{
  list-style:none;cursor:pointer;padding:18px 22px;min-height:56px;
  display:flex;justify-content:space-between;align-items:center;gap:14px;
  font-size:18px;font-weight:700;color:var(--tg-ink);
}
.tg-grfaq__item > summary::-webkit-details-marker{display:none}
/* Het plus- of minteken in een licht aqua rondje, zoals in het ontwerp. */
.tg-grfaq__teken{
  flex:0 0 auto;width:30px;height:30px;border-radius:50%;
  background:#EAF6F5;color:var(--tg-green-700);
  font-size:19px;font-weight:700;line-height:1;
  display:flex;align-items:center;justify-content:center;
}
.tg-grfaq__teken::before{content:"+"}
.tg-grfaq__item[open] .tg-grfaq__teken::before{content:"\2212"}
.tg-grfaq__antwoord{padding:0 22px 20px}
.tg-grfaq__antwoord p{font-size:17px;line-height:1.6;color:#5a6b69;margin:0}
.tg-grfaq__voet{
  margin-top:24px;background:#fff;border:1px solid rgba(22,51,49,.1);border-radius:16px;
  padding:20px 24px;display:flex;flex-wrap:wrap;gap:14px;
  align-items:center;justify-content:space-between;
}
.tg-grfaq__voet > span{font-size:17.5px;line-height:1.5;color:#48605d;max-width:420px}

/* De wachtlijst ----------------------------------------------------------- */
.tg-grlijst__kaart{
  max-width:820px;margin:0 auto;background:#fff;border:1px solid rgba(22,51,49,.09);
  border-radius:24px;padding:34px 36px;
}
.tg-grlijst__kaart h2{margin-bottom:12px}
.tg-grlijst__kaart > p{font-size:17.5px;line-height:1.6;color:#48605d;margin:0 0 24px}
.tg-grlijst__voet{font-size:14.5px;line-height:1.45;color:#7d8d8b;margin:12px 0 0}

/* De afsluiter ------------------------------------------------------------ */
.tg-grcta{position:relative;padding:72px 0;overflow:hidden;background:var(--tg-green-900)}
.tg-grcta__media{position:absolute;inset:0;z-index:0}
.tg-grcta__media img{width:100%;height:100%;object-fit:cover;display:block}
.tg-grcta::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(11,36,34,.82),rgba(11,36,34,.9));
}
.tg-grcta__inner{position:relative;z-index:2;max-width:820px;text-align:center}
.tg-grcta h2{
  font-size:clamp(27px,4.2vw,42px);line-height:1.08;font-weight:800;color:#fff;margin:0 0 14px;
}
.tg-grcta p{
  font-size:18.5px;line-height:1.55;color:rgba(255,255,255,.9);
  margin:15px auto 26px;max-width:620px;
}
.tg-grcta .tg-btnrow{margin-bottom:0}
.tg-grcta__tel{margin:22px 0 0;font-size:17px}
.tg-grcta__tel a{color:#fff;font-weight:700}

@media(max-width:1100px){
  .tg-grusp__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
  .tg-grkeuze__grid,
  .tg-grvertrek__grid,
  .tg-grusp__grid,
  .tg-grvideo__grid{grid-template-columns:1fr}
  .tg-grkeuze__kaart{padding:24px 22px}
  .tg-grkaart__body{padding:20px 20px 24px}
  .tg-grkaart__feiten{grid-template-columns:1fr;gap:2px 0}
  .tg-grkaart__feiten dd{margin-bottom:6px}
  .tg-grlijst__kaart{padding:26px 22px}
  .tg-grfaq__voet{flex-direction:column;align-items:flex-start}
}


/* 15f. Reisdetail — hero, ankerbalk, dag per dag, prijs en aanvraag
   ========================================================================== */

/* De hero: foto over de volle breedte, titel linksonder in het verloop. */
.tg-rd-hero{position:relative;display:flex;align-items:flex-end;background:var(--tg-green-800);
  min-height:clamp(280px,31vw,380px);overflow:hidden}
.tg-rd-hero--geenfoto{min-height:auto;padding-top:54px}
.tg-rd-hero__media{position:absolute;inset:0;z-index:0}
.tg-rd-hero__media picture,
.tg-rd-hero__media img{width:100%;height:100%;object-fit:cover;display:block}
.tg-rd-hero::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(11,36,34,.1) 0%,rgba(11,36,34,0) 40%,rgba(11,36,34,.78) 100%);
}
.tg-rd-hero--geenfoto::after{display:none}
.tg-rd-hero__inner{position:relative;z-index:2;width:100%;padding-top:0;padding-bottom:26px}
.tg-rd-hero__titel{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;margin:0;
  font-size:clamp(32px,4.2vw,47px);line-height:1.05;font-weight:800;color:#fff;
  text-shadow:0 2px 14px rgba(0,0,0,.45);
}
.tg-rd-hero__sub{font-size:clamp(18px,1.8vw,23px);line-height:1.3;font-weight:500}

/* De ankerbalk: dezelfde als elders, met de knop rechts erbij. */
.tg-rd-nav .tg-wrap{gap:0;padding-top:0;padding-bottom:0;align-items:center}
.tg-rd-nav a{padding:15px 13px;font-size:15.5px;font-weight:600;border-bottom-width:2.5px}

/* Het overzicht ----------------------------------------------------------- */
.tg-rd-ov{background:#fff;border-bottom:1px solid rgba(22,51,49,.09);padding:34px 0 32px}
.tg-rd-ov__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:26px 40px;align-items:stretch}
.tg-rd--groep .tg-rd-ov__grid{grid-template-columns:minmax(0,1fr) minmax(0,340px)}
.tg-rd-ov__tekst{min-width:0;display:flex;flex-direction:column}
.tg-rd-ov__intro{font-size:17px;line-height:1.62;max-width:83ch}
.tg-rd-ov__intro p{margin:0 0 14px}
.tg-rd-ov__route{
  font-size:16.5px;line-height:1.5;font-weight:600;color:var(--tg-green-800);margin:4px 0 18px;
}

/* De rij feiten met icoontjes. */
.tg-rd-feiten{display:flex;flex-wrap:wrap;gap:14px 42px;margin:0 0 18px}
.tg-rd-feit{display:inline-flex;gap:10px;align-items:center;min-width:0}
.tg-rd-feit span{font-size:16.5px;line-height:1.35;font-weight:600;color:var(--tg-ink)}
.tg-rd-feit svg{
  width:20px;height:20px;flex:0 0 20px;fill:none;stroke:var(--tg-aqua);
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
}

/* De hoogtepunten als vinkjes, in kolommen. */
.tg-rd-punten ul{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 34px;
}
.tg-rd--groep .tg-rd-punten ul{grid-template-columns:repeat(2,minmax(0,1fr))}
.tg-rd-punten li{
  position:relative;padding-left:27px;font-size:16.5px;line-height:1.5;color:var(--tg-ink-soft);
}
.tg-rd-punten li::before{
  content:"";position:absolute;left:1px;top:.34em;width:15px;height:9px;
  border:0;border-left:2.4px solid var(--tg-aqua);border-bottom:2.4px solid var(--tg-aqua);
  transform:rotate(-45deg);border-radius:1px;background:none;
}
.tg-rd-punten p{font-size:16.5px;line-height:1.5;color:var(--tg-ink-soft);margin:0 0 10px}
.tg-rd--groep .tg-rd-punten{
  border-top:1px solid rgba(22,51,49,.12);padding-top:16px;margin-top:auto;
}

/* De boekingskaart bij een groepsreis ------------------------------------- */
.tg-rd-boeking{
  align-self:start;background:#F3F8F6;border:1px solid rgba(22,51,49,.12);
  border-radius:20px;padding:20px 24px;
}
.tg-rd-boeking__status{
  display:inline-flex;align-items:center;font-size:12.5px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;padding:5px 12px;border-radius:999px;
  margin-bottom:10px;
}
.tg-rd-boeking__prijs{
  font-size:clamp(24px,3vw,29px);line-height:1.1;font-weight:800;color:var(--tg-green-800);
}
.tg-rd-boeking__bij{font-size:15px;line-height:1.4;color:#6b807e;margin-bottom:4px}
.tg-rd-boeking__rijen{margin:0}
.tg-rd-boeking__rijen > div{
  display:flex;flex-wrap:wrap;gap:2px 12px;justify-content:space-between;
  padding:6px 0;border-top:1px solid rgba(22,51,49,.1);font-size:15.5px;line-height:1.3;
}
.tg-rd-boeking__rijen dt{color:#6b807e;margin:0}
.tg-rd-boeking__rijen dd{font-weight:600;color:var(--tg-ink);margin:0;text-align:right}
.tg-rd-boeking .tg-btn{margin-top:12px;justify-content:center}
.tg-rd-boeking__vraag{
  display:flex;align-items:center;justify-content:center;min-height:32px;margin-top:8px;
  color:var(--tg-green-800);font-weight:700;font-size:16px;
}
.tg-rd-boeking__vraag:hover{color:var(--tg-teal);text-decoration:underline;text-underline-offset:4px}

/* Dag per dag ------------------------------------------------------------- */
.tg-rd-dagen{background:#fff;padding:40px 0 46px}
.tg-rd-dagen h2,.tg-rd-logies h2,.tg-rd-prijs h2,.tg-rd-vluchten h2,
.tg-rd-begeleiding h2,.tg-rd-sfeer h2,.tg-rd-meer h2{
  font-size:clamp(24px,3.4vw,32px);line-height:1.12;font-weight:800;color:var(--tg-ink);margin:0 0 22px;
}
.tg-rd-dagen__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;align-items:start}
.tg-rd-dagen__grid--geenkaart{grid-template-columns:minmax(0,1fr)}
.tg-rd-dagen__lijst{min-width:0;display:flex;flex-direction:column;gap:10px}

.tg-rd-dag{
  border:1px solid rgba(22,51,49,.12);border-radius:18px;overflow:hidden;background:#fff;
}
.tg-rd-dag > summary{
  display:grid;grid-template-columns:minmax(0,190px) minmax(0,1fr);
  align-items:stretch;cursor:pointer;list-style:none;
}
.tg-rd-dag > summary::-webkit-details-marker{display:none}
.tg-rd-dag--geenfoto > summary{grid-template-columns:minmax(0,1fr)}
/* Zonder dagfoto komt het dagnummer als aqua pilletje voor de titel. */
.tg-rd-dag__nr{
  flex:0 0 auto;align-self:center;background:var(--tg-aqua);color:#fff;
  font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:6px 11px;border-radius:8px;
}
.tg-rd-dag[open] > summary{background:#F3F8F6}
.tg-rd-dag__media{position:relative;display:block;width:100%;height:100%;min-height:96px;
  overflow:hidden;background:#EAF6F5}
.tg-rd-dag__media img{width:100%;height:100%;object-fit:cover;display:block}
.tg-rd-dag__no{
  position:absolute;top:12px;left:12px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;min-width:52px;padding:7px 10px;
  border-radius:8px;background:var(--tg-aqua);color:#fff;line-height:1.05;
}
.tg-rd-dag__no small{font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.tg-rd-dag__no em{font-style:normal;font-size:21px;font-weight:800}
.tg-rd-dag__kop{display:flex;gap:12px;align-items:center;padding:16px 18px;min-width:0}
.tg-rd-dag__kop h3{
  flex:1;min-width:0;font-size:18.5px;font-weight:800;color:var(--tg-ink);line-height:1.3;margin:0;
}
.tg-rd-dag__teken{
  flex:0 0 auto;width:34px;height:34px;border-radius:50%;background:#EAF6F5;
  color:var(--tg-green-800);position:relative;
}
.tg-rd-dag__teken::before,.tg-rd-dag__teken::after{
  content:"";position:absolute;left:50%;top:50%;background:currentColor;border-radius:2px;
  transform:translate(-50%,-50%);
}
.tg-rd-dag__teken::before{width:14px;height:2.4px}
.tg-rd-dag__teken::after{width:2.4px;height:14px}
.tg-rd-dag[open] .tg-rd-dag__teken::after{display:none}
.tg-rd-dag__tekst{padding:0 18px 18px}
.tg-rd-dag__tekst p{font-size:17px;line-height:1.65;color:var(--tg-ink-soft);margin:0 0 12px}
.tg-rd-dag__tekst > *:last-child{margin-bottom:0}

.tg-rd-dagen__voet{font-size:15.5px;line-height:1.55;color:var(--tg-green-800);margin:8px 0 0}

/* Het persoonlijke woordje van Liesbet. */
.tg-rd-liesbet{
  background:#F3F8F6;border-left:3px solid var(--tg-aqua);border-radius:14px;
  padding:18px 20px;margin:12px 0 0;display:grid;grid-template-columns:64px minmax(0,1fr);
  gap:14px;align-items:start;
}
.tg-rd-liesbet--geenfoto{grid-template-columns:minmax(0,1fr)}
.tg-rd-liesbet__foto{width:64px;height:64px;border-radius:50%;overflow:hidden;background:#EAF6F5}
.tg-rd-liesbet__foto img{width:100%;height:100%;object-fit:cover;display:block}
.tg-rd-liesbet__tekst{min-width:0}
.tg-rd-liesbet__tekst p{font-size:16.5px;line-height:1.6;color:#2c4442;margin:0 0 8px}
.tg-rd-liesbet__tel{
  display:inline-flex;align-items:center;min-height:44px;
  font-size:16.5px;font-weight:700;color:var(--tg-green-800);
}
.tg-rd-liesbet__tel:hover{color:var(--tg-teal);text-decoration:underline;text-underline-offset:4px}

.tg-rd-kaart{min-width:0;position:sticky;top:calc(var(--tg-header-h) + 78px)}
/*
 * Google My Maps zet bovenaan een zwarte balk met de kaartnaam. Die kunnen we
 * niet uitzetten — het is een iframe van Google — dus schuiven we hem uit
 * beeld: de iframe staat 58px hoger dan het kader en is even veel hoger, en
 * het kader snijdt de rest weg. Zo blijft de kaart zelf volledig zichtbaar
 * zonder die balk.
 */
.tg-rd-kaart .tg-map__frame{
  height:min(70vh,620px);border-radius:18px;overflow:hidden;border:1px solid rgba(22,51,49,.12);
  position:relative;
}
.tg-rd-kaart .tg-map__frame iframe{
  position:absolute;inset:0;width:100%;height:100%;border:0;display:block;
}
.tg-rd-kaart .tg-map__frame--balk iframe{
  top:-58px;height:calc(100% + 58px);
}

/* Waar je slaapt ---------------------------------------------------------- */
.tg-rd-logies{background:#F3F8F6;padding:44px 0}
.tg-rd-logies__grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:34px;align-items:center;
}
.tg-rd-logies__grid--geenfoto{grid-template-columns:minmax(0,1fr);max-width:900px}
.tg-rd-logies__tekst{min-width:0}
.tg-rd-logies__tekst .tg-rte{font-size:17.5px;line-height:1.6;max-width:none}
.tg-rd-logies__tekst .tg-rte p{margin:0 0 12px}
.tg-rd-logies__punten{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-direction:column;gap:11px}
.tg-rd-logies__punten li{
  display:flex;gap:10px;align-items:flex-start;font-size:16.5px;line-height:1.5;color:#2c4442;
}
.tg-rd-logies__punten svg{
  width:20px;height:20px;flex:0 0 20px;margin-top:2px;fill:none;stroke:var(--tg-aqua);
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
}
.tg-rd-logies__fotos{min-width:0}
.tg-rd-logies__raster{
  display:grid;grid-template-columns:repeat(var(--tg-logies-n,3),minmax(0,1fr));gap:3px;
}
.tg-rd-logies__raster figure{margin:0;overflow:hidden;background:#EAF6F5;aspect-ratio:3/4}
.tg-rd-logies__raster img{width:100%;height:100%;object-fit:cover;display:block}
.tg-rd-logies__bij{font-size:14.5px;line-height:1.45;color:#6b807e;margin:9px 0 0}
.tg-rd-logies .tg-logieslijst{margin-top:30px}
/* De losse logiesbeschrijvingen (het oude veld) onder de foto's. */
.tg-logieslijst{display:flex;flex-direction:column;gap:26px}
.tg-logiesitem{
  display:grid;grid-template-columns:minmax(0,.28fr) minmax(0,1fr);
  gap:28px;align-items:center;
}
.tg-logiesitem--geenfoto{grid-template-columns:minmax(0,1fr)}
.tg-logiesitem img{width:100%;height:auto;border-radius:var(--tg-radius-card);display:block}

/* Prijs ------------------------------------------------------------------- */
.tg-rd-smal{max-width:1000px}
.tg-rd-prijs{background:#fff;padding:44px 0}
.tg-rd-prijs h2{margin-bottom:14px}
.tg-rd-prijs__regel{
  font-size:clamp(26px,3.8vw,36px);line-height:1.1;font-weight:800;
  color:var(--tg-green-800);margin:0 0 8px;
}
.tg-rd-prijs__onder{font-size:16.5px;line-height:1.55;color:#6b807e;margin:0 0 26px}
.tg-rd-prijs__kolommen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 40px}
.tg-rd-prijs__kolommen h3{font-size:19px;font-weight:700;color:var(--tg-ink);margin:0 0 12px}
/* De twee lijsten staan in wysiwyg-tekst, dus we overschrijven de opsomming
   van .tg-rte helemaal: een aqua vinkje links, een grijs kruisje rechts. */
.tg-rd-incl .tg-rte ul,.tg-rd-excl .tg-rte ul{
  list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px;
}
.tg-rd-incl .tg-rte ul li,.tg-rd-excl .tg-rte ul li{
  position:relative;padding-left:27px;font-size:16.5px;line-height:1.5;
}
.tg-rd-incl .tg-rte ul li{color:var(--tg-ink-soft)}
.tg-rd-excl .tg-rte ul li{color:#6b807e}
.tg-rd-incl .tg-rte ul li::before{
  content:"";position:absolute;left:1px;top:.34em;width:15px;height:9px;
  border:0;border-left:2.4px solid var(--tg-aqua);border-bottom:2.4px solid var(--tg-aqua);
  transform:rotate(-45deg);border-radius:1px;background:none;
}
.tg-rd-incl .tg-rte ul li::after{content:none}
.tg-rd-excl .tg-rte ul li::before,
.tg-rd-excl .tg-rte ul li::after{
  content:"";position:absolute;left:3px;top:.62em;width:14px;height:2.2px;
  border:0;background:#9aa6a4;border-radius:2px;
}
.tg-rd-excl .tg-rte ul li::before{transform:rotate(45deg)}
.tg-rd-excl .tg-rte ul li::after{transform:rotate(-45deg)}
.tg-rd-kader{background:#F3F8F6;border-radius:16px;padding:22px 24px;margin-top:26px}
.tg-rd-kader h3{font-size:19px;font-weight:700;color:var(--tg-ink);margin:0 0 10px}
.tg-rd-kader .tg-rte{font-size:16.5px;line-height:1.6;max-width:none}
.tg-rd-kader .tg-rte p:last-child{margin-bottom:0}

/* Vluchten ---------------------------------------------------------------- */
.tg-rd-vluchten{background:#F3F8F6;padding:44px 0}
.tg-rd-vluchten h2{margin-bottom:12px}
.tg-rd-badge{
  display:inline-flex;align-items:center;gap:9px;background:#BFEDEA;color:#00544F;
  font-size:16px;font-weight:700;padding:9px 16px;border-radius:999px;margin-bottom:20px;
}
.tg-rd-badge svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}
.tg-rd-vluchten__tekst{font-size:17px;line-height:1.6;color:var(--tg-ink-soft);margin:0 0 22px}
.tg-rd-vluchten__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.tg-rd-vlucht{background:#fff;border:1px solid rgba(22,51,49,.12);border-radius:18px;padding:20px 22px}
.tg-rd-vlucht__kop{
  display:flex;align-items:center;gap:9px;font-size:13px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--tg-gold);margin-bottom:12px;
}
.tg-rd-vlucht__kop svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.tg-rd-vlucht__kop--terug svg{transform:scaleX(-1)}
.tg-rd-vlucht__route{font-size:17px;font-weight:700;color:var(--tg-ink);margin-bottom:4px}
.tg-rd-vlucht__regels{font-size:16px;line-height:1.55;color:var(--tg-ink-soft);margin:0}
.tg-rd-vluchten__voet{font-size:15.5px;line-height:1.55;color:#6b807e;margin:18px 0 0}

/* Wie begeleidt deze reis ------------------------------------------------- */
.tg-rd-begeleiding{background:#fff;padding:44px 0}
.tg-rd-begeleiding h2{margin-bottom:18px}
.tg-rd-begeleiding__grid{display:grid;grid-template-columns:minmax(0,240px) minmax(0,1fr);gap:26px;align-items:start}
.tg-rd-begeleiding__grid--geenfoto{grid-template-columns:minmax(0,1fr)}
.tg-rd-begeleiding__foto{width:100%;max-width:240px;border-radius:18px;overflow:hidden;aspect-ratio:3/4}
.tg-rd-begeleiding__foto img{width:100%;height:100%;object-fit:cover;display:block}
.tg-rd-begeleiding__tekst{min-width:0}
.tg-rd-begeleiding__naam{font-size:21px;font-weight:800;color:var(--tg-ink)}
.tg-rd-begeleiding__rol{font-size:16.5px;color:var(--tg-teal);font-weight:600;margin-bottom:12px}
.tg-rd-begeleiding__tekst .tg-rte{font-size:17px;line-height:1.62;max-width:none}

/* Veelgestelde vragen op een reis ---------------------------------------- */
.tg-rd-faq{background:#F1ECE1}

/* Sfeerbeelden ------------------------------------------------------------ */
.tg-rd-sfeer{background:#FAF6EF;padding:44px 0}
.tg-rd-sfeer h2{margin-bottom:18px}
/* Het mozaïek: twaalf kolommen, afwisselend rijen van vier en van drie. */
.tg-fotoraster{display:grid;grid-template-columns:repeat(12,1fr);gap:3px}
.tg-fotoraster figure{margin:0;overflow:hidden;background:#EAF6F5}
.tg-fotoraster img{
  width:100%;height:100%;min-height:200px;object-fit:cover;display:block;
  transition:transform .45s ease;
}
.tg-fotoraster figure:hover img{transform:scale(1.03)}

/* De verwijzing naar de praktische pagina --------------------------------- */
.tg-rd-praktisch{background:#fff;border-top:1px solid rgba(22,51,49,.08);padding:26px 0}
.tg-rd-praktisch p{font-size:17.5px;line-height:1.6;color:var(--tg-ink-soft);margin:0 0 8px}

/* Meer reizen ------------------------------------------------------------- */
.tg-rd-meer{background:#F3F8F6;padding:44px 0}
.tg-rd-meer h2{font-size:clamp(23px,3.2vw,30px);margin-bottom:20px}

/* Het aanvraagblok -------------------------------------------------------- */
.tg-rd-aanvraag{background:#0B2422;padding:48px 0}
.tg-rd-aanvraag__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:38px;align-items:start}
.tg-rd-aanvraag__copy{min-width:0;color:#fff}
.tg-rd-aanvraag__copy h2{
  font-size:clamp(25px,3.6vw,34px);line-height:1.1;font-weight:800;margin:0 0 14px;color:#fff;
}
.tg-rd-aanvraag__intro{font-size:17.5px;line-height:1.6;color:rgba(255,255,255,.9);margin:0 0 22px;max-width:480px}
.tg-rd-aanvraag__tel{
  display:block;font-size:clamp(24px,3vw,30px);font-weight:800;color:#fff;margin-bottom:10px;
}
.tg-rd-aanvraag__mail{
  display:inline-flex;align-items:center;min-height:44px;font-size:17.5px;font-weight:700;color:var(--tg-sun);
}
.tg-rd-aanvraag__wa{margin:14px 0 0}
.tg-rd-aanvraag__note{
  font-size:15.5px;line-height:1.55;color:rgba(255,255,255,.78);margin:20px 0 0;max-width:440px;
}
.tg-rd-aanvraag__form{min-width:0;background:#fff;border-radius:22px;padding:26px 28px}

@media(max-width:1024px){
  .tg-rd--groep .tg-rd-ov__grid{grid-template-columns:minmax(0,1fr)}
  .tg-rd--groep .tg-rd-punten{margin-top:0}
  .tg-rd-dagen__grid{grid-template-columns:1fr}
  .tg-rd-kaart{position:static}
  .tg-rd-kaart .tg-map__frame{height:380px}
  .tg-rd-punten ul,.tg-rd--groep .tg-rd-punten ul{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:900px){
  .tg-rd-logies__grid{grid-template-columns:1fr;gap:24px}
  .tg-rd-aanvraag__grid{grid-template-columns:1fr;gap:26px}
  .tg-rd-begeleiding__grid{grid-template-columns:1fr}
  .tg-rd-vluchten__grid{grid-template-columns:1fr}
  .tg-rd-prijs__kolommen{grid-template-columns:1fr}
}
@media(max-width:900px){
  .tg-logiesitem{grid-template-columns:1fr;gap:16px}
}
@media(max-width:980px){
  .tg-fotoraster figure{grid-column:span 6!important}
}
@media(max-width:700px){
  .tg-fotoraster figure{grid-column:span 12!important}
  .tg-rd-punten ul,.tg-rd--groep .tg-rd-punten ul{grid-template-columns:1fr}
  .tg-rd-feiten{gap:10px 24px}
  .tg-rd-dag > summary{grid-template-columns:minmax(0,110px) minmax(0,1fr)}
  .tg-rd-dag__kop{padding:12px 14px}
  .tg-rd-dag__kop h3{font-size:17px}
  .tg-rd-hero__inner{padding-bottom:18px}
  .tg-rd-aanvraag__form{padding:20px 18px}
}

/* 15g. Blokken van de pagina Over Liesbet
   ========================================================================== */
.tg-eyebrow--goud{color:var(--tg-gold)}

/* Tekst met een video ernaast -------------------------------------------- */
.tg-tekstvideo__titel{
  font-size:clamp(25px,3.8vw,38px);line-height:1.1;font-weight:800;
  color:var(--tg-ink);margin:0 0 26px;max-width:720px;
}
/* Ook een kop zonder eigen klasse in dit blok blijft op maat. */
.tg-tekstvideo h2{font-size:clamp(25px,3.8vw,38px)}
/* De tekst begint onder de titel, niet halverwege: een staande video is bijna
   altijd hoger dan het verhaal ernaast, en gecentreerd zou dat een groot gat
   onder de titel geven. */
.tg-tekstvideo__grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.5fr);
  gap:48px;align-items:start;
}
.tg-tekstvideo__grid--geenvideo{grid-template-columns:minmax(0,1fr)}
.tg-tekstvideo__rte{max-width:620px;margin-bottom:22px}
.tg-tekstvideo__rte p{font-size:18px;line-height:1.65}
.tg-tekstvideo__bij{font-size:17px;line-height:1.6;color:#5a6b69;margin:0;max-width:560px}
.tg-tekstvideo__binnenkort{font-size:16px;color:#7d8d8b;margin:12px 0 0}
.tg-tekstvideo__speler{
  position:relative;aspect-ratio:9/16;width:100%;max-width:320px;justify-self:center;
  border-radius:20px;overflow:hidden;background:var(--tg-green-800);
}
.tg-tekstvideo__speler video,
.tg-tekstvideo__speler img{width:100%;height:100%;object-fit:cover;display:block}

/* Foto naast een verhaal -------------------------------------------------- */
.tg-verhaal__grid{
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:44px;align-items:center;
}
.tg-verhaal--geenfoto .tg-verhaal__grid{grid-template-columns:minmax(0,1fr)}
/* Zonder foto is de tekst de hele breedte; die beperken we tot een prettige
   leesregel, gecentreerd, zoals in het ontwerp van de praktische pagina. */
.tg-verhaal--geenfoto .tg-verhaal__tekst{max-width:780px;margin-left:auto;margin-right:auto}
.tg-verhaal--rechts .tg-verhaal__media{order:2}
.tg-verhaal--links .tg-verhaal__tekst,
.tg-verhaal--rechts .tg-verhaal__tekst{min-width:0}
.tg-verhaal__media img{
  width:100%;height:100%;object-fit:cover;display:block;border-radius:22px;
}
.tg-verhaal:not(.tg-verhaal--vol) .tg-verhaal__grid{
  padding-top:72px;padding-bottom:72px;
}
/* vaste vorm voor de foto, als die in het blok gekozen is */
.tg-verhaal__media--staand{aspect-ratio:4/5}
.tg-verhaal__media--liggend{aspect-ratio:3/2}
.tg-verhaal__media--vierkant{aspect-ratio:1/1}
/* Portret: een smalle staande foto, gecentreerd in zijn kolom. De tekst krijgt
   dan de bredere helft. */
.tg-verhaal__media--portret{
  aspect-ratio:3/4;width:100%;max-width:var(--tg-portret,340px);
  margin-left:auto;margin-right:auto;
}
.tg-verhaal--portret .tg-verhaal__grid{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}
.tg-verhaal--portret.tg-verhaal--links .tg-verhaal__grid{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr)}
/* Foto tot aan de rand: het raster loopt door tot de schermrand en de tekst
   houdt zelf de marge van de pagina aan. */
.tg-verhaal--vol .tg-verhaal__grid{gap:0;align-items:stretch}
/* De foto vult de halve strook helemaal, hoe hoog of breed het beeld zelf ook
   is: het kader wordt uitgerekt en de foto ligt er absoluut in. Zonder dat
   bepaalt de verhouding van de foto de kolom en blijft er kleur naast staan. */
.tg-verhaal--vol .tg-verhaal__media{
  position:relative;min-height:340px;align-self:stretch;overflow:hidden;
}
.tg-verhaal--vol .tg-verhaal__media img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:0;
}
.tg-verhaal--vol .tg-verhaal__tekst{
  padding:72px max(20px,calc((100vw - var(--tg-wrap)) / 2 + 20px)) 72px 48px;
}
.tg-verhaal--vol.tg-verhaal--rechts .tg-verhaal__tekst{
  padding:72px 48px 72px max(20px,calc((100vw - var(--tg-wrap)) / 2 + 20px));
}
.tg-verhaal__tekst h2{
  font-size:clamp(24px,3.3vw,33px);line-height:1.1;font-weight:800;
  color:var(--tg-ink);margin:6px 0 18px;
}
.tg-verhaal__tekst .tg-script{display:block;margin:0}
.tg-verhaal__tekst .tg-badge{margin-bottom:16px}
.tg-verhaal__tekst .tg-rte p{font-size:18px;line-height:1.65}
.tg-verhaal__kader{
  background:#F3F8F6;border:1px solid rgba(22,51,49,.1);border-radius:16px;
  padding:20px 22px;margin-top:22px;max-width:620px;
}
.tg-verhaal__kader p{font-size:16px;line-height:1.6;margin:0}
.tg-verhaal__tekst .tg-btnrow{margin-top:24px}

@media(max-width:900px){
  .tg-tekstvideo__grid{grid-template-columns:1fr;gap:28px}
  .tg-verhaal__grid{grid-template-columns:1fr;gap:0}
  .tg-verhaal--rechts .tg-verhaal__media{order:0}
  .tg-verhaal--vol .tg-verhaal__tekst,
  .tg-verhaal--vol.tg-verhaal--rechts .tg-verhaal__tekst{padding:34px 20px 40px}
  .tg-verhaal:not(.tg-verhaal--vol) .tg-verhaal__grid{padding-top:44px;padding-bottom:44px}
  .tg-verhaal:not(.tg-verhaal--vol) .tg-verhaal__media{margin-bottom:24px}
  /* Op één kolom krijgt de volle foto een vaste hoogte in plaats van de
     hoogte van de tekst ernaast. */
  .tg-verhaal--vol .tg-verhaal__media{min-height:0;aspect-ratio:3/2}
  .tg-verhaal--kaart{padding:28px 0}
}


/* 15h. Blokken van de pagina Reizen op maat
   ========================================================================== */
/* Hero met een foto op de achtergrond — leunt op .tg-grhero, maar staat in
   het ontwerp iets hoger en met een grotere titel. */
.tg-fotohero{min-height:clamp(360px,45vw,520px)}
.tg-fotohero h1{font-size:clamp(30px,4.4vw,46px);line-height:1.05}
.tg-fotohero .tg-grhero__inner > *{max-width:800px}
.tg-fotohero .tg-grhero__rte{font-size:clamp(17px,2vw,20px);line-height:1.55;max-width:660px;margin-bottom:24px}
.tg-fotohero .tg-grhero__inner > .tg-btnrow{margin-bottom:0}
.tg-fotohero__note{
  font-size:15px;line-height:1.45;color:rgba(255,255,255,.85);
  margin:10px 0 0;max-width:440px;
}

/* Kolommen met een icoon: kaartvorm en eigen tekening -------------------- */
.tg-grusp--kaarten .tg-grusp__item{
  background:var(--tg-cream);border:1px solid rgba(22,51,49,.09);
  border-radius:20px;padding:26px 28px;
}
.tg-grusp--kaarten .tg-grusp__grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.tg-grusp__tekening{height:44px;width:auto;max-width:100%;display:block;margin-bottom:14px}
/* de lijntekeningen van reisgezelschappen uit het ontwerp */
.tg-grusp__figuren{display:block;margin-bottom:14px}
.tg-grusp__figuren svg{max-width:100%;height:auto}

/* Genummerde kaarten, lichte variant ------------------------------------- */
.tg-pilkicker{
  display:inline-block;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  font-size:13px;color:var(--tg-teal);background:#DFF3F1;
  padding:6px 14px;border-radius:999px;margin-bottom:16px;
}
.tg-pilkicker--goud{background:#FFD76A;color:#00544F}
.tg-helpblok--licht{background:none}
.tg-helpblok--licht .tg-helpblok__intro{
  max-width:660px;margin:0 0 28px;text-align:left;
}
.tg-helpblok--licht .tg-helpblok__rte{margin:0;max-width:none}
.tg-helpblok--licht .tg-helpblok__rte p{margin:0 0 14px}
.tg-helpblok--licht .tg-helpblok__rte p:last-child{margin-bottom:0}
.tg-helpblok--licht .tg-helpblok__cards{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;
  list-style:none;padding:0;margin:0;counter-reset:tg-stap;
}
.tg-helpblok--licht .tg-helpblok__cards li{
  background:#fff;border:1px solid rgba(22,51,49,.08);border-radius:20px;
  padding:26px 28px;display:block;text-align:left;
}
.tg-helpblok--licht .tg-helpblok__cards{
  margin-top:0;max-width:none;grid-template-columns:repeat(3,minmax(0,1fr));
}
@media(max-width:1000px){
  .tg-helpblok--licht .tg-helpblok__cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:640px){
  .tg-helpblok--licht .tg-helpblok__cards{grid-template-columns:1fr}
}
.tg-helpblok--licht .tg-helpblok__num{
  display:block;font-family:var(--tg-font-script);font-size:42px;line-height:1;
  margin-bottom:10px;background:none;width:auto;height:auto;color:var(--tg-aqua);
}
/* de eerste helft aqua, de tweede helft oker — zoals in het ontwerp */
.tg-helpblok--licht .tg-helpblok__cards li:nth-child(n+4) .tg-helpblok__num{color:var(--tg-gold)}
.tg-helpblok--licht .tg-helpblok__title{
  display:block;font-size:20px;font-weight:700;color:var(--tg-ink);margin:0 0 8px;
}
.tg-helpblok--licht .tg-helpblok__text{
  display:block;font-size:17px;line-height:1.55;color:#5a6b69;
}
.tg-helpblok--licht h2,.tg-helpblok--licht h3{color:var(--tg-ink)}
.tg-helpblok--licht .tg-helpblok__rte{color:var(--tg-ink-soft)}

/* Kader met de titel erin ------------------------------------------------- */
.tg-callout--kaart{
  background:#fff;border:1px solid rgba(22,51,49,.1);border-radius:22px;
  padding:32px 34px;border-left-width:1px;
}
.tg-callout--kaart h2{margin:0 0 14px;color:var(--tg-ink)}
.tg-callout--kaart .tg-rte p{font-size:18px;line-height:1.65}

/* De foto in "In de kijker · eigen gezelschap" -----------------------------
   Die foto loopt tot tegen de boven- en onderrand van de strook, met rechte
   hoeken — ook wanneer in het blok zelf "Foto tot aan de rand van het scherm"
   niet is aangevinkt. Het ankerpunt van het blok is het aanknopingspunt. */
#eigen-groep + .tg-verhaal .tg-verhaal__grid{
  padding-top:0;padding-bottom:0;align-items:stretch;
}
#eigen-groep + .tg-verhaal .tg-verhaal__media{
  position:relative;overflow:hidden;align-self:stretch;min-height:340px;margin:0;
}
#eigen-groep + .tg-verhaal .tg-verhaal__media img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:0;
}
#eigen-groep + .tg-verhaal .tg-verhaal__tekst{padding-top:72px;padding-bottom:72px}
@media(max-width:900px){
  #eigen-groep + .tg-verhaal .tg-verhaal__media{min-height:0;aspect-ratio:3/2}
  #eigen-groep + .tg-verhaal .tg-verhaal__tekst{padding-top:34px;padding-bottom:40px}
}

/* Kolommen met een streepje erboven, en knoppen in een kader --------------- */
.tg-grusp--streep > .tg-wrap > h2{font-size:clamp(25px,3.8vw,36px);line-height:1.12;margin:0 0 16px}
.tg-grusp--streep .tg-grusp__grid{
  grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;margin-top:26px;
}
.tg-grusp--streep .tg-grusp__item{align-items:stretch}
.tg-grusp--streep .tg-grusp__item h3{
  padding-top:14px;border-top:3px solid var(--tg-aqua);
  font-size:19.5px;font-weight:800;color:var(--tg-green-700);margin:0 0 8px;
}
.tg-grusp--streep .tg-grusp__item p{font-size:16.5px;line-height:1.6;color:var(--tg-ink-soft);margin:0}
.tg-callout__knoppen{margin:22px 0 0}
@media(max-width:900px){
  .tg-grusp--streep .tg-grusp__grid{grid-template-columns:1fr}
}

/* Aanvraagblok op een sfeerfoto ------------------------------------------ */
/* Zonder foto blijft de strook gewoon donkergroen, zoals in het ontwerp
   van de praktische pagina. */
.tg-contactfoto{position:relative;overflow:hidden;color:#fff;background:#0B2422}
.tg-contactfoto__media{position:absolute;inset:0}
.tg-contactfoto__media img{width:100%;height:100%;object-fit:cover;display:block}
.tg-contactfoto__waas{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(11,36,34,.82),rgba(11,36,34,.94));
}
.tg-contactfoto__grid{
  position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:28px;align-items:start;
}
.tg-contactfoto__tekst h2{
  font-size:clamp(28px,4.4vw,44px);line-height:1.08;font-weight:800;color:#fff;margin:0 0 14px;
}
.tg-contactfoto__lead{
  font-size:18.5px;line-height:1.55;color:rgba(255,255,255,.9);margin:0 0 24px;max-width:470px;
}
.tg-contactfoto__tel{
  display:inline-block;color:#fff;font-weight:800;font-size:26px;text-decoration:none;
}
.tg-contactfoto__mail{
  display:block;color:rgba(255,255,255,.9);font-size:18px;font-weight:600;
  margin-top:4px;text-decoration:none;
}
.tg-contactfoto .tg-btnrow{margin-top:18px}
.tg-contactfoto__note{
  font-size:16px;line-height:1.5;color:rgba(255,255,255,.8);margin:20px 0 0;max-width:440px;
}
.tg-contactfoto__kaart{
  background:#fff;border-radius:22px;padding:28px 30px;color:var(--tg-ink);
}
.tg-contactfoto__kaart .tg-formnote{margin:14px 0 0}
/* Formulieren met de klasse tg-gform--breedeknop krijgen een knop over de
   volle breedte, zoals het aanvraagformulier in het ontwerp. */
.tg-gform--breedeknop .gform_footer input[type=submit],
.tg-gform--breedeknop .gform_footer button,
.tg-gform--breedeknop .gform_button{width:100%}
@media(max-width:900px){
  .tg-contactfoto__grid{grid-template-columns:1fr;gap:26px}
  .tg-contactfoto__kaart{padding:24px 20px}
}

/* Foto met een lijst ernaast --------------------------------------------- */
.tg-lijstblok__grid{
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:32px;align-items:center;
}
.tg-lijstblok__grid--geenfoto{grid-template-columns:minmax(0,1fr)}
.tg-lijstblok__zij{display:flex;flex-direction:column;align-items:center;text-align:center}
.tg-lijstblok__media{
  width:320px;max-width:100%;aspect-ratio:1;overflow:hidden;background:#fff;
  display:flex;align-items:center;justify-content:center;border-radius:22px;
}
.tg-lijstblok__media--rond{border-radius:50%}
.tg-lijstblok__media img{width:100%;height:100%;object-fit:cover;display:block}
.tg-lijstblok__media--rond img{width:104%;height:104%;object-fit:contain}
.tg-lijstblok__bij{
  margin:22px 0 0;max-width:330px;font-size:16.5px;line-height:1.6;color:#5a6b69;
}
.tg-lijstblok__tekst h2{
  font-size:clamp(27px,4vw,42px);line-height:1.08;font-weight:800;
  color:var(--tg-ink);margin:0 0 22px;
}
.tg-lijstblok__lijst{list-style:none;padding:0;margin:0}
.tg-lijstblok__lijst li{
  display:flex;gap:18px;padding:20px 0;border-top:1px solid rgba(22,51,49,.12);
}
.tg-lijstblok__bol{
  flex:none;width:14px;height:14px;border-radius:50%;margin-top:7px;background:var(--tg-aqua);
}
.tg-lijstblok__bol--goud{background:var(--tg-gold)}
.tg-lijstblok__bol--groen{background:var(--tg-green-800)}
.tg-lijstblok__bol--teal{background:var(--tg-teal)}
.tg-lijstblok__lijst h3{font-size:20px;font-weight:700;margin:0 0 7px;color:var(--tg-ink)}
/* Zonder foto ernaast: witte kaartjes naast elkaar, met het bolletje
   voor de titel in plaats van scheidingslijntjes. */
.tg-lijstblok__lijst--kaarten{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin-top:26px;
}
.tg-lijstblok__lijst--kaarten li{
  display:block;border:0;padding:26px 28px;background:#fff;border-radius:18px;
}
.tg-lijstblok__lijst--kaarten h3{display:flex;align-items:center;gap:12px;margin:0 0 10px}
.tg-lijstblok__lijst--kaarten .tg-lijstblok__bol{margin-top:0;width:12px;height:12px}
@media(max-width:760px){
  .tg-lijstblok__lijst--kaarten{grid-template-columns:1fr;gap:16px}
  .tg-lijstblok__lijst--kaarten li{padding:22px}
}
.tg-lijstblok__lijst p{font-size:17px;line-height:1.6;color:#5a6b69;margin:0}

/* Verhaalblok: het grote getal, de kaartvorm en de donkere variant -------- */
.tg-verhaal__knoptekst{margin:22px 0 -4px;font-size:17px;line-height:1.65}
.tg-verhaal--donker .tg-verhaal__knoptekst{color:rgba(255,255,255,.9)}
.tg-verhaal__stat{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:24px 0 26px;
}
.tg-verhaal__cijfer{
  background:var(--tg-cream-2);border:1px solid var(--tg-line);border-radius:16px;padding:16px 22px;
}
.tg-verhaal__cijfer strong{display:block;font-size:30px;font-weight:800;line-height:1}
.tg-verhaal__cijfer span{display:block;font-size:15px;color:var(--tg-ink-muted);margin-top:4px}
.tg-verhaal__stat p{
  flex:1;min-width:240px;font-size:17px;line-height:1.55;color:var(--tg-ink-soft);margin:0;
}

/* De kaartvorm heeft zelf ruimte boven en onder nodig: de kaart mag niet
   tegen de achtergrond van de vorige en de volgende sectie plakken. */
.tg-verhaal--kaart{padding:46px 0}
.tg-verhaal--kaart .tg-verhaal__grid{
  border-radius:22px;padding:36px 34px;gap:28px;align-items:center;
  grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
}
.tg-verhaal--kaart .tg-verhaal__tekst{padding:0}

/*
 * Een kaartje zonder foto is een korte notitie tussen twee onderwerpen door,
 * geen volwaardige strook: smaller, minder hoog en met een kleinere titel.
 * Zo staat "Voor wie voor de dieren komt" op de praktische pagina.
 */
.tg-verhaal--kaart.tg-verhaal--geenfoto{padding:26px 0}
.tg-verhaal--kaart.tg-verhaal--geenfoto .tg-verhaal__grid{
  /* Eén kolom: zonder foto blijft er anders een lege tweede kolom staan en
     loopt de tekst maar over de helft van het kaartje. Deze regel moet hier
     staan (en niet alleen bij .tg-verhaal--geenfoto), want de tweekoloms-
     regel van .tg-verhaal--kaart komt later in dit bestand. */
  grid-template-columns:minmax(0,1fr);
  /* De padding van .tg-wrap zou binnen het kaartje vallen; hier bepaalt het
     kaartje zelf zijn binnenruimte, en houdt de breedte 20px lucht aan
     weerszijden over op een smal scherm. */
  max-width:780px;width:calc(100% - 40px);
  border-radius:18px;padding:24px 26px;
}
.tg-verhaal--kaart.tg-verhaal--geenfoto .tg-verhaal__tekst{
  max-width:none;margin-left:0;margin-right:0;
}
.tg-verhaal--kaart.tg-verhaal--geenfoto .tg-verhaal__tekst h2{
  font-size:19.5px;line-height:1.3;margin:0 0 10px;
}
.tg-verhaal--kaart.tg-verhaal--geenfoto .tg-verhaal__kop{margin:0 0 10px}
.tg-verhaal--kaart.tg-verhaal--geenfoto .tg-rte p{font-size:17px;line-height:1.65}
.tg-verhaal--kaart.tg-verhaal--geenfoto .tg-rte p:last-child{margin-bottom:0}
.tg-verhaal--kaart .tg-verhaal__media{min-height:240px;align-self:stretch}
.tg-verhaal--kaart .tg-verhaal__media img{border-radius:18px;height:100%}

.tg-verhaal--donker .tg-verhaal__tekst{color:#fff}
.tg-verhaal--donker .tg-verhaal__tekst h2{color:#fff}
.tg-verhaal--donker .tg-verhaal__tekst .tg-rte,
.tg-verhaal--donker .tg-verhaal__tekst .tg-rte p{color:rgba(255,255,255,.94)}
.tg-verhaal--donker .tg-eyebrow{color:var(--tg-sun)}
.tg-verhaal--donker .tg-script{color:var(--tg-sun)}
.tg-verhaal--donker .tg-badge{background:var(--tg-sun);color:#00544F}
.tg-verhaal--donker .tg-verhaal__kader{
  background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.28);color:#fff;
}
.tg-verhaal--donker .tg-verhaal__cijfer{
  background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.3);color:#fff;
}
.tg-verhaal--donker .tg-verhaal__cijfer span{color:rgba(255,255,255,.85)}
.tg-verhaal--donker .tg-verhaal__stat p{color:rgba(255,255,255,.92)}

@media(max-width:900px){
  .tg-lijstblok__grid{grid-template-columns:1fr;gap:26px}
  .tg-verhaal--kaart .tg-verhaal__grid{grid-template-columns:1fr}
  .tg-verhaal--kaart .tg-verhaal__tekst{padding:26px 22px}
  /* Een kaartje zonder foto heeft zijn binnenruimte al op het kaartje zelf
     staan; nog eens padding op de tekst zou die verdubbelen. */
  .tg-verhaal--kaart.tg-verhaal--geenfoto .tg-verhaal__tekst{padding:0}
}


/* 15i. Blokken van de pagina Reiservaringen
   ========================================================================== */
/* Kaarten met reisverhalen ------------------------------------------------ */
.tg-verhalen__lead{max-width:660px;margin-bottom:30px}
.tg-verhalen__grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;
}
.tg-verhaalkaart{
  background:#fff;border:1px solid rgba(22,51,49,.09);border-radius:22px;
  overflow:hidden;display:flex;flex-direction:column;
  color:inherit;text-decoration:none;
  transition:border-color .18s ease, transform .18s ease;
}
a.tg-verhaalkaart:hover{border-color:var(--tg-aqua);color:inherit;transform:translateY(-2px)}
.tg-verhaalkaart__media{display:block;height:190px;background:var(--tg-cream-2);position:relative}
.tg-verhaalkaart__media img{width:100%;height:100%;object-fit:cover;display:block}
.tg-verhaalkaart__body{padding:24px 26px 26px;display:flex;flex-direction:column;flex:1}
.tg-verhaalkaart__kicker{
  display:block;font-size:12px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--tg-teal);margin-bottom:10px;
}
.tg-verhaalkaart__titel{
  display:block;font-size:21px;font-weight:800;color:var(--tg-ink);
  line-height:1.2;margin-bottom:10px;
}
.tg-verhaalkaart__intro{
  display:block;font-size:16.5px;line-height:1.6;color:#5a6b69;flex:1;margin-bottom:16px;
}
.tg-verhaalkaart__meer{font-size:16.5px;font-weight:700;color:var(--tg-green-700)}
.tg-verhaalkaart--wacht .tg-verhaalkaart__meer{color:#9aa6a4}
.tg-verhalen__meer{margin-top:24px}
.tg-verhalen__link{
  font-size:17px;font-weight:700;color:var(--tg-green-700);text-decoration:none;
}
.tg-verhalen__link:hover{color:var(--tg-aqua)}

/* Reviews met de Google-vermelding ---------------------------------------- */
.tg-quotes__intro{max-width:640px;margin:0 0 28px;font-size:18px;line-height:1.6;color:var(--tg-ink-soft)}
/* De widget van Trustindex staat in de plaats van de eigen kaarten. Die
   brengt haar eigen opmaak mee; wij geven alleen de ruimte eromheen. */
.tg-quotes__widget{margin-top:8px}
.tg-quotes--midden .tg-quotes__widget{margin-left:auto;margin-right:auto}
.tg-quotes__google{
  display:flex;align-items:center;gap:10px;margin-bottom:20px;
  font-size:16.5px;font-weight:700;color:#5a6b69;
}
.tg-quotes__google svg{flex:0 0 auto}
/* De Google-score staat er niet meer boven; het ACF-vinkje "Toon
   Google-score" wordt hierdoor overruled. Haal deze regel weg om ze
   terug te tonen. */
.tg-quotes__google{display:none}
.tg-quotes--zes .tg-quotes{grid-template-columns:repeat(3,minmax(0,1fr))}
.tg-quotes__knop{margin-top:24px}

/* Video van een reiziger --------------------------------------------------- */
.tg-videoblok__grid{
  display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1fr);
  gap:48px;align-items:center;max-width:1100px;
}
.tg-videoblok__grid--geenvideo{grid-template-columns:minmax(0,1fr)}
.tg-videoblok--rechts .tg-videoblok__speler{order:2}
.tg-videoblok__speler{
  position:relative;width:100%;max-width:320px;justify-self:center;
  aspect-ratio:9/16;border-radius:20px;overflow:hidden;background:var(--tg-green-700);
}
.tg-videoblok--liggend .tg-videoblok__speler{aspect-ratio:16/9;max-width:none}
.tg-videoblok__speler video,
.tg-videoblok__speler img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
}
.tg-videoblok__tekst h2{
  font-size:clamp(24px,3.4vw,34px);line-height:1.12;font-weight:800;
  color:var(--tg-green-700);margin:0 0 14px;
}
.tg-videoblok__lead{font-size:18px;line-height:1.6;color:var(--tg-ink-soft);margin:0 0 18px;max-width:480px}
.tg-videoblok__citaat{
  border-left:3px solid var(--tg-aqua);padding:2px 0 2px 16px;
  font-size:16.5px;font-weight:700;color:#5a6b69;
}
.tg-videoblok__binnenkort{font-size:16px;color:#7d8d8b;margin:14px 0 0}

@media(max-width:900px){
  .tg-verhalen__grid{grid-template-columns:1fr}
  .tg-quotes--zes .tg-quotes{grid-template-columns:1fr}
  .tg-videoblok__grid{grid-template-columns:1fr;gap:28px}
  .tg-videoblok--rechts .tg-videoblok__speler{order:0}
}
@media(min-width:901px) and (max-width:1100px){
  .tg-quotes--zes .tg-quotes{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* 16. Getuigenissen
   ========================================================================== */
.tg-quotes{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:26px;margin-top:34px;align-items:start;
}
.tg-quote{
  background:#fff;padding:32px;border-radius:var(--tg-radius-card);
  border:1px solid rgba(20,59,57,.1);margin:0;
  display:flex;flex-direction:column;height:100%;
}
.tg-quote__stars{color:var(--tg-gold);letter-spacing:2px;margin-bottom:14px;font-size:17px}
.tg-quote__text{
  font-size:17px;line-height:1.6;color:var(--tg-ink-soft);
  margin:0;quotes:"\201C" "\201D";flex:1;
}
.tg-quote__text p{margin:0 0 12px}
.tg-quote__text p:last-child{margin-bottom:0}
.tg-quote__text p:first-child::before{content:open-quote}
.tg-quote__text p:last-child::after{content:close-quote}
.tg-quote__by{
  margin-top:18px;padding-top:16px;border-top:1px solid rgba(22,51,49,.08);
  font-size:15.5px;color:var(--tg-ink-muted);
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
}
.tg-quote__avatar{
  flex:0 0 auto;width:40px;height:40px;border-radius:50%;
  background:var(--tg-aqua);color:#fff;font-weight:800;font-size:17px;
  display:flex;align-items:center;justify-content:center;text-transform:uppercase;
}
.tg-quote__name{font-weight:800;color:var(--tg-green-700)}
/* Titel in het midden, zonder bovenschrift. */
.tg-quotes--midden > .tg-wrap > h2{text-align:center;margin-bottom:26px;max-width:100%}
.tg-quotes--midden .tg-aftercards{text-align:center}
.tg-quotes--midden .tg-quotes{margin-top:0}
/*
 * Eén getuigenis: dan wordt de hele strook één smalle kolom, zoals in het
 * ontwerp. Bovenschrift, titel, de kaart (of de widget van Trustindex) en de
 * link staan dan netjes onder elkaar op dezelfde linkerlijn — een gecentreerde
 * kaart naast een linkse titel leest scheef.
 */
.tg-quotes--enkel > .tg-wrap{max-width:820px}
.tg-quotes--enkel > .tg-wrap > h2{
  font-size:clamp(24px,3.4vw,34px);line-height:1.12;max-width:100%;margin-bottom:24px;
}
.tg-quotes--enkel .tg-quotes__widget{max-width:100%;margin-left:0;margin-right:0}
.tg-quotes--enkel .tg-quotes{grid-template-columns:minmax(0,1fr);justify-content:stretch}
.tg-quotes--enkel .tg-aftercards{margin-top:18px;text-align:left}
/* Eén getuigenis staat gecentreerd, smaller en met wat meer lucht eromheen. */
.tg-quotes--een{grid-template-columns:minmax(0,760px);justify-content:center;
  margin-top:26px;margin-bottom:10px}
.tg-quotes--een .tg-quote{padding:36px 40px}
.tg-quotes--een .tg-quote__text{font-size:18px;line-height:1.65}
.tg-quotes--een .tg-quote__by{margin-top:24px;padding-top:20px}
@media(max-width:700px){
  .tg-quotes--een .tg-quote{padding:26px 22px}
}

/* 17. Footer
   ========================================================================== */
.tg-footer{
  background:#0B2422;color:rgba(255,255,255,.72);
  padding:60px 0 34px;font-size:16.5px;line-height:1.7;
}
.tg-footer__grid{
  /* Merk links, dan twee menukolommen. De reisgarantie staat niet meer in een
     vierde kolom maar linksonder, boven de copyrightregel. */
  display:grid;grid-template-columns:minmax(240px,1.2fr) repeat(2,minmax(180px,1fr));
  gap:36px;
}
@media(max-width:860px){
  .tg-footer__grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
}
.tg-footer a{color:rgba(255,255,255,.82);text-decoration:none}
.tg-footer a:hover{color:#fff}

/* Kolom 1 — merk en contact. Het logo blijft in kleur, zoals in het ontwerp. */
.tg-footer__logo{height:46px;width:auto;display:block;margin:0 0 16px}
.tg-footer__wordmark{display:block;font-size:24px;font-weight:800;color:#fff;margin-bottom:16px}
.tg-footer__contact a{display:block}
.tg-footer__tel{color:#fff!important;font-weight:700}
.tg-footer__socials{display:flex;gap:12px;margin-top:18px}
.tg-footer__socials a{
  width:44px;height:44px;border:1px solid rgba(255,255,255,.22);border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  color:rgba(255,255,255,.85);transition:border-color .18s, background .18s;
}
.tg-footer__socials a:hover{border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.06)}
.tg-footer__socials svg{width:20px;height:20px}

/* Kolomtitels — klein, gespatieerd, halfdoorzichtig wit (geen goud). */
.tg-footer__head{
  margin:0 0 14px;font-size:12.5px;font-weight:700;line-height:1.4;
  letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.45);
}

.tg-footer__links{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.tg-footer__links li{margin:0}
.tg-footer__links a{display:inline-block}
.tg-footer__links .sub-menu{list-style:none;margin:9px 0 0;padding:0;display:flex;flex-direction:column;gap:9px}

.tg-footer__biz{margin:0 0 14px;color:rgba(255,255,255,.72)}

/* De strook onder de kolommen: de tekst over de reisgarantie, linksonder. */
.tg-footer__garantie{
  font-size:15.5px;line-height:1.6;color:rgba(255,255,255,.62);max-width:900px;
}
.tg-footer__garantie p{margin:0 0 4px}
.tg-footer__garantie p:last-child{margin-bottom:0}
.tg-footer__onder{
  border-top:1px solid rgba(255,255,255,.12);margin-top:40px;padding-top:24px;
}
/* Staat de strook er al, dan hoeft de copyrightregel geen tweede lijn. */
.tg-footer__onder + .tg-footer__copy{border-top:0;margin-top:22px;padding-top:0}


.tg-footer__copy{
  border-top:1px solid rgba(255,255,255,.12);margin-top:40px;padding-top:22px;
  font-size:15px;color:rgba(255,255,255,.5);
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;
}
.tg-footer__slogan{font-family:'Caveat',cursive;font-size:20px;color:rgba(255,215,106,.8)}

/* 18. Gravity Forms
   ==========================================================================
   Gravity Forms brengt sinds 2.7 zijn eigen stijl mee ("orbital"), met een
   set CSS-variabelen, én de oudere klasse `gravity-theme` met vaste regels.
   We doen allebei: eerst de variabelen zetten, daarna dezelfde stijl nog
   eens expliciet, met genoeg gewicht om de eigen regels van Gravity Forms
   te overschrijven. Zonder dat laatste blijven de velden en knoppen eruit
   zien zoals Gravity Forms ze standaard tekent.                            */

/* --- 1. De variabelen van de nieuwe Gravity Forms-stijl ----------------- */
.gform_wrapper,
.gform_wrapper.gravity-theme,
.gform-theme--foundation,
.gform-theme--framework{
  --gf-color-primary:var(--tg-gold);
  --gf-color-primary-rgb:204,157,0;
  --gf-color-primary-contrast:#fff;
  --gf-color-primary-contrast-rgb:255,255,255;
  --gf-color-primary-darker:var(--tg-gold-dark);
  --gf-color-primary-lighter:#E0B428;

  --gf-color-secondary:#fff;
  --gf-color-secondary-contrast:var(--tg-green-700);
  --gf-color-secondary-darker:var(--tg-cream-2);

  --gf-color-in-ctrl:#fff;
  --gf-color-in-ctrl-primary:var(--tg-green-700);
  --gf-color-in-ctrl-dark:var(--tg-ink);
  --gf-color-out-ctrl-light-darker:rgba(22,51,49,.22);
  --gf-color-out-ctrl-dark:var(--tg-ink);
  --gf-color-out-ctrl-dark-darker:var(--tg-green-800);

  --gf-font-family:var(--tg-font);
  --gf-radius:14px;

  --gf-ctrl-radius:14px;
  --gf-ctrl-border-color:rgba(22,51,49,.22);
  --gf-ctrl-border-color-focus:var(--tg-aqua);
  --gf-ctrl-border-color-hover:var(--tg-green-700);
  --gf-ctrl-border-width:1.5px;
  --gf-ctrl-size-height:52px;
  --gf-ctrl-font-size:17px;
  --gf-ctrl-bg-color:#fff;
  --gf-ctrl-color:var(--tg-ink);

  --gf-ctrl-label-color-primary:var(--tg-green-800);
  --gf-ctrl-label-font-size-primary:16px;
  --gf-ctrl-label-font-weight-primary:700;
  --gf-ctrl-desc-color:var(--tg-ink-muted);

  --gf-ctrl-btn-radius:999px;
  --gf-ctrl-btn-font-size:17px;
  --gf-ctrl-btn-font-weight:700;
  --gf-ctrl-btn-padding-x:28px;
  --gf-ctrl-btn-padding-y:15px;
  --gf-ctrl-btn-size-height:52px;
  --gf-ctrl-btn-border-width:0;
  --gf-ctrl-btn-color-primary:#fff;
  --gf-ctrl-btn-bg-color-primary:var(--tg-gold);
  --gf-ctrl-btn-bg-color-hover-primary:var(--tg-gold-dark);
  --gf-ctrl-btn-bg-color-focus-primary:var(--tg-gold-dark);
  --gf-ctrl-btn-border-color-primary:var(--tg-gold);
  --gf-ctrl-btn-color-secondary:var(--tg-green-700);
  --gf-ctrl-btn-bg-color-secondary:#fff;
  --gf-ctrl-btn-border-color-secondary:var(--tg-green-700);
}

/* --- 2. Dezelfde stijl expliciet, met voldoende gewicht ----------------- */
/* Gravity Forms zet velden in een raster van twaalf kolommen; dat leggen we
   hier zelf vast, zodat een half veld ook echt naast het vorige komt. */
.gform_wrapper .gform_fields{
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:18px 22px;
}
.gform_wrapper .gform_fields > .gfield{grid-column:span 12;min-width:0}
.gform_wrapper .gform_fields > .gfield--width-half{grid-column:span 6}
.gform_wrapper .gform_fields > .gfield--width-third{grid-column:span 4}
.gform_wrapper .gform_fields > .gfield--width-quarter{grid-column:span 3}
@media(max-width:640px){
  .gform_wrapper .gform_fields > .gfield{grid-column:span 12}
}
.gform_wrapper .gfield_label,
.gform_wrapper .gform-field-label{
  font-weight:700;color:var(--tg-green-800);font-size:16px;margin-bottom:8px;
  line-height:1.4;
}

.gform_wrapper .gfield input[type=text],
.gform_wrapper .gfield input[type=email],
.gform_wrapper .gfield input[type=tel],
.gform_wrapper .gfield input[type=number],
.gform_wrapper .gfield input[type=url],
.gform_wrapper .gfield input[type=date],
.gform_wrapper .gfield select,
.gform_wrapper .gfield textarea{
  width:100%;box-sizing:border-box;
  border:1.5px solid rgba(22,51,49,.22)!important;
  border-radius:14px!important;
  padding:14px 16px!important;
  min-height:52px;
  font-family:var(--tg-font);font-size:17px;line-height:1.4;
  color:var(--tg-ink);background:#fff;
  box-shadow:none;
}
.gform_wrapper .gfield textarea{min-height:140px;line-height:1.55}
.gform_wrapper .gfield input::placeholder,
.gform_wrapper .gfield textarea::placeholder{color:#7b8b89;opacity:1}
.gform_wrapper .gfield select{
  appearance:none;-webkit-appearance:none;padding-right:44px!important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%230F4C4A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 18px center;
}
.gform_wrapper .gfield input:focus,
.gform_wrapper .gfield select:focus,
.gform_wrapper .gfield textarea:focus{
  outline:0;
  border-color:var(--tg-aqua)!important;
  box-shadow:0 0 0 3px rgba(0,179,173,.18)!important;
}

/* Knoppen: volle okerkleurige pil, ook de knoppen tussen de stappen. */
.gform_wrapper .gform_footer input[type=submit],
.gform_wrapper .gform_footer button,
.gform_wrapper .gform_page_footer input[type=submit],
.gform_wrapper .gform_page_footer input[type=button],
.gform_wrapper .gform_page_footer button,
.gform_wrapper .gform_button,
.gform_wrapper .gform-button{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:0!important;border-radius:999px!important;
  background:var(--tg-gold)!important;color:#fff!important;
  font-family:var(--tg-font);font-weight:700;font-size:17px;line-height:1;
  padding:15px 28px!important;min-height:52px;
  cursor:pointer;box-shadow:none;
  transition:background .18s ease;
}
.gform_wrapper .gform_footer input[type=submit]:hover,
.gform_wrapper .gform_footer button:hover,
.gform_wrapper .gform_page_footer input[type=submit]:hover,
.gform_wrapper .gform_page_footer input[type=button]:hover,
.gform_wrapper .gform_button:hover,
.gform_wrapper .gform-button:hover{background:var(--tg-gold-dark)!important;color:#fff!important}
.gform_wrapper .gform_footer{margin:22px 0 0;padding:0}

/* Selectievakjes en radio's die géén knoppen zijn. */
.gform_wrapper .gfield input[type=checkbox],
.gform_wrapper .gfield input[type=radio]{
  width:22px;height:22px;min-height:0;padding:0!important;
  accent-color:var(--tg-green-700);
}
/* Keuzerondjes en selectievakjes: het bolletje en zijn tekst op één lijn, met
   wat ruimte ertussen. Niet in formulieren waar de keuzes knoppen worden —
   daar zit de invoer onzichtbaar achter het label. */
.gform_wrapper:not(.tg-gform--keuzeknoppen) .gfield_radio .gchoice,
.gform_wrapper:not(.tg-gform--keuzeknoppen) .gfield_checkbox .gchoice{
  display:flex;align-items:flex-start;gap:10px;min-height:38px;
}
.gform_wrapper:not(.tg-gform--keuzeknoppen) .gfield_radio .gchoice label,
.gform_wrapper:not(.tg-gform--keuzeknoppen) .gfield_checkbox .gchoice label{
  margin:0;font-size:16.5px;line-height:1.5;color:var(--tg-ink-soft);
}
.gform_wrapper:not(.tg-gform--keuzeknoppen) .gfield input[type=checkbox],
.gform_wrapper:not(.tg-gform--keuzeknoppen) .gfield input[type=radio]{
  flex:0 0 auto;margin-top:2px;
}

/* Het verplicht-teken.
   Gravity Forms zet er standaard de tekst "(Vereist)" achter elk label. Dat
   staat er rood en cursief bij en maakt een formulier onrustig. We laten die
   tekst staan voor schermlezers, maar tonen op het scherm een klein rood
   sterretje. Staat de instelling van het formulier al op een sterretje, dan
   raakt deze regel niets aan en blijft dat sterretje gewoon staan. */
.gform_wrapper .gfield_required{color:#c0392b;margin-left:3px;font-style:normal}
.gform_wrapper .gfield_required_text{font-size:0;letter-spacing:0}
.gform_wrapper .gfield_required_text::after{
  content:"*";font-size:16px;font-style:normal;font-weight:700;color:#c0392b;
}
.gform_wrapper .gfield_required_asterisk{font-style:normal;font-weight:700}
.gform_wrapper .gfield_description{font-size:15px;line-height:1.5;color:var(--tg-ink-muted)}
.gform_wrapper .gfield_description.validation_message,
.gform_wrapper .validation_message{
  background:#fdecea;border:1px solid #f5c6c0;color:#8f2c22;
  border-radius:10px;padding:9px 12px;font-size:14.5px;
}
.gform_wrapper .gform_validation_errors{
  border-radius:14px;border:1px solid #f5c6c0;background:#fdecea;box-shadow:none;
}
.gform_wrapper .gform_validation_errors > h2{color:#8f2c22;font-size:17px}
.gform_confirmation_message{
  background:var(--tg-cream-2);border-left:4px solid var(--tg-aqua);
  border-radius:14px;
  padding:22px 26px;font-size:18px;line-height:1.6;color:var(--tg-green-700);
}
.gform_confirmation_message p{margin:0 0 10px}
.gform_confirmation_message p:last-child{margin-bottom:0}

/* 18b. Offerteformulier in stappen (Gravity Form met klasse tg-gform--offerte)
   ==========================================================================
   De keuzevelden worden knoppen, zoals in het ontwerp. De radio's en
   selectievakjes zelf blijven bestaan (en dus bedienbaar met het toetsenbord),
   ze staan alleen onzichtbaar achter hun label.                             */
.tg-gform--offerte{
  background:#fff;border:1px solid rgba(22,51,49,.12);border-radius:24px;
  padding:clamp(24px,3.4vw,40px);
}
.tg-gform--offerte .gform_page_fields .gform_fields{gap:26px 22px}

/* Tussentitel per stap ("Eerst de praktische gegevens", ...). */
.tg-gform--offerte .tg-formstap{margin-top:0}
.tg-gform--offerte .tg-formstap__titel{
  font-size:clamp(23px,3.2vw,30px);line-height:1.15;font-weight:800;
  color:var(--tg-green-800);margin:0;
}
/* Kleine groepstitel boven twee velden ("Met hoeveel personen reis je?"). */
.tg-gform--offerte .tg-formgroep{margin-bottom:-14px}
.tg-gform--offerte .tg-formgroep .tg-formstap__titel{
  font-size:16.5px;font-weight:700;color:var(--tg-green-800);
}

/* Keuzes als knoppen. */
.tg-gform--keuzeknoppen .gfield_radio,
.tg-gform--keuzeknoppen .gfield_checkbox{display:flex;flex-wrap:wrap;gap:10px}
.tg-gform--keuzeknoppen .gfield_radio .gchoice,
.tg-gform--keuzeknoppen .gfield_checkbox .gchoice{position:relative;margin:0}
.tg-gform--keuzeknoppen .gfield_radio input[type=radio],
.tg-gform--keuzeknoppen .gfield_checkbox input[type=checkbox]{
  position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;
}
.tg-gform--keuzeknoppen .gfield_radio label,
.tg-gform--keuzeknoppen .gfield_checkbox label{
  /* Inline-flex met een minimumhoogte: één regel staat netjes gecentreerd en
     een pilletje wordt nooit dubbel zo hoog door een woord dat afbreekt. */
  display:inline-flex;align-items:center;justify-content:center;text-align:center;
  margin:0;padding:11px 20px;min-height:48px;line-height:1.3;
  border:1.5px solid rgba(22,51,49,.22);border-radius:999px;background:#fff;
  font-size:16px;font-weight:600;color:var(--tg-green-800);cursor:pointer;
  transition:border-color .15s ease, background .15s ease, color .15s ease;
}
/* Op een scherm dat breed genoeg is blijft elk pilletje op één regel. */
@media(min-width:641px){
  .tg-gform--keuzeknoppen .gfield_radio label,
  .tg-gform--keuzeknoppen .gfield_checkbox label{white-space:nowrap}
}
.tg-gform--keuzeknoppen .gfield_radio label:hover,
.tg-gform--keuzeknoppen .gfield_checkbox label:hover{border-color:var(--tg-green-700)}
.tg-gform--keuzeknoppen .gfield_radio input:checked + label,
.tg-gform--keuzeknoppen .gfield_checkbox input:checked + label{
  background:var(--tg-green-700);border-color:var(--tg-green-700);color:#fff;
}
.tg-gform--keuzeknoppen .gfield_radio input:focus-visible + label,
.tg-gform--keuzeknoppen .gfield_checkbox input:focus-visible + label{
  outline:3px solid rgba(0,179,173,.45);outline-offset:2px;
}

/* De akkoordverklaring blijft een gewoon selectievakje. */
.tg-gform--keuzeknoppen .tg-consent .gfield_checkbox{display:block}
.tg-gform--keuzeknoppen .tg-consent .gchoice{display:flex;gap:10px;align-items:flex-start}
.tg-gform--keuzeknoppen .tg-consent input[type=checkbox]{
  position:static;width:22px;height:22px;opacity:1;flex:0 0 auto;margin-top:2px;accent-color:var(--tg-green-700);
}
.tg-gform--keuzeknoppen .tg-consent label{
  /* De akkoordverklaring is een lopende zin, geen pilletje: gewoon laten
     doorlopen en links uitlijnen. */
  display:inline;white-space:normal;text-align:left;
  border:0;background:none;padding:0;min-height:0;border-radius:0;
  font-weight:500;font-size:16px;line-height:1.55;color:var(--tg-ink-soft);
}
.tg-gform--keuzeknoppen .tg-consent input:checked + label{background:none;color:var(--tg-ink-soft)}
.tg-gform--keuzeknoppen .tg-consent a{color:var(--tg-green-700);font-weight:700}

/* Stappenbalk bovenaan. */
.tg-gform--offerte .gf_progressbar_wrapper{margin:0 0 26px}
.tg-gform--offerte .gf_progressbar_title{
  font-size:14.5px;font-weight:700;color:var(--tg-green-800);margin-bottom:10px;
}
.tg-gform--offerte .gf_progressbar{background:rgba(22,51,49,.1);border-radius:999px;height:8px;overflow:hidden}
.tg-gform--offerte .gf_progressbar_percentage{background:var(--tg-aqua);height:8px;border-radius:999px}
.tg-gform--offerte .gf_progressbar_percentage span{display:none}
.tg-gform--offerte .gf_page_steps{
  display:flex;flex-wrap:wrap;align-items:center;gap:0 4px;margin:0 0 22px;
}
.tg-gform--offerte .gf_step{
  display:inline-flex;align-items:center;
  font-size:14.5px;font-weight:700;color:rgba(22,51,49,.45);margin:0 18px 12px 0;
}
.tg-gform--offerte .gf_step_active{color:var(--tg-green-800)}
.tg-gform--offerte .gf_step_number{
  width:26px;height:26px;border-radius:50%;background:rgba(22,51,49,.25);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;font-size:13px;margin-right:8px;
}
.tg-gform--offerte .gf_step_active .gf_step_number{background:var(--tg-green-700)}
.tg-gform--offerte .gf_step_completed .gf_step_number{background:var(--tg-aqua)}

/* Vorige/volgende. */
.tg-gform--offerte .gform_page_footer{
  display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:28px;
}
.gform_wrapper.tg-gform--offerte .gform_page_footer .gform_previous_button{
  background:#fff!important;color:var(--tg-green-700)!important;
  border:1.5px solid var(--tg-green-700)!important;
}
.gform_wrapper.tg-gform--offerte .gform_page_footer .gform_previous_button:hover{
  background:var(--tg-cream-2)!important;color:var(--tg-green-700)!important;
}

/* 19. Modaal (reisvoorstel-formulier)
   ========================================================================== */
.tg-modal{
  position:fixed;inset:0;z-index:210;display:none;
  background:rgba(8,32,31,.75);padding:24px;overflow-y:auto;
}
.tg-modal.is-open{display:block}
.tg-modal__inner{
  background:#fff;max-width:720px;margin:40px auto;padding:38px;
  border-radius:var(--tg-radius);position:relative;
}
.tg-modal__close{
  position:absolute;top:14px;right:14px;width:42px;height:42px;border-radius:50%;
  border:0;background:var(--tg-cream-2);color:var(--tg-green-700);
  font-size:22px;line-height:1;cursor:pointer;
}
.tg-modal__close:hover{background:#e6e1d3}
.tg-modal h3{font-size:28px;color:var(--tg-green-800);margin:0 0 10px}

/* De melding op een bestemming die tijdelijk niet boekbaar is: smaller dan
   het reisvoorstelvenster, zoals in het ontwerp. */
.tg-modal--melding .tg-modal__inner{max-width:520px;padding:clamp(26px,3.4vw,34px)}
.tg-modal--melding h3{font-size:clamp(22px,3.2vw,28px);line-height:1.15;margin:0 0 12px}
.tg-modal--melding .tg-modal__rte p{font-size:16.5px;line-height:1.6;margin:0 0 12px}
.tg-modal--melding .tg-modal__rte p:last-child{margin-bottom:20px}
.tg-modal p{color:var(--tg-ink-soft);line-height:1.6;margin:0 0 22px}
body.tg-modal-open{overflow:hidden}

/* 20. Mobiele CTA-balk op reisdetail
   ========================================================================== */
.tg-stickycta{
  position:fixed;left:0;right:0;bottom:0;z-index:80;display:none;
  background:#fff;border-top:1px solid var(--tg-line-soft);
  padding:10px 14px;gap:10px;
  box-shadow:0 -6px 20px rgba(15,76,74,.10);
}
.tg-stickycta .tg-btn{flex:1;min-height:48px;font-size:15px;padding:12px 14px}
@media(max-width:768px){
  .tg-stickycta{display:flex}
  body{padding-bottom:72px}
}

/* 21. Paginering, archief, 404, zoeken
   ========================================================================== */
.tg-pagination{display:flex;gap:8px;justify-content:center;margin-top:48px;flex-wrap:wrap}
.tg-pagination .page-numbers{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:44px;height:44px;padding:0 12px;border-radius:999px;
  border:1px solid var(--tg-line);color:var(--tg-green-700);font-weight:700;
}
.tg-pagination .page-numbers.current,
.tg-pagination .page-numbers:hover{background:var(--tg-green-800);border-color:var(--tg-green-800);color:#fff}

.tg-searchform{display:flex;gap:10px;max-width:520px;margin-top:24px}
.tg-searchform input[type=search]{
  flex:1;border:1px solid rgba(22,51,49,.22);border-radius:999px;
  padding:14px 20px;font-family:var(--tg-font);font-size:16px;
}
.tg-searchform input[type=search]:focus{outline:0;border-color:var(--tg-aqua)}

.tg-resultlist{list-style:none;padding:0;margin:34px 0 0;display:grid;gap:18px}
.tg-resultlist li{
  background:#fff;border:1px solid rgba(20,59,57,.1);border-radius:var(--tg-radius-card);
  padding:24px 26px;
}
.tg-resultlist h2{font-size:26px;margin:0 0 8px;color:var(--tg-green-700)}
.tg-resultlist p{margin:0;color:var(--tg-ink-soft);line-height:1.6}

/* 21b. De praktische pagina van een bestemming
   ==========================================================================
   Drie onderdelen: de rij pilletjes onder de hero, de klimaattabel en de
   strook met het paklijstformulier.                                        */

/* Alleen voor schermlezers. */
.tg-visueel-verborgen{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* Ankernavigatie. */
.tg-ankernav{
  background:#fff;border-bottom:1px solid var(--tg-line-soft);
  /* Zonder JavaScript blijven het gewone links; het springen gebeurt zacht. */
  scroll-behavior:smooth;
}
.tg-ankernav--plakt{position:sticky;top:var(--tg-header-h,72px);z-index:60}
.tg-ankernav__inner{
  display:flex;gap:8px;flex-wrap:nowrap;overflow-x:auto;
  padding:14px 20px;scrollbar-width:none;
}
.tg-ankernav__inner::-webkit-scrollbar{display:none}
.tg-ankernav__link{
  display:inline-flex;align-items:center;flex:0 0 auto;
  padding:11px 17px;min-height:44px;border-radius:999px;
  background:var(--tg-cream-2);color:var(--tg-green-800);
  font-size:15px;font-weight:700;text-decoration:none;white-space:nowrap;
  transition:background .15s ease,color .15s ease;
}
.tg-ankernav__link:hover{background:var(--tg-green-700);color:#fff}
.tg-ankernav__link.is-actief{background:var(--tg-green-800);color:#fff}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* Zodat een anker niet onder de plakkende balk verdwijnt. */
.tg-anker{scroll-margin-top:150px}

/* Klimaattabel. */
.tg-klimaat__inner{padding-top:20px;padding-bottom:20px;max-width:1000px}
.tg-klimaat__scroll{overflow-x:auto;padding-bottom:4px}
.tg-klimaat__tabel{border-collapse:separate;border-spacing:6px;width:100%;min-width:640px}
.tg-klimaat__tabel th{
  font-size:13.5px;font-weight:700;color:var(--tg-ink-soft);padding:0 6px;
}
.tg-klimaat__tabel thead th{text-align:center;padding-bottom:6px}
.tg-klimaat__tabel tbody th{
  text-align:right;color:var(--tg-green-800);white-space:normal;
  width:120px;line-height:1.25;
}
.tg-klimaat__tabel abbr{text-decoration:none;border:0}
.tg-klimaat__tabel td{padding:0}
.tg-klimaat__cel{display:block;height:52px;border-radius:10px;background:#DFF1EE}
.tg-klimaat__cel--droog{background:#DFF1EE}
.tg-klimaat__cel--wisselend{background:#6FC7C1}
.tg-klimaat__cel--nat{background:#00706B}
.tg-klimaat__legende{
  list-style:none;margin:16px 0 0;padding:0;display:flex;gap:22px;flex-wrap:wrap;
  font-size:15px;color:var(--tg-ink-soft);
}
.tg-klimaat__legende li{display:flex;align-items:center;gap:9px}
.tg-klimaat__legende .tg-klimaat__cel{width:22px;height:22px;border-radius:6px}

@media(max-width:700px){
  .tg-klimaat__cel{height:40px}
  .tg-klimaat__tabel tbody th{width:96px;font-size:12.5px}
}

/* Strook met het e-mailformulier (de paklijst). */
.tg-mailstrook{background:var(--tg-green-700)}
.tg-mailstrook__inner{
  max-width:720px;padding-top:56px;padding-bottom:56px;text-align:center;
}
.tg-mailstrook h2{
  font-size:clamp(25px,3.6vw,34px);line-height:1.12;font-weight:800;
  color:var(--tg-green-800);margin:0 0 12px;
}
.tg-mailstrook p{
  font-size:17px;line-height:1.6;color:var(--tg-ink-soft);margin:0 auto 22px;max-width:560px;
}
.tg-mailstrook--donker h2{color:#fff}
.tg-mailstrook--donker p{color:rgba(255,255,255,.88)}
.tg-mailstrook__voet{font-size:14.5px;margin:16px auto 0}
.tg-mailstrook--donker .tg-mailstrook__voet{color:rgba(255,255,255,.7)}
.tg-mailstrook__form{max-width:600px;margin:0 auto}
/*
 * Eén regel: veld en knop naast elkaar, en allebei even hoog. Gravity Forms
 * zet zelf een marge boven de voettekst met de knop; die halen we hier weg,
 * anders hangt de knop een stuk lager dan het invulveld.
 */
.tg-mailstrook__form .gform_wrapper .gform_fields{gap:0}
.tg-mailstrook__form .gform_wrapper form{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:start;
}
.tg-mailstrook__form .gform_wrapper .gform-body,
.tg-mailstrook__form .gform_wrapper .gform_body{margin:0!important;min-width:0;text-align:left}
.tg-mailstrook__form .gform_wrapper .gfield{margin:0!important}
.tg-mailstrook__form .gform_wrapper .gfield_label{
  position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);
}
.tg-mailstrook__form .gform_wrapper .gform_footer{
  margin:0!important;padding:0!important;width:auto;
}
.tg-mailstrook__form .gform_wrapper input[type=email],
.tg-mailstrook__form .gform_wrapper input[type=text]{
  background:#fff!important;border:0!important;border-radius:999px!important;
  padding:15px 24px!important;min-height:54px;height:54px;width:100%;margin:0!important;
}
.tg-mailstrook__form .gform_wrapper .gform_button{min-height:54px;height:54px;margin:0!important}
/* De foutmelding hoort onder het veld, niet naast de knop. */
.tg-mailstrook__form .gform_wrapper .gfield_description{margin-top:10px}
.tg-mailstrook--donker .tg-mailstrook__form .gfield_description,
.tg-mailstrook--donker .tg-mailstrook__form .gform_confirmation_message{color:rgba(255,255,255,.82)}

@media(max-width:620px){
  .tg-mailstrook__form .gform_wrapper form{grid-template-columns:minmax(0,1fr)}
  .tg-mailstrook__form .gform_wrapper .gform_footer,
  .tg-mailstrook__form .gform_wrapper .gform_footer input{width:100%}
}

/* Tipkader binnen een verhaalblok, met een gouden rand links — rondom
   afgerond, zoals in het ontwerp. */
.tg-verhaal__kader--tip{
  background:#EEF5F2;border:0;border-left:4px solid var(--tg-gold);
  border-radius:16px;padding:18px 22px;
}
.tg-verhaal__kader--tip p{font-size:16.5px;line-height:1.6;color:#2c4442}
.tg-verhaal__kaderlabel{
  display:block;font-size:13px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:#8A6A00;margin-bottom:7px;
}

/* Icoontje naast de titel van een verhaalblok. De rij neemt de marges van de
   titel over, anders plakt de tekst eronder tegen de titel aan. */
.tg-verhaal__kop{display:flex;align-items:center;gap:12px;margin:6px 0 18px}
.tg-verhaal__kop h2{margin:0}
.tg-verhaal__icoon{
  flex:0 0 auto;color:var(--tg-green-700);display:inline-flex;
}

/* Veelgestelde vragen in twee kolommen. */
.tg-grfaq--twee .tg-grfaq__lijst{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 20px;
}
@media(max-width:820px){
  .tg-grfaq--twee .tg-grfaq__lijst{grid-template-columns:minmax(0,1fr)}
}

/* 22. Responsive
   ========================================================================== */
@media(max-width:1200px){
  .tg-cards--4{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:1050px){
  .tg-itinerary{grid-template-columns:1fr}
  .tg-map{position:relative;top:auto}
  .tg-map__frame{height:420px}
  .tg-lodging{grid-template-columns:1fr}
  .tg-day__body,.tg-day__body.no-image{padding-left:0}
  .tg-gallery{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:220px}
  .tg-lodging__images{grid-template-columns:1fr 1fr;grid-template-rows:220px 180px 180px}
  .tg-lodging__images img:first-child{grid-column:1/3;grid-row:1/2}
  .tg-lodging__images img:nth-child(n+2){grid-column:auto;grid-row:auto}
}
@media(max-width:980px){
  .tg-overview,.tg-liesbet__grid,.tg-practical{grid-template-columns:1fr}
  .tg-pricecard{position:static}
  .tg-highlights,
  .tg-hoogtepunten ul{grid-template-columns:1fr}
  .tg-cards,.tg-cards--4,.tg-cards--2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tg-quotes{grid-template-columns:1fr}
  .tg-cta .tg-wrap{display:block}
  .tg-cta .tg-btn{margin-top:25px}
  .tg-lodging-item{grid-template-columns:1fr;gap:18px}
  .tg-lodging-item img{height:240px}
}
@media(max-width:700px){
  :root{--tg-gutter:18px}
  .tg-hero{min-height:520px}
  .tg-hero .tg-wrap{padding-top:80px;padding-bottom:56px}
  .tg-hero h1{font-size:42px}
  .tg-script{font-size:28px}
  .tg-day > summary{grid-template-columns:74px minmax(0,1fr) 30px;gap:10px}
  .tg-day__title{font-size:19px}
  .tg-day__body{grid-template-columns:1fr;gap:18px}
  .tg-day__photo{height:210px}
  .tg-cards,.tg-cards--4,.tg-cards--2{grid-template-columns:1fr}
  .tg-gallery{grid-template-columns:1fr;grid-auto-rows:240px}
  .tg-gallery figure:nth-child(n){grid-column:auto;grid-row:auto}
  .tg-lodging__images{grid-template-columns:1fr 1fr;grid-template-rows:210px 160px 160px}
  .tg-footer{padding:48px 0 28px}
  .tg-footer__grid{gap:32px}
  .tg-footer__copy{flex-direction:column;gap:10px;align-items:flex-start}
  .tg-liesbet__grid img{width:180px;height:230px}
  .tg-box{padding:26px}
  .tg-modal__inner{padding:26px 22px;margin:20px auto}
}

/* 23. Print
   ========================================================================== */
@media print{
  .tg-header,.tg-topbar,.tg-subnav,.tg-stickycta,.tg-cta,.tg-modal{display:none!important}
  body{background:#fff;padding-bottom:0}
  .tg-day{break-inside:avoid}
}

/* Smalle contactstrook -----------------------------------------------------
   Een lage band met een rond portretje, één zin en rechts een knop met het
   telefoonnummer eronder. Op een smal scherm valt alles onder elkaar. */
.tg-contactstrook{background:#F3F8F6}
.tg-contactstrook__inner{
  max-width:860px;padding-top:30px;padding-bottom:30px;
  display:flex;gap:18px;align-items:center;flex-wrap:wrap;
}
.tg-contactstrook__foto{
  flex:0 0 auto;width:62px;height:62px;border-radius:50%;overflow:hidden;display:block;
}
.tg-contactstrook__foto img{width:100%;height:100%;object-fit:cover;display:block}
.tg-contactstrook__tekst{
  flex:1 1 260px;min-width:0;margin:0;
  font-size:17px;line-height:1.55;color:#2c4442;
}
.tg-contactstrook__actie{flex:0 0 auto}
.tg-contactstrook__tel{
  display:block;font-size:14.5px;color:#6b807e;margin-top:6px;
}
@media(max-width:600px){
  .tg-contactstrook__actie{flex:1 1 100%}
  .tg-contactstrook__actie .tg-btn{width:100%}
}

/* Een veld dat het thema zelf invult (bv. Bestemming op een praktische
   pagina): lichtgroen en niet aanklikbaar, zodat duidelijk is dat het
   al klaarstaat. */
.gform_wrapper .tg-veld-readonly input[readonly]{
  background:#F3F8F6;color:#2c4442;cursor:default;
}
.gform_wrapper .tg-veld-readonly input[readonly]:focus{
  outline:none;box-shadow:none;border-color:rgba(22,51,49,.18);
}