.dtf-blog-layout{
    --purple:#5F1B8A;
    --purple-dark:#432062;
    --orange:#F2883A;
    --coral:#C23B5C;
    --sage:#7C9C85;
    --ink:#2B2B2B;
    --ink-soft:#635E5A;
    --line:#ECE6DA;
    --white:#ffffff;
    --page-bg:#ffffff;
    --cream:#F7F5F0;
  }
.dtf-blog-layout *{box-sizing:border-box;}
html{scroll-behavior:smooth;}
.dtf-blog-layout{
    margin:0;
    font-family:'Noto Sans JP', sans-serif;
    color:var(--ink);
    background:var(--page-bg);
    line-height:1.7;
  }
.dtf-blog-layout h1, .dtf-blog-layout h2, .dtf-blog-layout h3, .dtf-blog-layout h4{
    font-family:'Lora', Georgia, 'Times New Roman', serif;
    color:var(--ink);
    line-height:1.2;
    margin:0 0 .5em;
  }
.dtf-blog-layout a{color:var(--ink);}
.dtf-blog-layout img{max-width:100%; display:block;}
.dtf-blog-layout .wrap{max-width:1040px; margin:0 auto; padding:0 24px;}
.dtf-blog-layout .icon-sprite{position:absolute; width:0; height:0; overflow:hidden;}
.dtf-blog-layout .ic{display:inline-block; width:60%; height:60%;}
.dtf-blog-layout .topbar{display:flex; align-items:center; gap:10px; padding-top:22px; padding-bottom:0;}
.dtf-blog-layout .back-chip{
    width:34px; height:34px; border-radius:50%; background:var(--white); border:1px solid var(--line);
    display:flex; align-items:center; justify-content:center; color:var(--purple); font-size:17.6px; text-decoration:none;
  }
.dtf-blog-layout .crumb-pill{
    background:#F5F0E6; color:var(--ink); font-weight:700; font-size:13.6px;
    padding:8px 16px; border-radius:999px; text-decoration:none;
  }
.dtf-blog-layout .hero{padding-top:28px; padding-bottom:8px;}
.dtf-blog-layout .hero-grid{display:grid; grid-template-columns:1fr 1.05fr; gap:52px; align-items:center;}
.dtf-blog-layout .hero h1{font-size:41.6px; margin-bottom:.5em;}
.dtf-blog-layout .hero .lead{font-size:17.9px; color:var(--ink); max-width:50ch; margin-bottom:26px;}
.dtf-blog-layout .jumpnav{display:flex; flex-wrap:wrap; gap:10px; max-width:520px;}
.dtf-blog-layout .jumpnav a{
    display:inline-flex; align-items:center; gap:8px; flex:0 0 auto;
    background:var(--white); border:1px solid var(--line);
    color:var(--ink); text-decoration:none; font-weight:700; font-size:13.6px;
    padding:8px 15px 8px 8px; border-radius:999px; white-space:nowrap;
    transition:background .15s ease;
  }
.dtf-blog-layout .jumpnav a:hover{background:#F5F0E6; border-color:#F5F0E6;}
.dtf-blog-layout .jumpnav a .ico{
    width:28px; height:28px; border-radius:50%; flex:0 0 28px;
    display:flex; align-items:center; justify-content:center;
    color:#fff;
  }
.dtf-blog-layout .jumpnav a .ico svg{width:15px; height:15px;}
.dtf-blog-layout .jumpnav a:nth-child(1) .ico{background:var(--purple);}
.dtf-blog-layout .jumpnav a:nth-child(2) .ico{background:var(--orange);}
.dtf-blog-layout .jumpnav a:nth-child(3) .ico{background:var(--coral);}
.dtf-blog-layout .jumpnav a:nth-child(4) .ico{background:var(--orange);}
.dtf-blog-layout .jumpnav a:nth-child(5) .ico{background:var(--purple);}
.dtf-blog-layout .hex-photo-wrap{position:relative; max-width:390px; margin-left:auto;}
.dtf-blog-layout .hex-glow{
    position:absolute; inset:-13% -13% -13% -13%;
    background:radial-gradient(circle at 55% 40%, var(--orange) 0%, var(--coral) 50%, transparent 78%);
    clip-path:polygon(45.50% 0.00%, 61.00% 1.81%, 68.50% 7.69%, 78.00% 4.52%, 88.00% 6.79%, 96.00% 14.48%, 87.00% 14.03%, 85.50% 15.38%, 96.50% 23.98%, 99.50% 31.22%, 99.50% 68.78%, 96.50% 76.02%, 89.00% 82.35%, 62.00% 96.38%, 52.00% 99.55%, 40.50% 97.74%, 11.50% 82.81%, 3.50% 76.47%, 0.00% 68.33%, 0.00% 31.22%, 2.50% 24.89%, 10.00% 18.55%, 29.00% 9.05%, 31.50% 4.52%, 38.50% 4.07%);
    opacity:.55; filter:blur(14px); transform:rotate(3deg);
  }
.dtf-blog-layout .hex-photo{
    position:relative; width:100%; aspect-ratio:.9/1;
    clip-path:polygon(45.50% 0.00%, 61.00% 1.81%, 68.50% 7.69%, 78.00% 4.52%, 88.00% 6.79%, 96.00% 14.48%, 87.00% 14.03%, 85.50% 15.38%, 96.50% 23.98%, 99.50% 31.22%, 99.50% 68.78%, 96.50% 76.02%, 89.00% 82.35%, 62.00% 96.38%, 52.00% 99.55%, 40.50% 97.74%, 11.50% 82.81%, 3.50% 76.47%, 0.00% 68.33%, 0.00% 31.22%, 2.50% 24.89%, 10.00% 18.55%, 29.00% 9.05%, 31.50% 4.52%, 38.50% 4.07%);
    background:#ddd; overflow:hidden;
  }
.dtf-blog-layout .hex-photo img{width:100%; height:100%; object-fit:cover;}
.dtf-blog-layout .route-grid{display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:start;}
.dtf-blog-layout .dtf-map{width:100%; height:320px; border-radius:18px; overflow:hidden;}
.dtf-blog-layout .map-caption{color:var(--ink-soft); font-size:13.1px; margin-top:10px;}
.dtf-blog-layout .leaflet-popup-content{font-family:'Noto Sans JP',Arial,sans-serif; font-weight:700; color:var(--ink);}
.dtf-blog-layout .dtf-pin{background:transparent !important; border:none !important;}
.dtf-blog-layout .dtf-map-tooltip{
    background:var(--purple-dark); color:#fff; border:none; font-family:'Noto Sans JP',Arial,sans-serif;
    font-weight:700; font-size:12.5px; padding:4px 10px; border-radius:8px; box-shadow:0 4px 10px rgba(0,0,0,.15);
  }
.dtf-blog-layout .dtf-map-tooltip::before{border-top-color:var(--purple-dark) !important;}
.dtf-blog-layout .content-grid{display:grid; grid-template-columns:1fr 320px; gap:50px; padding-top:52px; padding-bottom:80px; align-items:start;}
.dtf-blog-layout main section{margin-bottom:20px; scroll-margin-top:24px;}
.dtf-blog-layout main section > h2{font-size:29.6px; margin-bottom:.5em;}
.dtf-blog-layout [id]{scroll-margin-top:24px;} /* zodat jumpnav/kaart-anchors ook zonder <section>-wrapper netjes uitkomen */
.dtf-blog-layout main p{margin:0 0 1.1em; max-width:70ch;}
.dtf-blog-layout main ul.plain{margin:0 0 1.1em; padding-left:20px; max-width:70ch; color:var(--ink);}
.dtf-blog-layout main ul.plain li{margin-bottom:6px;}
.dtf-blog-layout main table{width:100%; max-width:70ch; margin:0 0 1.4em; border-collapse:collapse; font-size:15px;}
.dtf-blog-layout main table th,
.dtf-blog-layout main table td{padding:10px 18px 10px 0; text-align:left; border-bottom:1px solid #EDE7DA; white-space:nowrap;}
.dtf-blog-layout main table th{font-weight:700; color:var(--ink);}
.dtf-blog-layout .placeholder{color:#a79f92; font-style:italic;}
.dtf-blog-layout .inline-note{font-size:14.7px; color:var(--ink-soft); margin-top:8px; max-width:68ch;}
.dtf-blog-layout .inline-note strong{color:var(--ink);}
.dtf-blog-layout hr.sep{border:none; border-top:1px solid var(--line); margin:44px 0;}
.dtf-blog-layout .tipcard{max-width:70ch; border:1px solid var(--line); border-radius:16px; overflow:hidden; background:var(--cream); margin:18px 0; box-shadow:0 4px 16px rgba(67,32,98,0.05);}
.dtf-blog-layout .tipcard.js-hidden{display:none;}
.dtf-blog-layout .tipcard-tabs{display:flex; background:var(--white); border-bottom:1px solid var(--line);}
.dtf-blog-layout .tipcard-tab{
    flex:1; font-family:inherit; font-weight:700; font-size:13.6px;
    padding:13px 8px; border:none; background:transparent; color:var(--ink-soft);
    cursor:pointer; display:flex; align-items:center; justify-content:center; gap:7px;
    border-bottom:3px solid transparent;
  }
.dtf-blog-layout .tipcard-dot{
    width:26px; height:26px; border-radius:50%; flex:0 0 26px;
    display:flex; align-items:center; justify-content:center; color:#fff;
  }
.dtf-blog-layout .tipcard-dot svg{width:14px; height:14px;}
.dtf-blog-layout .tipcard-dot-restaurant{background:var(--coral);}
.dtf-blog-layout .tipcard-dot-accommodatie{background:var(--purple-dark);}
.dtf-blog-layout .tipcard-dot-excursie{background:var(--orange);}
.dtf-blog-layout .tipcard-tab.active{color:var(--ink); background:var(--cream);}
.dtf-blog-layout .tipcard-tab.active[data-tab="restaurant"]{border-bottom-color:var(--coral);}
.dtf-blog-layout .tipcard-tab.active[data-tab="accommodatie"]{border-bottom-color:var(--purple-dark);}
.dtf-blog-layout .tipcard-tab.active[data-tab="excursie"]{border-bottom-color:var(--orange);}
.dtf-blog-layout .tipcard-panel{padding:20px 22px;}
.dtf-blog-layout .tipcard-panel[hidden]{display:none;}
.dtf-blog-layout .tipcard-panel h4{
    font-family:inherit; font-size:11.2px; letter-spacing:.08em; text-transform:uppercase;
    color:var(--ink-soft); font-weight:700; margin:0 0 10px;
  }
.dtf-blog-layout .tipcard-panel p{margin:0; color:var(--ink-soft); font-size:14.9px;}
.dtf-blog-layout .tipcard-panel ul{margin:0; padding-left:18px; color:var(--ink-soft); font-size:14.9px;}
.dtf-blog-layout .tipcard-panel ul li{margin-bottom:6px;}
.dtf-blog-layout .tipcard-panel ul li:last-child{margin-bottom:0;}
.dtf-blog-layout .tipcard-panel a.more{display:inline-block; margin-top:8px; font-weight:700; font-size:13.9px;}
.dtf-blog-layout .day-reistijd{
    display:block; color:var(--ink-soft); font-weight:700; text-transform:uppercase;
    letter-spacing:.08em; font-size:11.2px; margin:-.3em 0 1em;
  }
.dtf-blog-layout .day-section h3{font-size:17.9px; color:var(--ink); margin-top:1.4em;}
.dtf-blog-layout details.activity{border-top:1px solid var(--line); padding:12px 0;}
.dtf-blog-layout details.activity summary{
    list-style:none; cursor:pointer;
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    font-weight:700; color:var(--ink); font-size:16.3px;
  }
.dtf-blog-layout details.activity summary::-webkit-details-marker{display:none;}
.dtf-blog-layout details.activity summary .arrow{
    display:inline-flex; align-items:center; justify-content:center;
    width:24px; height:24px; border-radius:50%;
    background:#F5F0E6; color:var(--purple);
    transition:transform .2s ease; flex:0 0 24px; font-size:13.6px;
  }
.dtf-blog-layout details.activity[open] summary .arrow{transform:rotate(180deg);}
.dtf-blog-layout details.activity .activity-body{padding:10px 2px 4px 0; color:var(--ink); max-width:68ch;}
.dtf-blog-layout .btn-row{display:flex; gap:12px; flex-wrap:wrap; margin:22px 0 6px;}
.dtf-blog-layout .btn{display:inline-flex; align-items:center; gap:8px; padding:11px 20px; border-radius:999px; font-weight:700; font-size:14.4px; text-decoration:none; border:2px solid transparent;}
.dtf-blog-layout .btn-primary{background:#F5F0E6; color:var(--ink);}
.dtf-blog-layout .btn-secondary{background:#F5F0E6; color:var(--ink); border-color:#F5F0E6;}
.dtf-blog-layout .practical-cols{display:grid; grid-template-columns:1fr 1fr; gap:0 40px; margin-top:16px;}
.dtf-blog-layout .book-cta{background:var(--purple-dark); border-radius:22px; padding:34px 36px; text-align:center;}
.dtf-blog-layout .book-cta h2, .dtf-blog-layout .book-cta p{color:#fff;}
.dtf-blog-layout .book-cta p{max-width:60ch; margin-left:auto; margin-right:auto; opacity:.92;}
.dtf-blog-layout .book-cta .btn-row{justify-content:center;}
.dtf-blog-layout .btn-light{background:#fff; color:var(--purple-dark);}
.dtf-blog-layout .practical-col h4{font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink); margin-bottom:6px;}
.dtf-blog-layout .practical-row{
    display:flex; align-items:center; gap:14px;
    padding:14px 0; border-bottom:1px solid #E9E2D3;
    text-decoration:none; color:inherit;
  }
.dtf-blog-layout .practical-col .practical-row:last-child{border-bottom:none;}
.dtf-blog-layout .practical-row .sq{
    width:38px; height:38px; border-radius:10px; flex:0 0 38px;
    display:flex; align-items:center; justify-content:center; color:#fff; font-size:16px;
  }
.dtf-blog-layout .practical-row .txt strong{display:block; color:var(--ink); font-size:15.7px;}
.dtf-blog-layout .practical-row .txt span{display:block; color:var(--ink-soft); font-size:13.1px; margin-top:2px;}
.dtf-blog-layout .practical-row .arrow{margin-left:auto; color:#B7AF9F;}
.dtf-blog-layout .faq-item{border-bottom:1px solid var(--line);}
.dtf-blog-layout .faq-item summary{
    list-style:none; cursor:pointer;
    display:flex; align-items:center; justify-content:space-between; gap:16px;
    padding:18px 4px; font-weight:700; font-size:16.8px; color:var(--ink);
  }
.dtf-blog-layout .faq-item summary::-webkit-details-marker{display:none;}
.dtf-blog-layout .faq-item .plus{
    flex:0 0 30px; width:30px; height:30px; border-radius:50%;
    background:#F5F0E6; color:var(--purple);
    display:flex; align-items:center; justify-content:center; font-size:19.2px; font-weight:400;
    transition:transform .2s ease, background .2s ease, color .2s ease;
  }
.dtf-blog-layout .faq-item[open] .plus{transform:rotate(135deg); background:var(--coral); color:#fff;}
.dtf-blog-layout .faq-item .faq-body{padding:0 34px 20px 4px; color:var(--ink-soft); max-width:68ch;}
.dtf-blog-layout aside{padding-bottom:24px;}
.dtf-blog-layout .about-card{
    background:var(--coral);
    border-radius:18px;
    padding:18px 18px 16px; text-align:center;
  }
.dtf-blog-layout .about-photo{
    width:96px; height:96px; margin:0 auto 12px;
    clip-path:polygon(0.00% 1.61%, 7.14% -1.44%, 14.29% 1.51%, 21.43% 4.52%, 28.57% -0.90%, 35.71% -1.80%, 42.86% -3.03%, 50.00% 0.96%, 57.14% -1.79%, 64.29% 3.56%, 71.43% 1.96%, 78.57% -1.84%, 85.71% 2.93%, 92.86% -4.69%, 97.78% 0.00%, 98.03% 7.14%, 99.77% 14.29%, 100.78% 21.43%, 97.89% 28.57%, 97.69% 35.71%, 97.64% 42.86%, 101.74% 50.00%, 102.69% 57.14%, 102.55% 64.29%, 99.13% 71.43%, 100.83% 78.57%, 101.49% 85.71%, 99.05% 92.86%, 100.00% 102.10%, 92.86% 102.15%, 85.71% 96.87%, 78.57% 99.64%, 71.43% 97.81%, 64.29% 103.12%, 57.14% 101.18%, 50.00% 101.85%, 42.86% 97.59%, 35.71% 99.01%, 28.57% 97.35%, 21.43% 101.50%, 14.29% 99.61%, 7.14% 99.46%, -0.64% 100.00%, 3.18% 92.86%, -4.71% 85.71%, -2.50% 78.57%, 1.87% 71.43%, -2.79% 64.29%, 3.18% 57.14%, 3.01% 50.00%, -3.13% 42.86%, 1.16% 35.71%, -1.49% 28.57%, -2.49% 21.43%, -0.30% 14.29%, 2.41% 7.14%);
    background:#fff;
    transform:rotate(-5deg);
    box-shadow:0 8px 18px rgba(0,0,0,0.22);
  }
.dtf-blog-layout .about-photo img{width:100%; height:100%; object-fit:cover; display:block;}
.dtf-blog-layout .about-card .kicker{font-size:10.6px; letter-spacing:.08em; text-transform:uppercase; color:#FBD9D9; margin-bottom:3px; font-weight:700;}
.dtf-blog-layout .about-card h3{font-size:15.7px; margin-bottom:6px; color:#fff;}
.dtf-blog-layout .about-card p{font-size:13.1px; color:#FBE4E4; margin-bottom:10px;}
.dtf-blog-layout .about-card a{font-size:13.6px; font-weight:700; color:#fff; text-decoration:underline; display:inline-block; margin-top:2px;}
.dtf-blog-layout .place-links{margin-top:16px;}
.dtf-blog-layout .place-links .kicker{
    font-size:11.2px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft);
    font-weight:700; margin-bottom:10px;
  }
.dtf-blog-layout .place-links .wrap-pills{display:flex; flex-wrap:wrap; gap:8px 10px;}
.dtf-blog-layout .place-pill{
    background:#F5F0E6; border:1px solid #F5F0E6; color:var(--ink);
    font-weight:700; font-size:13.1px; padding:8px 13px; border-radius:999px; text-decoration:none;
    white-space:nowrap;
  }
.dtf-blog-layout .place-pill:hover{background:var(--line);}
.dtf-blog-layout footer{background:#EFEBE2; padding:30px 0; text-align:center; font-size:13.6px; color:var(--ink-soft); margin-top:40px;}
.dtf-blog-layout .to-top{
    position:fixed; right:22px; bottom:22px; z-index:500;
    width:46px; height:46px; border-radius:12px; border:none;
    background:#F5F0E6; color:var(--ink); cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 6px 16px rgba(43,27,66,0.18);
    opacity:0; transform:translateY(12px); pointer-events:none;
    transition:opacity .25s ease, transform .25s ease, background .2s ease;
  }
.dtf-blog-layout .to-top.show{opacity:1; transform:translateY(0); pointer-events:auto;}
.dtf-blog-layout .to-top:hover{background:var(--line);}
.dtf-blog-layout .gallery{
    display:grid; grid-template-columns:repeat(4, 1fr); grid-auto-rows:110px;
    gap:8px; margin:22px 0 30px; border-radius:16px; overflow:hidden;
  }
.dtf-blog-layout .gallery img{width:100%; height:100%; object-fit:cover; display:block;}
.dtf-blog-layout .gallery .g1{grid-column:span 2; grid-row:span 2;}
.dtf-blog-layout .gallery .g2{grid-column:span 2; grid-row:span 1;}
.dtf-blog-layout .gallery .g3{grid-column:span 1; grid-row:span 1;}
.dtf-blog-layout .gallery .g4{grid-column:span 1; grid-row:span 1;}
.dtf-blog-layout .gallery .g5{grid-column:span 2; grid-row:span 1;}
@media (max-width:640px){
  .dtf-blog-layout .gallery{grid-template-columns:repeat(2, 1fr); grid-auto-rows:120px;}
  .dtf-blog-layout .gallery .g1{grid-column:span 2; grid-row:span 2;}
  .dtf-blog-layout .gallery .g2, .dtf-blog-layout .gallery .g3, .dtf-blog-layout .gallery .g4, .dtf-blog-layout .gallery .g5{grid-column:span 1; grid-row:span 1;}
}
@media (max-width:960px){
  .dtf-blog-layout .hero-grid{grid-template-columns:1fr;}
  .dtf-blog-layout .hex-photo-wrap{max-width:320px; margin:0 auto;}
  .dtf-blog-layout .route-grid{grid-template-columns:1fr;}
  .dtf-blog-layout .content-grid{grid-template-columns:1fr;}
  .dtf-blog-layout .practical-cols{grid-template-columns:1fr;}
  .dtf-blog-layout aside{position:static; max-width:100%;}
  .dtf-blog-layout .wrap{padding:0 20px;}
}
@media (max-width:600px){
  .dtf-blog-layout .topbar{padding-top:16px; padding-bottom:0; flex-wrap:wrap;}
  .dtf-blog-layout .hero{padding-top:20px; padding-bottom:4px;}
  .dtf-blog-layout .hero h1{font-size:27.2px;}
  .dtf-blog-layout .hero .lead{font-size:16px;}
  .dtf-blog-layout .jumpnav{max-width:100%;}
  .dtf-blog-layout .jumpnav a{font-size:12.8px; padding:7px 10px 7px 7px;}
  .dtf-blog-layout main section > h2{font-size:22.4px;}
  .dtf-blog-layout .route-grid{gap:22px;}
  .dtf-blog-layout .dtf-map{height:240px;}
  .dtf-blog-layout .content-grid{gap:36px; padding-top:36px; padding-bottom:50px;}
  .dtf-blog-layout .tipcard-tabs{flex-wrap:wrap;}
  .dtf-blog-layout .tipcard-tab{font-size:12.5px; padding:11px 6px; flex:1 1 33%;}
  .dtf-blog-layout .tipcard-panel{padding:16px;}
  .dtf-blog-layout .practical-row{flex-wrap:wrap;}
  .dtf-blog-layout .practical-row .arrow{display:none;}
  .dtf-blog-layout .practical-row-link .arrow{display:none;}
  .dtf-blog-layout .practical-row-link{padding-left:52px;}
  .dtf-blog-layout .book-cta{padding:26px 20px;}
  .dtf-blog-layout .about-card{padding:22px 16px 20px;}
  .dtf-blog-layout .place-links .wrap-pills{gap:6px;}
  .dtf-blog-layout .place-pill{font-size:12.5px; padding:7px 12px;}
  .dtf-blog-layout .to-top{right:14px; bottom:14px; width:42px; height:42px;}
  .dtf-blog-layout .btn-row{flex-direction:column; align-items:stretch;}
  .dtf-blog-layout .btn-row .btn{text-align:center; justify-content:center;}
}
/* ---------------------------------------------------------------
   Fotogalerij-indelingen: kies per galerij hoe de foto's staan.
   Alle varianten hebben een vaste beeldverhouding, zodat de foto's
   netjes uitlijnen en er nooit een leeg wit vlak overblijft.
   --------------------------------------------------------------- */
.dtf-blog-layout .gallery.gal-1h,
.dtf-blog-layout .gallery.gal-1v{grid-template-columns:1fr; grid-auto-rows:auto;}
.dtf-blog-layout .gallery.gal-2h,
.dtf-blog-layout .gallery.gal-2v,
.dtf-blog-layout .gallery.gal-4h,
.dtf-blog-layout .gallery.gal-4v{grid-template-columns:repeat(2, 1fr); grid-auto-rows:auto;}
.dtf-blog-layout .gallery.gal-3h,
.dtf-blog-layout .gallery.gal-3v{grid-template-columns:repeat(3, 1fr); grid-auto-rows:auto;}

.dtf-blog-layout .gallery[class*="gal-"] > div{grid-column:auto; grid-row:auto;}
.dtf-blog-layout .gallery.gal-1h > div,
.dtf-blog-layout .gallery.gal-2h > div,
.dtf-blog-layout .gallery.gal-3h > div,
.dtf-blog-layout .gallery.gal-4h > div{aspect-ratio:16/10;}
.dtf-blog-layout .gallery.gal-1v > div,
.dtf-blog-layout .gallery.gal-2v > div,
.dtf-blog-layout .gallery.gal-3v > div,
.dtf-blog-layout .gallery.gal-4v > div{aspect-ratio:3/4;}

@media (max-width:640px){
  .dtf-blog-layout .gallery.gal-3h,
  .dtf-blog-layout .gallery.gal-3v{grid-template-columns:repeat(2, 1fr);}
  .dtf-blog-layout .gallery.gal-2h,
  .dtf-blog-layout .gallery.gal-2v{grid-template-columns:1fr;}
}

/* ---------------------------------------------------------------
   Ruimte bovenaan, zodat het logo/de header van het thema nooit
   over de broodkruimels of de titel valt.
   --------------------------------------------------------------- */
.dtf-blog-layout{padding-top:32px;}
.dtf-blog-layout .topbar{padding-top:8px;}
@media (max-width:640px){
  .dtf-blog-layout{padding-top:20px;}
}

/* ===============================================================
   RUIMER EN GROTER (stijl van een bestemmingspagina)
   Bredere pagina, grotere letters en meer witruimte, zodat de blog
   net zo rustig en duidelijk leest als de bestemmingspagina's.
   =============================================================== */
.dtf-blog-layout{font-size:18px; line-height:1.75;}
.dtf-blog-layout .wrap{max-width:1240px; padding:0 32px;}

/* twee kolommen: bredere tekstkolom en een ruimere zijbalk */
.dtf-blog-layout .content-grid{grid-template-columns:minmax(0,1fr) 360px; gap:64px; padding-top:44px; padding-bottom:80px;}
.dtf-blog-layout main p{max-width:78ch;}
.dtf-blog-layout main ul.plain{max-width:78ch;}
.dtf-blog-layout .inline-note{font-size:16px; max-width:78ch;}
.dtf-blog-layout details.activity .activity-body{max-width:78ch;}

/* koppen groter en duidelijker */
.dtf-blog-layout .hero h1{font-size:49.6px;}
.dtf-blog-layout .hero .lead{font-size:19.5px; max-width:60ch;}
.dtf-blog-layout main section > h2{font-size:34.4px; margin-bottom:.55em;}
.dtf-blog-layout .day-section h3{font-size:21.6px;}
.dtf-blog-layout details.activity summary{font-size:17.9px;}

/* tabkaart met tips iets ruimer */
.dtf-blog-layout .tipcard-panel p,
.dtf-blog-layout .tipcard-panel ul{font-size:16px;}
.dtf-blog-layout .tipcard-tab{font-size:15.2px; padding:15px 10px;}

/* meer lucht tussen de secties */
.dtf-blog-layout main section{margin-bottom:38px;}
.dtf-blog-layout hr.sep{margin:38px 0;}


/* eigen paginasjabloon: geen extra kaders van het thema eromheen */
.dtf-blog-standalone{width:100%; max-width:100%; margin:0; padding-top:0;}

@media (max-width:1100px){
  .dtf-blog-layout .content-grid{grid-template-columns:minmax(0,1fr) 300px; gap:40px;}
}
@media (max-width:900px){
  .dtf-blog-layout{font-size:17px;}
  .dtf-blog-layout .content-grid{grid-template-columns:1fr; gap:0;}
  .dtf-blog-layout aside{position:static;}
  .dtf-blog-layout .hero h1{font-size:33.6px;}
  .dtf-blog-layout main section > h2{font-size:27.2px;}
}

/* kopblok per sectie: klein kopje, titel, introzin (als op de bestemmingspagina's) */
.dtf-blog-layout .section-kicker{
    font-size:12.5px; letter-spacing:.12em; text-transform:uppercase;
    color:var(--ink-soft); font-weight:700; margin:0 0 .35em; max-width:none;
  }
.dtf-blog-layout .section-intro{
    font-size:17.6px; color:var(--ink-soft); max-width:70ch; margin:0 0 1.6em;
  }
.dtf-blog-layout .book-cta .section-kicker,
.dtf-blog-layout .book-cta .section-intro{color:rgba(255,255,255,.85);}

/* ===============================================================
   Meer ruimte tot de rand (zoals op de bestemmingspagina's)
   =============================================================== */
.dtf-blog-layout .wrap{padding-left:64px; padding-right:64px;}
.dtf-blog-layout .topbar{padding-left:64px; padding-right:64px;}
@media (max-width:1100px){
  .dtf-blog-layout .wrap{padding-left:40px; padding-right:40px;}
  .dtf-blog-layout .topbar{padding-left:40px; padding-right:40px;}
}
@media (max-width:640px){
  .dtf-blog-layout .wrap{padding-left:22px; padding-right:22px;}
  .dtf-blog-layout .topbar{padding-left:22px; padding-right:22px;}
}

/* ===============================================================
   Kaart-pinnetjes: wit label met paarse tekst en witte omlijsting,
   net als op de bestemmingspagina van Bali.
   =============================================================== */
.dtf-blog-layout .dtf-map-tooltip{
    background:#fff !important;
    color:var(--purple) !important;
    border:2px solid #fff !important;
    border-radius:999px !important;
    padding:5px 14px !important;
    font-weight:700;
    box-shadow:0 3px 12px rgba(0,0,0,.18) !important;
  }
.dtf-blog-layout .dtf-map-tooltip::before{
    border-top-color:#fff !important;
    border-bottom-color:#fff !important;
  }

/* ===============================================================
   Zijbalk gegarandeerd NAAST de tekst.
   WordPress voegt soms een leeg tekstblokje tussen de hoofdtekst en
   de zijbalk toe; dat schoof de zijbalk naar de volgende rij (en dus
   onderaan de pagina). Daarom zetten we de plaatsing hier vast en
   negeren we lege blokjes.
   =============================================================== */
.dtf-blog-layout .content-grid > main{grid-column:1; grid-row:1;}
.dtf-blog-layout .content-grid > aside{grid-column:2; grid-row:1;}
.dtf-blog-layout .content-grid > p:empty,
.dtf-blog-layout .content-grid > br{display:none !important;}

/* iets bredere tekstkolom */
.dtf-blog-layout .content-grid{grid-template-columns:minmax(0,1fr) 320px; gap:48px;}

@media (max-width:900px){
  .dtf-blog-layout .content-grid > main,
  .dtf-blog-layout .content-grid > aside{grid-column:1; grid-row:auto;}
}

/* ===============================================================
   Tekstgroottes vastgezet in pixels.
   Het thema zet de basismaat van de site heel klein; daardoor werden
   onze maten gehalveerd. Hieronder staan ze hard vast, zodat de blog
   er altijd hetzelfde uitziet, ongeacht het thema.
   =============================================================== */
.dtf-blog-layout{font-size:18px !important; line-height:1.75;}
.dtf-blog-layout p,
.dtf-blog-layout li,
.dtf-blog-layout .activity-body,
.dtf-blog-layout .faq-body{font-size:18px !important;}
.dtf-blog-layout .hero h1{font-size:50px !important;}
.dtf-blog-layout .hero .lead{font-size:20px !important;}
.dtf-blog-layout main section > h2{font-size:34px !important;}
.dtf-blog-layout .day-section h3{font-size:22px !important;}
.dtf-blog-layout details.activity summary{font-size:18px !important;}
.dtf-blog-layout .faq-item summary{font-size:18px !important;}
.dtf-blog-layout .tipcard-tab{font-size:16px !important;}
.dtf-blog-layout .tipcard-panel p,
.dtf-blog-layout .tipcard-panel ul,
.dtf-blog-layout .tipcard-panel li{font-size:17px !important;}
.dtf-blog-layout .tipcard-panel h4{font-size:12px !important;}
.dtf-blog-layout .inline-note{font-size:17px !important;}
.dtf-blog-layout .section-kicker{font-size:13px !important;}
.dtf-blog-layout .section-intro{font-size:19px !important;}
.dtf-blog-layout .crumb-pill,
.dtf-blog-layout .jumpnav a{font-size:15px !important;}
.dtf-blog-layout .place-pill{font-size:15px !important;}
.dtf-blog-layout .about-card p{font-size:16px !important;}
.dtf-blog-layout .about-card h3{font-size:22px !important;}
.dtf-blog-layout .place-links .kicker,
.dtf-blog-layout .about-card .kicker{font-size:12px !important;}
.dtf-blog-layout .practical-row strong{font-size:17px !important;}
.dtf-blog-layout .practical-row .txt span{font-size:15px !important;}
.dtf-blog-layout .practical-col h4{font-size:19px !important;}
.dtf-blog-layout .map-caption{font-size:15px !important;}
.dtf-blog-layout .day-reistijd{font-size:14px !important;}
.dtf-blog-layout .btn{font-size:16px !important;}
.dtf-blog-layout .book-cta h2{font-size:30px !important;}

/* ===============================================================
   Ruimte links voor het logo van het thema, dat vast bovenaan blijft
   staan en anders over de tekst valt.
   =============================================================== */
@media (min-width:992px){
  .dtf-blog-layout .wrap,
  .dtf-blog-layout .topbar{padding-left:130px; padding-right:130px;}
}
@media (min-width:640px) and (max-width:991px){
  .dtf-blog-layout .wrap,
  .dtf-blog-layout .topbar{padding-left:40px; padding-right:40px;}
}
@media (max-width:639px){
  .dtf-blog-layout .wrap,
  .dtf-blog-layout .topbar{padding-left:22px; padding-right:22px;}
  .dtf-blog-layout .hero h1{font-size:32px !important;}
  .dtf-blog-layout main section > h2{font-size:25px !important;}
}

/* ===============================================================
   Laatste correcties
   =============================================================== */

/* Koppen netjes over twee regels verdelen in plaats van één los woord
   op de tweede regel ("... via Van Verre", "Wij zijn Rowan & Rony"). */
.dtf-blog-layout .book-cta h2,
.dtf-blog-layout .about-card h3,
.dtf-blog-layout .hero h1,
.dtf-blog-layout main section > h2{text-wrap:balance;}

/* Knoppen: blijven beige bij eroverheen zweven (het thema maakte ze zwart). */
.dtf-blog-layout .btn-primary,
.dtf-blog-layout .btn-primary:hover,
.dtf-blog-layout .btn-primary:focus,
.dtf-blog-layout .btn-secondary,
.dtf-blog-layout .btn-secondary:hover,
.dtf-blog-layout .btn-secondary:focus{
    background:#F5F0E6 !important; color:var(--ink) !important;
    border-color:#F5F0E6 !important; text-decoration:none;
  }
.dtf-blog-layout .btn-primary:hover,
.dtf-blog-layout .btn-secondary:hover{background:#EFE8D8 !important;}
.dtf-blog-layout .btn-light,
.dtf-blog-layout .btn-light:hover,
.dtf-blog-layout .btn-light:focus{background:#fff !important; color:var(--purple-dark) !important;}

/* Praktische tips: compacte opzet zoals op de bestemmingspagina's. */
.dtf-blog-layout .practical-cols{gap:0 48px; margin-top:20px;}
.dtf-blog-layout .practical-col h4{
    font-size:13px !important; letter-spacing:.1em; text-transform:uppercase;
    color:var(--purple); margin:0 0 4px;
  }
.dtf-blog-layout .practical-row{
    display:flex; align-items:center; gap:14px;
    padding:14px 0; border-bottom:1px solid #EDE7DA;
  }
.dtf-blog-layout .practical-row .sq{
    width:42px; height:42px; flex:0 0 42px; border-radius:12px;
    display:flex; align-items:center; justify-content:center; color:#fff;
  }
.dtf-blog-layout .practical-row .sq .ic{width:21px; height:21px;}
.dtf-blog-layout .practical-row .txt{display:block; min-width:0;}
.dtf-blog-layout .practical-row .txt strong{
    display:block; color:var(--ink); font-size:17px !important;
    font-weight:700; line-height:1.35;
  }
.dtf-blog-layout .practical-row .txt span{
    display:block; color:var(--ink-soft); font-size:15px !important;
    line-height:1.45; margin-top:2px;
  }
.dtf-blog-layout .practical-row .arrow{
    margin-left:auto; color:#C6BDAA; font-size:18px; flex:0 0 auto; padding-left:10px;
  }
.dtf-blog-layout .practical-row:hover .arrow{color:var(--purple);}

/* Praktische tips: regel zonder link (geen pijltje, niet klikbaar) en een
   regel met meerdere links (elk met een eigen pijltje, onder elkaar). */
.dtf-blog-layout .practical-row-static{cursor:default;}
.dtf-blog-layout .practical-row-links{
    display:flex; flex-direction:column;
    padding:0 0 14px; border-bottom:1px solid #EDE7DA;
  }
.dtf-blog-layout .practical-col .practical-row-links:last-child{border-bottom:none;}
.dtf-blog-layout .practical-row-link{
    display:flex; align-items:center; gap:8px;
    padding:6px 0 6px 56px; text-decoration:none;
    color:var(--purple); font-size:15px; font-weight:600;
  }
.dtf-blog-layout .practical-row-link:hover{color:var(--purple-dark, var(--purple));}
.dtf-blog-layout .practical-row-link .arrow{color:#C6BDAA; font-size:16px;}
.dtf-blog-layout .practical-row-link:hover .arrow{color:var(--purple);}

/* Icoontjes altijd zichtbaar op de juiste maat. */
.dtf-blog-layout .ic{display:inline-block; width:60%; height:60%;}
.dtf-blog-layout .jumpnav a .ico .ic{width:15px; height:15px;}
.dtf-blog-layout .tipcard-dot .ic{width:14px; height:14px;}

/* Zijbalk loopt mee tijdens het scrollen. */
.dtf-blog-layout .content-grid{align-items:start;}

/* ===============================================================
   Zijbalk: loopt in zijn geheel mee en blijft leesbaar.
   Het blok wordt iets compacter zodat "Over ons" én "Andere plekken"
   samen in beeld passen; past het toch niet (klein scherm), dan kun
   je binnen de zijbalk verder scrollen.

   BELANGRIJK: het thema heeft een vaste (position:fixed) menubalk
   bovenaan (#masthead, hoogte 60px). Stond de "top" van de zijbalk
   lager dan die 60px, dan schoof de bovenkant van het rode blok (en
   de foto erin) omhoog tót ónder die menubalk en werd een stuk ervan
   onzichtbaar zodra je verder naar beneden scrolde. Daarom staat de
   top hieronder ruim boven de 60px van de menubalk, met nog een
   halve centimeter (ca. 19px) wit erboven. Is de WordPress-adminbalk
   zichtbaar (ingelogde weergave), dan schuift de menubalk zelf 32px
   naar beneden; de regel daaronder telt die 32px erbij op zodat het
   ook dan klopt.
   =============================================================== */
.dtf-blog-layout aside{
    position:sticky;
    top:79px;
    align-self:start;
    overflow:visible;
  }
body.admin-bar .dtf-blog-layout aside{
    top:111px;
  }

/* compacter "over ons"-kaartje */
.dtf-blog-layout .about-card{padding:22px 22px 20px;}
.dtf-blog-layout .about-photo{max-width:120px; margin:0 auto 12px;}
.dtf-blog-layout .about-card h3{font-size:20px !important; margin-bottom:.4em;}
.dtf-blog-layout .about-card p{font-size:15px !important; line-height:1.55; margin-bottom:14px;}
.dtf-blog-layout .about-card .kicker{margin-bottom:4px;}
.dtf-blog-layout .place-links{margin-top:16px;}
.dtf-blog-layout .place-links .wrap-pills{gap:8px;}
.dtf-blog-layout .place-pill{padding:8px 14px;}

@media (max-width:900px){
  .dtf-blog-layout aside{position:static;}
}

/* Vinkje "automatisch meescrollen" uit: zijbalk blijft gewoon op zijn
   plek staan en scrollt normaal mee met de rest van de tekst. */
.dtf-blog-layout aside.dtf-aside-static{position:static !important;}

/* Het thema zet zelf overflow:hidden op #content (de wrapper om de hele
   pagina). Daardoor kan een "sticky" element er nooit in blijven hangen,
   wat we in de zijbalk ook instellen. Dit zetten we alleen terug op
   reisblog-pagina's, dus de rest van de site verandert niet. */
body.single-dtf_reisblog #content{overflow:visible !important;}



/* ===============================================================
   Menu bovenaan: compacter, zodat de vijf knopjes op maximaal
   twee regels passen.
   =============================================================== */
.dtf-blog-layout .hero-grid{grid-template-columns:1.15fr 1fr;}
.dtf-blog-layout .jumpnav{gap:9px;}
.dtf-blog-layout .jumpnav a{
    font-size:14px !important;
    padding:6px 13px 6px 6px;
    gap:8px;
  }
.dtf-blog-layout .jumpnav a .ico{width:24px; height:24px; flex:0 0 24px;}
.dtf-blog-layout .jumpnav a .ico .ic{width:13px; height:13px;}

/* menu-knopjes bovenaan: beige achtergrond */
.dtf-blog-layout .jumpnav a{background:#F5F0E6; border-color:#F5F0E6;}
.dtf-blog-layout .jumpnav a:hover{background:#EFE8D8; border-color:#EFE8D8;}

/* geen dubbele lijn onder de laatste vraag */
.dtf-blog-layout .faq-item:last-of-type{border-bottom:none;}

/* minder witruimte over de hele pagina */
.dtf-blog-layout{padding-top:12px;}
.dtf-blog-layout .topbar{padding-top:0;}
.dtf-blog-layout .hero{padding-top:14px; padding-bottom:4px;}
.dtf-blog-layout .hero-grid{align-items:start;}
.dtf-blog-layout .hero-right{margin-top:0;}
.dtf-blog-layout .hex-photo-wrap{margin-top:0;}
.dtf-blog-layout .content-grid{padding-top:24px; padding-bottom:56px;}
.dtf-blog-layout main section{margin-bottom:24px;}
.dtf-blog-layout hr.sep{margin:24px 0;}
.dtf-blog-layout .gallery{margin:16px 0 20px;}
.dtf-blog-layout main p{margin:0 0 .85em;}

/* zijbalk compacter, zodat alles (ook de laatste plaatsen) meescrollt en in beeld blijft */
.dtf-blog-layout .about-card{padding:18px 18px 16px;}
.dtf-blog-layout .about-photo{width:92px !important; height:92px !important; margin:0 auto 10px;}
.dtf-blog-layout .about-card .kicker{font-size:11px !important; margin-bottom:2px;}
.dtf-blog-layout .about-card h3{font-size:17px !important; margin-bottom:.35em;}
.dtf-blog-layout .about-card p{font-size:13.5px !important; line-height:1.5; margin-bottom:10px;}
.dtf-blog-layout .about-card a{font-size:14px;}
.dtf-blog-layout .place-links{margin-top:14px;}
.dtf-blog-layout .place-links .kicker{font-size:11px !important; margin-bottom:8px;}
.dtf-blog-layout .place-links .wrap-pills{gap:7px;}
.dtf-blog-layout .place-pill{font-size:13.5px !important; padding:6px 12px;}