/* ==========================================================================
   azie-vakantie.nl – hoofdstylesheet
   Opbouw: 1. tokens  2. basis  3. layout  4. componenten  5. secties  6. responsive
   Geen framework: één klein CSS-bestand = snelle laadtijd.
   ========================================================================== */


/* 0. Lettertypes - op de eigen server (geen verbinding met Google, AVG-proof) ----
   Playfair Display (koppen) en Manrope (tekst), variabel: een bestand per schrift.
   latin-ext wordt alleen geladen als een pagina zulke tekens bevat. */
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400 900; font-display: swap;
    src: url('../fonts/manrope-latin-ext-wght-normal.woff2') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400 900; font-display: swap;
    src: url('../fonts/manrope-latin-wght-normal.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 400 900; font-display: swap;
    src: url('../fonts/playfair-display-latin-ext-wght-normal.woff2') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 400 900; font-display: swap;
    src: url('../fonts/playfair-display-latin-wght-normal.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Playfair Display'; font-style: italic; font-weight: 400 900; font-display: swap;
    src: url('../fonts/playfair-display-latin-ext-wght-italic.woff2') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Playfair Display'; font-style: italic; font-weight: 400 900; font-display: swap;
    src: url('../fonts/playfair-display-latin-wght-italic.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

/* 1. Design tokens ------------------------------------------------------- */
:root {
    /* Kleurthema "Lakrood & goud" (standaard). Andere thema's: html.theme-… verderop. */
    --navy:        #241a22;   /* inkt: koppen en donkere vlakken */
    --navy-2:      #3a2530;
    --teal:        #1f7a64;   /* jade: links */
    --accent:      #c0392b;   /* vermiljoen/lakrood: knoppen */
    --accent-dark: #922b21;
    --gold:        #d9a441;   /* goud */
    --sand:        #faf3e6;   /* rijstpapier */
    --ink:         #2a2126;
    --muted:       #6b5f63;
    --line:        #eadfcd;
    --card-ink:    #2a2126;   /* tekst in kaarten (ook op donkere blokken) */
    --card-muted:  #6b5f63;
    --card-line:   #eadfcd;
    --card-heading: var(--heading);  /* koppen in kaarten */
    --card-link:   var(--teal);
    --accent-text: var(--accent-dark); /* accentkleur voor tekst */
    /* Kleuren van de hero-illustratie */
    --sky-1: #1a1020; --sky-2: #4a1f35; --sky-3: #b0413e; --sky-4: #e8854a; --sky-5: #f7c877;
    --mount-far: #7a3b4a; --mount-mid: #4a2233; --mount-near: #2a1420; --water-1: #c35a4a; --water-2: #3a1a2a;
    --white:       #ffffff;
    --teal-deep:   #1f6b58;   /* vaste tint voor verlopen (ook in donkere modus) */
    --surface:     #ffffff;   /* kaarten, invoervelden */
    --heading:     var(--navy);
    --header-bg:   rgba(255,255,255,.92);

    --font-body:    'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-display: 'Playfair Display', Georgia, serif;

    --radius:    20px;
    --radius-sm: 10px;
    --shadow:    0 1px 2px rgba(28,31,59,.06), 0 8px 24px rgba(28,31,59,.08);
    --shadow-lg: 0 2px 4px rgba(28,31,59,.06), 0 22px 48px rgba(28,31,59,.18);
    --ease:      cubic-bezier(.2,.7,.2,1);
    --container: 1180px;
}

/* 2. Basis -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition: none !important; animation: none !important; }
}
body {
    margin: 0;
    font: 400 1.0625rem/1.65 var(--font-body);
    color: var(--ink);
    background: var(--white);
    -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--teal); text-decoration-thickness: 1px; text-underline-offset: 3px; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 700; line-height: 1.15; color: var(--heading); margin: 0 0 .5em; letter-spacing: -.01em; }
h1 { font-size: clamp(2.25rem, 5.5vw, 4rem); }
h1, h2, h3 { text-wrap: balance; }            /* koppen evenwichtig verdelen over de regels */
.lead, .prose p { text-wrap: pretty; }          /* geen los woord op de laatste regel */
h2 { font-size: clamp(1.75rem, 3.2vw, 2.4rem); }
h3 { font-size: 1.3rem; }
p  { margin: 0 0 1em; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: 1rem; top: -3rem; background: var(--navy); color: #fff; padding: .6rem 1rem; border-radius: 8px; z-index: 100; }
.skip-link:focus { top: 1rem; }
.hp { position: absolute; left: -9999px; }   /* honeypot */

/* 3. Layout ------------------------------------------------------------- */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.narrow    { max-width: 760px; }
.center    { text-align: center; }
.section      { padding: clamp(56px, 8vw, 104px) 0; }
.section-tint { background: var(--sand); }
.section-head { max-width: 680px; margin-bottom: 40px; }
.section-head p { color: var(--muted); font-size: 1.125rem; }
/* Sectiekop over de volle breedte: kop op één regel, toelichting eronder */
.section .section-head:has(> div) { max-width: none; }
.section .section-head:has(> div) h2 { margin: 0 0 .45em; text-wrap: balance; }
.section .section-head:has(> div) > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px 40px; }
.section .section-head:has(> div) p { margin: 0; font-size: 1.0625rem; }
.section .section-head:has(> div) .link-arrow { flex-shrink: 0; }
@media (min-width: 1000px) {
    .section .section-head:has(> div) h2 { white-space: nowrap; }   /* desktop: kop nooit afbreken */
}
.section-head-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; max-width: none; }
.section-title { margin-bottom: 32px; }

/* Het 3-koloms raster: 3 → 2 → 1 kolom (zie responsive) */
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }

/* 4. Componenten -------------------------------------------------------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5em;
    padding: .8em 1.4em; border-radius: 999px; border: 2px solid transparent;
    font: 600 1rem/1 var(--font-body); text-decoration: none; cursor: pointer;
    transition: transform .2s var(--ease), background-color .2s, box-shadow .2s, color .2s;
}
.btn:hover { transform: translateY(-2px); }
.btn-accent { background: var(--accent); color: #fff; box-shadow: 0 6px 18px rgba(214,69,51,.32); }
.btn-accent:hover { background: var(--accent-dark); color: #fff; }
.btn-ghost  { border-color: rgba(255,255,255,.7); color: #fff; }
.btn-ghost:hover { background: #fff; color: var(--navy); }
.btn-lg { padding: 1em 1.7em; font-size: 1.0625rem; }
.btn-sm { padding: .6em 1.1em; font-size: .9375rem; }

.eyebrow { text-transform: uppercase; letter-spacing: .12em; font-size: .8125rem; font-weight: 600; color: var(--accent); margin-bottom: 1rem; }
.lead    { font-size: clamp(1.0625rem, 1.6vw, 1.25rem); color: var(--muted); }
.badge {
    position: absolute; top: 14px; left: 14px; z-index: 1;
    /* Donker label met witte tekst: altijd goed zichtbaar, ook op witte logo's */
    background: var(--navy); color: #fff;
    font-size: .75rem; font-weight: 600; letter-spacing: .02em;
    padding: .4em .9em; border-radius: 999px;
    border: 1px solid rgba(255,255,255,.25);
    box-shadow: 0 2px 6px rgba(28,31,59,.25), 0 6px 16px rgba(28,31,59,.18);
}
.badge-accent { background: var(--accent); color: #fff; border-color: rgba(255,255,255,.4); }
.tag { display: inline-block; background: var(--sand); color: var(--teal); font-weight: 600; font-size: .75rem; padding: .25em .7em; border-radius: 999px; margin-right: .4em; }
.meta { font-size: .875rem; color: var(--muted); margin-bottom: .6rem; }
.link-arrow { font-weight: 600; text-decoration: none; white-space: nowrap; }
.link-arrow span, .aff-cta span, .read-more span { display: inline-block; transition: transform .25s var(--ease); }
.link-arrow:hover span { transform: translateX(4px); }
.empty { color: var(--muted); font-style: italic; }
.notice { background: #fff4e5; border: 1px solid #f7c58c; color: #7a4a10; padding: .6rem 1rem; border-radius: var(--radius-sm); }

/* Header / navigatie */
.site-header {
    position: sticky; top: 0; z-index: 50;
    background: var(--header-bg); backdrop-filter: saturate(1.4) blur(10px);
    border-bottom: 1px solid transparent; transition: border-color .2s, box-shadow .2s;
}
.site-header.is-scrolled { border-color: var(--line); box-shadow: 0 4px 20px rgba(28,31,59,.06); }
.header-inner { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--heading); font: 600 1.25rem/1 var(--font-display); }
.logo strong { color: var(--accent-text); font-weight: 700; }
.logo-mark { width: 34px; height: 34px; color: var(--heading); }
.logo-light { color: #fff; }
.site-nav { display: flex; align-items: center; gap: 28px; }
.site-nav a:not(.btn) { color: var(--ink); text-decoration: none; font-weight: 500; font-size: .9875rem; position: relative; }
.site-nav a:not(.btn)::after { content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: var(--accent); transform: scaleX(0); transition: transform .25s var(--ease); }
.site-nav a:not(.btn):hover::after, .site-nav a[aria-current]::after { transform: scaleX(1); }
.nav-toggle { display: none; }

/* 5. Secties ------------------------------------------------------------ */

/* Hero */
.hero { position: relative; color: #fff; padding: clamp(80px, 13vw, 170px) 0 0; overflow: hidden; background: var(--navy); }
.hero-bg { position: absolute; inset: 0; overflow: hidden; }
.hero-svg { position: absolute; right: 0; bottom: 0; width: 100%; height: 100%; }
.hero-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(28,31,59,.88) 0%, rgba(28,31,59,.55) 45%, rgba(28,31,59,.05) 80%); }
/* Tip: liever een eigen foto? Vervang in index.php de hero-art door <img src="/assets/img/hero.webp" class="hero-svg" alt=""> en voeg object-fit: cover toe. */
.hero-content { position: relative; max-width: var(--container); }
.hero-content > * { max-width: 640px; }
.hero h1 { color: #fff; }
.hero h1 em { font-style: italic; color: var(--gold); }
.hero .lead { color: rgba(255,255,255,.88); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 2rem; }

/* ---------- Hero-animatie: rustig zweven, zelfde stijl ---------- */
.h-cloud  { animation: drift 26s ease-in-out infinite alternate; }
.h-cloud-2 { animation-duration: 34s; animation-delay: -8s; }
.h-cloud-3 { animation-duration: 22s; animation-delay: -14s; }
.h-sun    { transform-box: fill-box; transform-origin: center; animation: glow 7s ease-in-out infinite; }
.h-birds  { animation: birds 16s ease-in-out infinite; }
.h-boat   { animation: bob 3.2s ease-in-out infinite; }
.h-plane  { animation: fly 38s linear infinite; }
.h-shimmer { animation: shimmer 4s ease-in-out infinite; }
.h-lantern { transform-box: fill-box; animation: lantern 16s linear infinite; opacity: 0; }
.h-l1 { animation-delay: -3s; animation-duration: 19s; } .h-l2 { animation-delay: -7s; } .h-l3 { animation-delay: -11s; animation-duration: 21s; }
.h-l4 { animation-delay: -5s; animation-duration: 18s; } .h-l5 { animation-delay: -13s; }
@keyframes fly     { from { transform: translateX(-900px); } to { transform: translateX(500px); } }
@keyframes shimmer { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes lantern { 0% { transform: translate(0, 120px); opacity: 0; } 12% { opacity: 1; } 80% { opacity: .9; } 100% { transform: translate(40px, -380px); opacity: 0; } }
@keyframes drift { from { transform: translateX(-70px); } to { transform: translateX(70px); } }
@keyframes glow  { 0%, 100% { transform: scale(1); opacity: .9; } 50% { transform: scale(1.07); opacity: 1; } }
@keyframes birds { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-40px, -14px); } }
@keyframes road  { to { stroke-dashoffset: -48; } }
@keyframes bob   { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-4px) rotate(-1deg); } }

/* Zwevende bestemmingslabels */
.hero-floats { position: absolute; inset: 0; left: 0; right: 0; pointer-events: none; }
.float-pill {
    position: absolute; display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 16px 9px 12px; border-radius: 999px;
    background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.28);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    color: #fff; font-weight: 600; font-size: .9375rem; white-space: nowrap;
    box-shadow: 0 10px 30px rgba(22,25,54,.25);
}
.float-pill i { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(214,69,51,.3); }
.float-pill small { font-weight: 400; opacity: .75; font-size: .8125rem; }
.fp-1 { top: 17%; right: 17%; }
.fp-2 { top: 33%; right: 2%; }
.fp-3 { top: 54%; right: 21%; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

/* Tekst schuift rustig in bij het laden */
.hero-content > * { animation: rise .8s var(--ease) both; }
.hero-content > :nth-child(2) { animation-delay: .08s; }
.hero-content > :nth-child(3) { animation-delay: .16s; }
.hero-content > :nth-child(4) { animation-delay: .24s; }
.float-pill { animation-name: float, fadein; animation-duration: 6s, 1s; animation-timing-function: ease-in-out, ease; animation-iteration-count: infinite, 1; }
.fp-2 { animation-duration: 7s, 1s; animation-delay: -2s, .3s; }
.fp-3 { animation-duration: 6.5s, 1s; animation-delay: -4s, .5s; }
@keyframes rise   { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }

/* Kerncijfers */
.stats {
    position: relative; margin: clamp(56px, 9vw, 110px) 0 0; padding: 22px 8px;
    display: grid; grid-template-columns: repeat(3, 1fr);
    background: var(--surface); color: var(--ink); border-radius: var(--radius) var(--radius) 0 0;
    box-shadow: 0 -10px 30px rgba(0,0,0,.12);
}
.stats div { text-align: center; padding: 0 12px; }
.stats div + div { border-left: 1px solid var(--line); }
.stats dt { font-size: .8125rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.stats dd { margin: 0; font: 700 2rem/1.2 var(--font-display); color: var(--heading); }

/* Affiliate-kaarten: subtiele hover die uitnodigt tot klikken */
.aff-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s; }
.aff-card:hover, .aff-card:focus-within { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--accent); }
.aff-link { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; }
.aff-media { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--sand); }
.aff-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.aff-card:hover .aff-media img { transform: scale(1.06); }
.aff-placeholder { height: 100%; display: grid; place-items: center; background: linear-gradient(135deg, var(--navy) 0%, var(--teal-deep) 100%); transition: transform .6s var(--ease); }
.aff-placeholder span { font: 700 4rem/1 var(--font-display); color: rgba(255,255,255,.9); }
.aff-card:hover .aff-placeholder { transform: scale(1.06); }
.aff-body { padding: 22px 24px 24px; display: flex; flex-direction: column; flex: 1; }
.aff-body p { color: var(--muted); font-size: .975rem; flex: 1; }
.aff-cta { font-weight: 600; color: var(--accent-text); }
.aff-card:hover .aff-cta span { transform: translateX(5px); }

/* Affiliate-afbeelding verkleinen (Admin → Affiliates → schuifje). Vaste klassen i.p.v. inline style (CSP). */
.aff-media.is-fit { display: flex; align-items: center; justify-content: center; }
.aff-media.is-fit img { object-fit: contain; }
.aff-media.s30 img { width: 30%; height: 30%; }
.aff-media.s35 img { width: 35%; height: 35%; }
.aff-media.s40 img { width: 40%; height: 40%; }
.aff-media.s45 img { width: 45%; height: 45%; }
.aff-media.s50 img { width: 50%; height: 50%; }
.aff-media.s55 img { width: 55%; height: 55%; }
.aff-media.s60 img { width: 60%; height: 60%; }
.aff-media.s65 img { width: 65%; height: 65%; }
.aff-media.s70 img { width: 70%; height: 70%; }
.aff-media.s75 img { width: 75%; height: 75%; }
.aff-media.s80 img { width: 80%; height: 80%; }
.aff-media.s85 img { width: 85%; height: 85%; }
.aff-media.s90 img { width: 90%; height: 90%; }
.aff-media.s95 img { width: 95%; height: 95%; }
.aff-media.bg-wit   { background: #ffffff; }
.aff-media.bg-zand  { background: var(--sand); }
.aff-media.bg-grijs { background: #eef1f4; }
.aff-media.bg-navy  { background: var(--navy); }

/* Thema-kaarten */
.theme-card { background: var(--surface); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); display: flex; flex-direction: column; }
.theme-media { position: relative; aspect-ratio: 3 / 2; overflow: hidden; }
.theme-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.theme-card:hover .theme-media img { transform: scale(1.05); }
.theme-body { padding: 22px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.theme-body p { color: var(--muted); flex: 1; }

/* Blogkaarten */
.post-card a { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; }
.post-media { aspect-ratio: 16 / 10; border-radius: var(--radius); overflow: hidden; background: var(--sand); margin-bottom: 18px; }
.post-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.post-placeholder { height: 100%; background: linear-gradient(135deg, #f7e0c7, #cfe3e5); }
.post-card:hover .post-media img { transform: scale(1.05); }
.post-card h3 { transition: color .2s; }
.post-card:hover h3 { color: var(--teal); }
.post-body p:not(.meta) { color: var(--muted); }
.read-more { font-weight: 600; color: var(--teal); margin-top: auto; }
.post-card:hover .read-more span { transform: translateX(4px); }

.pagination { display: flex; justify-content: center; gap: 8px; margin-top: 48px; }
.pagination a { min-width: 44px; height: 44px; display: grid; place-items: center; border-radius: 999px; border: 1px solid var(--line); text-decoration: none; color: var(--ink); font-weight: 600; }
.pagination a[aria-current] { background: var(--navy); color: #fff; border-color: var(--navy); }

/* Subpagina-kop */
.page-hero { background: var(--sand); padding: clamp(48px, 7vw, 88px) 0 clamp(36px, 5vw, 56px); }

/* Artikel */
.article-head { background: var(--sand); padding: clamp(40px, 6vw, 72px) 0 clamp(80px, 10vw, 120px); }
/* Kop van een artikel: lijnt uit met de omslagfoto en gebruikt de breedte beter */
.article-head-inner > * { max-width: 980px; }
.article-head h1 { font-size: clamp(2.2rem, 4.4vw, 3.6rem); line-height: 1.1; margin-bottom: .45em; }
.article-head .lead { max-width: 820px; }
/* Zonder omslagfoto: kop uitlijnen met de tekst eronder en minder witruimte */
.article-head:not(.has-cover) { padding-bottom: clamp(40px, 5vw, 64px); }
.article-head:not(.has-cover) .article-head-inner { max-width: 760px; }
.breadcrumbs { font-size: .875rem; color: var(--muted); margin-bottom: 1rem; }
.breadcrumbs a { color: var(--muted); }
.breadcrumbs [aria-current] { color: inherit; opacity: .85; }
.breadcrumbs span[aria-current] { display: inline-block; max-width: 32ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.article-cover { margin: clamp(-100px, -8vw, -60px) auto 0; }
.article-cover img { width: 100%; border-radius: var(--radius); box-shadow: var(--shadow-lg); aspect-ratio: 16 / 9; object-fit: cover; }
.prose { padding-top: 48px; font-size: 1.125rem; }
.prose h2 { font-size: 1.75rem; margin-top: 2em; }
.prose h3 { margin-top: 1.6em; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li { margin-bottom: .4em; }
.prose li::marker { color: var(--accent); }
.prose figure { margin: 2em 0; }
.prose figure img { border-radius: var(--radius-sm); width: 100%; }
/* Afbeeldingsformaten uit de editor: klein / middel / groot, links / midden / rechts */
.prose::after { content: ''; display: table; clear: both; }
.prose figure.size-s { width: 40%; }
.prose figure.size-m { width: 65%; }
.prose figure.size-s, .prose figure.size-m { margin-left: auto; margin-right: auto; }
.prose figure.align-left  { float: left;  margin: .35em 1.6em 1em 0; }
.prose figure.align-right { float: right; margin: .35em 0 1em 1.6em; }
.prose figure.size-l { width: 100%; float: none; }
.prose h2, .prose h3, .prose blockquote { clear: both; }
@media (max-width: 620px) {
    .prose figure.size-s { width: 60%; }
    .prose figure.size-m, .prose figure.align-left, .prose figure.align-right { float: none; width: 100%; margin: 1.5em 0; }
    .prose figure.size-s.align-left, .prose figure.size-s.align-right { width: 60%; margin: 1.5em auto; }
}
.prose figcaption { font-size: .875rem; color: var(--muted); margin-top: .6em; text-align: center; }
.prose blockquote { margin: 1.6em 0; padding: .4em 0 .4em 1.2em; border-left: 4px solid var(--accent); font-family: var(--font-display); font-size: 1.3rem; color: var(--heading); }
.article-cta { margin-top: 48px; margin-bottom: 72px; padding: 28px; background: var(--navy); color: #fff; border-radius: var(--radius); display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.article-cta p { margin: 0; }

/* Contactformulier */
.contact-form { display: grid; gap: 18px; margin-top: 8px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field label { display: block; font-weight: 600; margin-bottom: 6px; color: var(--heading); }
.field .optional { font-weight: 400; color: var(--muted); }
.field input, .field textarea {
    width: 100%; padding: .85em 1em; font: inherit; color: var(--ink);
    border: 1.5px solid var(--line); border-radius: var(--radius-sm); background: var(--surface);
    transition: border-color .2s, box-shadow .2s;
}
.field input:focus, .field textarea:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 4px rgba(14,124,102,.15); }
.field textarea { resize: vertical; min-height: 160px; }
.field.has-error input, .field.has-error textarea { border-color: #c0392b; }
.field small { display: block; color: #c0392b; margin-top: 4px; font-size: .875rem; }
.form-note { background: var(--sand); padding: 14px 18px; border-radius: var(--radius-sm); color: var(--muted); font-size: .9375rem; }
.form-error { background: #fdecea; color: #b3261e; padding: 12px 16px; border-radius: var(--radius-sm); }
.form-privacy { font-size: .875rem; color: var(--muted); margin: 0; }
.contact-form .btn { justify-self: start; }
.form-success { text-align: center; padding: 40px 24px; background: var(--sand); border-radius: var(--radius); }

/* Nieuwsbrief */
.newsletter { background: linear-gradient(120deg, var(--teal-deep), var(--navy)); color: #fff; padding: 56px 0; }
.newsletter-inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.newsletter h2 { color: #fff; font-size: clamp(1.5rem, 2.6vw, 2rem); }
.newsletter p { margin: 0; color: rgba(255,255,255,.85); }
.newsletter-form { display: flex; gap: 10px; flex: 0 1 460px; }
.newsletter-form input[type=email] { flex: 1; min-width: 0; padding: .9em 1.2em; border-radius: 999px; border: 0; font: inherit; }

/* Advertentieplek (Admin → Banners) – vervangt het nieuwsbriefblok */
.promo { padding: 40px 0 48px; background: var(--sand); border-top: 1px solid var(--line); }
.promo-label { margin: 0 0 10px; font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); text-align: center; }
.promo-image { display: block; width: fit-content; max-width: min(970px, 100%); margin: 0 auto; border-radius: var(--radius-sm); overflow: hidden;
    box-shadow: var(--shadow); transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.promo-image:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.promo-image img { display: block; width: auto; max-width: 100%; height: auto; margin: 0 auto; }   /* nooit groter dan het origineel: blijft scherp */
/* Breedte van de banner-afbeelding (Admin → Banners → schuifje); 100% = 970px */
.promo-image.w30 { max-width: 291px; }
.promo-image.w35 { max-width: 340px; }
.promo-image.w40 { max-width: 388px; }
.promo-image.w45 { max-width: 436px; }
.promo-image.w50 { max-width: 485px; }
.promo-image.w55 { max-width: 534px; }
.promo-image.w60 { max-width: 582px; }
.promo-image.w65 { max-width: 630px; }
.promo-image.w70 { max-width: 679px; }
.promo-image.w75 { max-width: 728px; }
.promo-image.w80 { max-width: 776px; }
.promo-image.w85 { max-width: 824px; }
.promo-image.w90 { max-width: 873px; }
.promo-image.w95 { max-width: 922px; }

.promo-frame { display: block; width: 100%; max-width: 970px; margin: 0 auto; border: 0; background: transparent; }
.promo-tekst { background: linear-gradient(120deg, var(--teal-deep), var(--navy)); border-top: 0; padding: 56px 0; }
.promo-tekst .promo-label { color: rgba(255,255,255,.55); text-align: left; }
.promo-text { display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.promo-text h2 { color: #fff; font-size: clamp(1.5rem, 2.6vw, 2rem); margin-bottom: .3em; }
.promo-text p { margin: 0; color: rgba(255,255,255,.85); }
.promo-text .btn { flex-shrink: 0; }
@media (max-width: 760px) {
    .promo-text { flex-direction: column; align-items: flex-start; }
    .promo-text .btn { width: 100%; }
}

/* Footer */
.site-footer { background: #0a1e2c; color: rgba(255,255,255,.72); padding: 64px 0 28px; font-size: .9375rem; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; }
.site-footer h3 { color: #fff; font: 600 .8125rem/1 var(--font-body); text-transform: uppercase; letter-spacing: .12em; margin-bottom: 1rem; }
.site-footer nav a { display: block; color: rgba(255,255,255,.72); text-decoration: none; margin-bottom: .5rem; }
.site-footer nav a:hover { color: var(--accent); }
.footer-grid p { max-width: 360px; margin-top: 1rem; }
.footer-grid.has-dest { grid-template-columns: 1.6fr 1.2fr 1fr 1.2fr; }
.footer-bottom a { color: rgba(255,255,255,.85); }
.footer-bottom a:hover { color: var(--accent); }

/* Melding onder de reisorganisaties (affiliate-transparantie) */
.aff-note { display: flex; gap: 8px; align-items: flex-start; margin: 20px 0 0; font-size: .875rem; color: var(--muted); }
.aff-note svg { flex: none; margin-top: 3px; color: var(--teal); }
.aff-note a { color: var(--teal); white-space: nowrap; }

/* 404-pagina */
.notfound { text-align: center; padding: clamp(48px, 9vw, 110px) 0 clamp(40px, 6vw, 72px); }
.notfound-art { width: min(340px, 80%); height: auto; margin: 0 auto 24px; display: block; }
.notfound .lead { max-width: 560px; margin: 0 auto 28px; }
.notfound-search { display: flex; gap: 8px; max-width: 480px; margin: 0 auto 28px; }
.notfound-search input { flex: 1; min-width: 0; padding: 12px 16px; border: 1px solid var(--line); border-radius: 999px; font: inherit; background: var(--surface); color: var(--ink); }
.btn-outline { border-color: var(--heading); color: var(--heading); }
.btn-outline:hover { background: var(--navy); color: #fff; }
.notfound-links .chip-link { display: inline-flex; align-items: center; padding: .5em 1em; border-radius: 999px; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); text-decoration: none; font-weight: 500; }
.notfound-links .chip-link:hover { border-color: var(--teal); color: var(--teal); }
.notfound-links { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.1); margin-top: 48px; padding-top: 24px; font-size: .8125rem; }
.disclaimer { max-width: 900px; }

/* ==========================================================================
   Bestemmingen (landen)
   ========================================================================== */
.dest-card a { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none;
    background: var(--surface); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow);
    transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.dest-card a:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.dest-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--navy); }
.dest-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.dest-card a:hover .dest-media img { transform: scale(1.06); }
.dest-placeholder { height: 100%; background: linear-gradient(160deg, var(--teal-deep) 0%, var(--navy) 70%); }
.dest-media::after { content: ''; position: absolute; inset: 40% 0 0; background: linear-gradient(180deg, transparent, rgba(22,25,54,.75)); }
.dest-media h3 { position: absolute; left: 22px; bottom: 16px; z-index: 1; margin: 0; color: #fff; font-size: 1.75rem; text-shadow: 0 2px 12px rgba(0,0,0,.3); }
.dest-body { padding: 20px 22px 24px; display: flex; flex-direction: column; flex: 1; gap: 12px; }
.dest-body p { margin: 0; color: var(--muted); flex: 1; }
.dest-card a:hover .link-arrow span { transform: translateX(4px); }
.dest-count { font-size: .8125rem; color: var(--muted); }

.dest-hero { position: relative; background: var(--navy); color: #fff; padding: clamp(56px, 9vw, 120px) 0 clamp(48px, 7vw, 96px); overflow: hidden; }
.dest-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dest-hero::before { content: ''; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(90deg, rgba(28,31,59,.9) 0%, rgba(28,31,59,.6) 55%, rgba(28,31,59,.25) 100%); }
.dest-hero:not(.has-cover)::before { background: radial-gradient(circle at 85% 30%, rgba(214,69,51,.35), transparent 45%), linear-gradient(160deg, var(--teal-deep), var(--navy) 70%); }
.dest-hero-content { position: relative; z-index: 2; }
.dest-hero-content > * { max-width: 720px; }
.dest-hero h1 { color: #fff; margin-bottom: .3em; }
.dest-hero .lead { color: rgba(255,255,255,.88); }
.dest-hero .breadcrumbs, .dest-hero .breadcrumbs a { color: rgba(255,255,255,.7); }
.dest-hero .btn { margin-top: 1rem; }
.dest-hero + .section { padding-top: clamp(32px, 5vw, 56px); }
.dest-hero + .section .prose { padding-top: 0; }

/* Zoeken op de blog */
.blog-search { display: flex; gap: 10px; max-width: 560px; margin-top: 24px; }
.blog-search input { flex: 1; min-width: 0; padding: .8em 1.2em; border-radius: 999px; border: 1.5px solid var(--line); font: inherit; background: var(--surface); color: var(--ink); }
.blog-search input:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 4px rgba(14,124,102,.15); }
.search-summary { margin: -16px 0 28px; color: var(--muted); }

/* Filterknoppen op de blog */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.chips a { display: inline-flex; align-items: center; gap: 6px; padding: .5em 1em; border-radius: 999px;
    background: var(--surface); border: 1px solid var(--line); color: var(--ink); text-decoration: none; font-weight: 500; font-size: .9375rem;
    transition: border-color .2s, background-color .2s, color .2s; }
.chips a:hover { border-color: var(--teal); color: var(--teal); }
.chips a[aria-current] { background: var(--navy); border-color: var(--navy); color: #fff; }
.chips a span { font-size: .75rem; opacity: .6; }
a.tag { text-decoration: none; }
a.tag:hover { background: var(--teal); color: #fff; }
.tag-dest { background: #fff4e5; color: var(--accent-dark); }

/* ==========================================================================
   Extra onderdelen (aan/uit in Admin → Functies)
   ========================================================================== */

/* Snelkeuze onder de hero */
.hero-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 1.6rem; }
.hero-chips-label { font-size: .8125rem; text-transform: uppercase; letter-spacing: .1em; color: rgba(255,255,255,.65); margin-right: 4px; }
.hero-chips a { padding: .45em 1em; border-radius: 999px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.28);
    color: #fff; text-decoration: none; font-weight: 500; font-size: .9375rem; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    transition: background-color .2s, border-color .2s, transform .2s var(--ease); }
.hero-chips a:hover { background: var(--accent); border-color: var(--accent); color: #fff; transform: translateY(-2px); }
.hero-content > :nth-child(5) { animation-delay: .32s; }

/* Europa-kaart */
:root { --map-sea: #e3eef0; --map-land: #efe6d6; --map-other: #f4eee4; --map-stroke: #ffffff; }
.eu-map-wrap { margin: 0 0 48px; background: var(--map-sea); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.eu-map { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; }
@media (max-width: 620px) { .eu-map { aspect-ratio: 4 / 3; } }
.eu-map path { vector-effect: non-scaling-stroke; }
.eu-bg path { fill: var(--map-other); stroke: var(--map-stroke); stroke-width: .8; }
.eu-bg .eu-land { fill: var(--map-land); }
.eu-dot { fill: var(--accent); stroke: #fff; stroke-width: 2; vector-effect: non-scaling-stroke; cursor: pointer; }
.eu-dest:hover .eu-dot { fill: var(--gold); }
.eu-dest path { fill: var(--accent); stroke: var(--map-stroke); stroke-width: .9; cursor: pointer; transition: fill .2s; }
.eu-dest:hover path, .eu-dest:focus path { fill: var(--gold); }
.eu-dest:focus { outline: none; }
.eu-dest:focus-visible path { stroke: var(--heading); stroke-width: 2.5; }
.eu-labels { pointer-events: none; }
.eu-labels rect { fill: var(--surface); stroke: var(--line); filter: drop-shadow(0 2px 4px rgba(28,31,59,.18)); }
.eu-labels text { font: 600 12.5px var(--font-body); fill: var(--heading); }
.eu-map-wrap figcaption { padding: 12px 20px; font-size: .875rem; color: var(--muted); background: var(--surface); border-top: 1px solid var(--line); }

/* Praktische infobox (bestemming) */
.infobox-wrap { position: relative; z-index: 3; margin-top: -40px; }
.infobox { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 8px 28px; }
.infobox-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); margin: 0; }
.infobox-grid > div { display: grid; grid-template-columns: 28px 1fr; column-gap: 12px; align-content: start; padding: 18px 12px 18px 0; }
.infobox-grid svg { grid-row: span 2; width: 26px; height: 26px; fill: none; stroke: var(--accent-dark); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; margin-top: 2px; }
.infobox-grid dt { font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.infobox-grid dd { margin: 2px 0 0; font-weight: 600; color: var(--heading); line-height: 1.4; }
.infobox-tip { margin: 0; padding: 16px 0 18px; border-top: 1px solid var(--line); color: var(--ink); }
.infobox-tip strong { color: var(--accent-text); }
.infobox-wrap + .section { padding-top: clamp(40px, 6vw, 64px); }
.infobox-wrap + .section .prose { padding-top: 0; }

/* Veelgestelde vragen */
.faq { margin: 48px 0 8px; }
.section .faq { margin-top: 0; }
.faq h2 { font-size: clamp(1.5rem, 2.6vw, 1.9rem); margin-bottom: .6em; }
.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-of-type { border-top: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px;
    padding: 18px 0; font-weight: 600; font-size: 1.0625rem; color: var(--heading); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 12px; height: 12px; border-right: 2px solid var(--accent-dark); border-bottom: 2px solid var(--accent-dark);
    transform: rotate(45deg) translate(-3px, -3px); transition: transform .25s var(--ease); }
.faq details[open] summary::after { transform: rotate(-135deg) translate(-3px, -3px); }
.faq summary:hover { color: var(--teal); }
.faq-answer { padding: 0 0 20px; color: var(--muted); }

/* Inhoudsopgave */
.toc { background: var(--sand); border-radius: var(--radius-sm); margin: 0 0 2em; border-left: 4px solid var(--accent); }
.toc summary { cursor: pointer; padding: 14px 20px; font: 600 .8125rem/1.2 var(--font-body); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.toc ol { margin: 0; padding: 0 20px 16px 2.6em; font-size: 1rem; }
.toc li { margin: .3em 0; }
.toc a { color: var(--ink); text-decoration: none; }
.toc a:hover { color: var(--teal); text-decoration: underline; }
.prose h2[id] { scroll-margin-top: 96px; }

/* Leesvoortgang */
.read-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60; pointer-events: none; }
.read-progress span { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-dark)); transform: scaleX(0); transform-origin: 0 50%; }

/* Deelknoppen */
.share { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 40px 0 0; padding-top: 28px; border-top: 1px solid var(--line); }
.share-label { font-weight: 600; color: var(--heading); margin-right: 6px; }
.share a, .share button { display: inline-flex; align-items: center; gap: 8px; padding: .5em 1em; border-radius: 999px; border: 1.5px solid var(--line);
    background: var(--surface); color: var(--ink); font: 500 .9375rem/1.2 var(--font-body); text-decoration: none; cursor: pointer;
    transition: border-color .2s, color .2s, transform .2s var(--ease); }
.share a:hover, .share button:hover { border-color: var(--teal); color: var(--teal); transform: translateY(-2px); }
.share svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.share .is-done { border-color: #1e7a46; color: #1e7a46; }

/* In-beeld-animatie (JavaScript voegt .rv toe aan elementen onder de vouw) */
html.reveal-on .rv { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
html.reveal-on .rv.is-in { opacity: 1; transform: none; }

/* Kleurthema's (Admin → Vormgeving) --------------------------------------- */
html.theme-jade {
    --navy: #16302b; --navy-2: #22453d; --teal: #1f7a64; --teal-deep: #16664f; --accent: #1f8a6d; --accent-dark: #16664f;
    --gold: #d9a441; --sand: #f2f5ee; --line: #dde5da; --ink: #1f2a27; --muted: #5a6763;
    --card-ink: #1f2a27; --card-muted: #5a6763; --card-line: #dde5da;
    --sky-1: #0f2423; --sky-2: #1f4a45; --sky-3: #5f8f6e; --sky-4: #d9b46a; --sky-5: #f3e2a6;
    --mount-far: #3f6f62; --mount-mid: #25493f; --mount-near: #13302a; --water-1: #7fae8e; --water-2: #10302a;
}
html.theme-indigo {
    --navy: #1c1f3b; --navy-2: #2a2e5a; --teal: #0e7c66; --teal-deep: #0e7c66; --accent: #d64533; --accent-dark: #a9321f;
    --gold: #e9b44c; --sand: #f5efe6; --line: #e7e0d4; --ink: #1d2033; --muted: #5d6275;
    --card-ink: #1d2033; --card-muted: #5d6275; --card-line: #e7e0d4;
    --sky-1: #161936; --sky-2: #34376c; --sky-3: #9c5a7a; --sky-4: #e98d6b; --sky-5: #f6c38c;
    --mount-far: #6a5a8c; --mount-mid: #3f3a6e; --mount-near: #262349; --water-1: #b86a78; --water-2: #161936;
}
html.theme-sakura {
    --navy: #3a2233; --navy-2: #553146; --teal: #9d3355; --teal-deep: #6d3a5c; --accent: #c8456f; --accent-dark: #9d3355;
    --gold: #e2a64a; --sand: #fcf1f3; --line: #f0dde3; --ink: #33232d; --muted: #72606a;
    --card-ink: #33232d; --card-muted: #72606a; --card-line: #f0dde3;
    --sky-1: #2a1830; --sky-2: #6b3a63; --sky-3: #d67a9a; --sky-4: #f3a9b8; --sky-5: #fde0d4;
    --mount-far: #a56a8c; --mount-mid: #6d3a5c; --mount-near: #3a2233; --water-1: #e49ab0; --water-2: #3a2233;
}

/* Donkere modus: volgt de instelling van het apparaat (aan/uit in Admin → Functies) */
@media (prefers-color-scheme: dark) {
    html.dark-auto {
        color-scheme: dark;
        --white: #0e1a22; --surface: #15242e; --sand: #122029; --ink: #dfe7ec; --muted: #9db0bd; --line: #25394a;
        --heading: #f2f6f9; --teal: #4fb7a0; --header-bg: rgba(14,26,34,.9);
        --card-ink: #dfe7ec; --card-muted: #9db0bd; --card-line: #25394a; --card-heading: #f2f6f9; --card-link: #4fb7a0;
        --accent-text: color-mix(in srgb, var(--accent) 55%, #fff);
        --shadow: 0 1px 2px rgba(0,0,0,.35), 0 8px 24px rgba(0,0,0,.35);
        --shadow-lg: 0 2px 4px rgba(0,0,0,.35), 0 22px 48px rgba(0,0,0,.5);
        --map-sea: #102432; --map-land: #243847; --map-other: #1b2d3a; --map-stroke: #0e1a22;
    }
    html.dark-auto .notice, html.dark-auto .tag-dest { background: #3a2a14; color: #f5c48d; border-color: #6b4a1f; }
    html.dark-auto .form-error { background: #3b1a18; color: #f4a79f; }
    html.dark-auto .post-placeholder { background: linear-gradient(135deg, #3a3128, #1d3a40); }
    html.dark-auto .site-footer { background: #081319; }
    html.dark-auto .aff-media.bg-zand { background: #f7f3ec; }                  /* logo-achtergronden blijven licht */
    html.dark-auto .chips a[aria-current], html.dark-auto .pagination a[aria-current] { background: var(--teal); border-color: var(--teal); color: #0e1a22; }
    html.dark-auto .article-cta { border: 1px solid var(--line); }
    html.dark-auto .tag:not(.tag-dest) { background: rgba(79,183,160,.16); }
    html.dark-auto .btn-outline:hover { color: #0e1a22; background: var(--heading); }
    html.dark-auto a.tag:hover { color: #0e1a22; }
    html.dark-auto .share .is-done { border-color: #6fd39b; color: #6fd39b; }
    html.dark-auto img { filter: brightness(.94); }
    html.dark-auto .logo-mark { color: var(--teal); }
    html.dark-auto .page-hero:not(.bg-dark):not(.bg-light) .eyebrow, html.dark-auto .section:not(.bg-dark):not(.bg-light):not(:is(.bg-dark, .bg-light) *) .eyebrow { color: var(--accent-text); }
}

/* 6. Responsive --------------------------------------------------------- */
@media (max-width: 1100px) {
    .hero-floats { display: none; }
}
@media (max-width: 960px) {
    .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
    .footer-grid.has-dest { grid-template-columns: 1fr 1fr 1fr; }
    .footer-grid.has-dest > div { grid-column: 1 / -1; }
    .newsletter-inner { flex-direction: column; align-items: stretch; }
    .newsletter-form { flex-basis: auto; }

    /* Mobiel menu */
    .nav-toggle { display: grid; place-items: center; width: 44px; height: 44px; border: 0; background: none; cursor: pointer; }
    .nav-toggle-bar, .nav-toggle-bar::before, .nav-toggle-bar::after { display: block; width: 22px; height: 2px; background: var(--heading); border-radius: 2px; position: relative; transition: transform .25s, background .25s; }
    .nav-toggle-bar::before, .nav-toggle-bar::after { content: ''; position: absolute; left: 0; }
    .nav-toggle-bar::before { top: -7px; }
    .nav-toggle-bar::after  { top: 7px; }
    .nav-toggle[aria-expanded=true] .nav-toggle-bar { background: transparent; }
    .nav-toggle[aria-expanded=true] .nav-toggle-bar::before { transform: translateY(7px) rotate(45deg); }
    .nav-toggle[aria-expanded=true] .nav-toggle-bar::after  { transform: translateY(-7px) rotate(-45deg); }
    .site-nav {
        position: absolute; top: 72px; left: 0; right: 0;
        flex-direction: column; align-items: stretch; gap: 0;
        background: var(--surface); padding: 8px 24px 24px; border-bottom: 1px solid var(--line);
        box-shadow: 0 16px 30px rgba(28,31,59,.1);
        display: none;
    }
    .site-nav.is-open { display: flex; }
    .site-nav a:not(.btn) { padding: 14px 0; border-bottom: 1px solid var(--line); }
    .site-nav a:not(.btn)::after { display: none; }
    .site-nav .btn { margin-top: 16px; }
}
@media (max-width: 620px) {
    body { font-size: 1rem; }
    .container { padding-left: 18px; padding-right: 18px; }   /* alleen zijkanten: laat padding-top van .prose intact */
    .grid-3 { grid-template-columns: 1fr; }
    .section-head-row { flex-direction: column; align-items: flex-start; }
    .section .section-head:has(> div) > div { flex-direction: column; align-items: flex-start; gap: 10px; }
    .hero-svg { width: 260%; right: -10%; }
    .hero-shade { background: linear-gradient(180deg, rgba(28,31,59,.88) 0%, rgba(28,31,59,.62) 60%, rgba(28,31,59,.15) 100%); }
    .hero-actions .btn { width: 100%; }
    .stats dd { font-size: 1.5rem; }
    .stats dt { font-size: .6875rem; letter-spacing: .06em; }
    .footer-grid, .footer-grid.has-dest { grid-template-columns: 1fr 1fr; }
    .footer-grid > div { grid-column: 1 / -1; }
    .notfound-search { flex-direction: column; }
    .infobox { padding: 4px 18px; }
    .infobox-grid { grid-template-columns: 1fr 1fr; column-gap: 12px; }
    .infobox-grid > div { grid-template-columns: 1fr; padding: 14px 0; }
    .infobox-grid svg { grid-row: auto; width: 22px; height: 22px; margin: 0 0 6px; }
    .infobox-wrap { margin-top: -28px; }
    .share-label { width: 100%; }
    .share a span { display: none; }                 /* mobiel: alleen pictogrammen */
    .share a { padding: .6em; }
    .hero-chips-label { width: 100%; }
    .newsletter-form { flex-direction: column; }
    .article-cta { flex-direction: column; align-items: flex-start; }
    .form-row { grid-template-columns: 1fr; }
    .contact-form .btn { justify-self: stretch; }
}
@media print { html.reveal-on .rv { opacity: 1; transform: none; } .read-progress, .share { display: none; } }

/* ==========================================================================
   Azië Vakantie – eigen layout (bovenop de basis hierboven)
   Verschillen met de basis: header over de hero, gecentreerde hero en sectiekoppen,
   glazen kerncijfers, mozaïek met bestemmingen en een lichte footer.
   ========================================================================== */

/* Logo-teken: zon + pagodedak */
.logo-mark .lm-inner { fill: #fff; }

/* Header ligt op de homepage over de hero, tot je scrolt */
body.home .site-header { position: fixed; left: 0; right: 0; top: 0; }
body.home .site-header:not(.is-scrolled) { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border-color: transparent; }
body.home .site-header:not(.is-scrolled) .logo,
body.home .site-header:not(.is-scrolled) .logo-mark { color: #fff; }
body.home .site-header:not(.is-scrolled) .logo-mark .lm-inner { fill: var(--navy); }
body.home .site-header:not(.is-scrolled) .logo strong { color: var(--gold); }
body.home .site-header:not(.is-scrolled) .site-nav a:not(.btn) { color: rgba(255,255,255,.92); }
body.home .site-header:not(.is-scrolled) .nav-toggle-bar,
body.home .site-header:not(.is-scrolled) .nav-toggle-bar::before,
body.home .site-header:not(.is-scrolled) .nav-toggle-bar::after { background: #fff; }
body.home .site-header:not(.is-scrolled) .nav-toggle[aria-expanded=true] .nav-toggle-bar { background: transparent; }

/* Hero: gecentreerd, bijna schermvullend */
.hero { min-height: min(94vh, 900px); display: flex; flex-direction: column; justify-content: center; padding: 150px 0 0; }
.hero-shade { background: radial-gradient(ellipse 70% 60% at 50% 42%, rgba(22,25,54,.62), rgba(22,25,54,.18) 75%),
                          linear-gradient(180deg, rgba(22,25,54,.55), transparent 30%); }
.hero-content { text-align: center; }
.hero-content > * { max-width: 780px; margin-left: auto; margin-right: auto; }
.hero .eyebrow { color: var(--gold); }
.hero h1 { font-size: clamp(2.6rem, 6.4vw, 4.8rem); line-height: 1.05; }
.hero-actions, .hero-chips { justify-content: center; }
.hero-chips-label { width: 100%; margin: 0 0 2px; }
.fp-1 { top: 24%; left: 3%; right: auto; }
.fp-2 { top: 30%; right: 3%; }
.fp-3 { top: 58%; right: auto; left: 6%; }

/* Kerncijfers: glazen balk onderin de hero */
.stats { background: rgba(255,255,255,.1); color: #fff; border: 1px solid rgba(255,255,255,.22); border-radius: 999px;
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: none;
    max-width: 720px; margin: clamp(48px, 7vw, 80px) auto 40px; padding: 16px 8px; }
.stats div + div { border-left-color: rgba(255,255,255,.2); }
.stats dt { color: rgba(255,255,255,.7); }
.stats dd { color: #fff; }

/* Sectiekoppen: gecentreerd met een rood streepje */
.section .section-head, .section .section-head:has(> div) { max-width: 760px; margin: 0 auto 48px; text-align: center; }
.section .section-head:has(> div) > div { flex-direction: column; align-items: center; gap: 12px; }
.section .section-head h2 { white-space: normal; }
.section .section-head h2::after { content: ""; display: block; width: 56px; height: 3px; border-radius: 3px; background: var(--accent); margin: 16px auto 0; }
.section-title { text-align: center; }

/* Mozaïek met bestemmingen (homepage) */
.dest-mosaic { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 250px; gap: 20px; }
.dest-mosaic > :first-child { grid-column: span 2; grid-row: span 2; }
.dest-tile { position: relative; display: block; overflow: hidden; border-radius: var(--radius); color: #fff; text-decoration: none; box-shadow: var(--shadow); isolation: isolate; }
.dest-tile img, .dest-tile .tile-fill { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); z-index: -2; }
.dest-tile::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 35%, rgba(22,25,54,.82)); }
.dest-tile:hover img, .dest-tile:hover .tile-fill { transform: scale(1.06); }
.dest-tile-body { position: absolute; left: 22px; right: 22px; bottom: 20px; }
.dest-tile h3 { color: #fff; margin: 0 0 4px; font-size: 1.6rem; }
.dest-mosaic > :first-child h3 { font-size: clamp(2rem, 3vw, 2.6rem); }
.dest-tile p { margin: 0; font-size: .9375rem; color: rgba(255,255,255,.85); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dest-tile:not(:first-child) p { display: none; }
.dest-tile .tile-more { display: inline-block; margin-top: 10px; font-weight: 600; color: var(--gold); }
.tile-fill { background: linear-gradient(150deg, var(--teal-deep), var(--navy) 75%); }
.dest-mosaic > :nth-child(2) .tile-fill { background: linear-gradient(150deg, #c8513a, #5a2a4a 80%); }
.dest-mosaic > :nth-child(3) .tile-fill { background: linear-gradient(150deg, #2a6f9a, var(--navy) 80%); }
.dest-mosaic > :nth-child(4) .tile-fill { background: linear-gradient(150deg, #b9892f, #4a2f2a 85%); }
.dest-mosaic > :nth-child(5) .tile-fill { background: linear-gradient(150deg, #5a4a8c, #1c1f3b 80%); }
.tile-fill::before { content: ""; position: absolute; inset: 0; opacity: .12;
    background: radial-gradient(circle at 20% 20%, #fff 0 2px, transparent 3px) 0 0 / 28px 28px; }
.section-more { text-align: center; margin-top: 36px; }

/* Kaarten: iets zachter */
.aff-card, .theme-card, .dest-card a { border-radius: var(--radius); }
.aff-body h3, .theme-body h3 { font-size: 1.35rem; }

/* Lichte footer */
.site-footer { background: var(--sand); color: var(--muted); border-top: 1px solid var(--line); }
.site-footer h3 { color: var(--heading); }
.site-footer nav a { color: var(--ink); }
.site-footer nav a:hover { color: var(--accent); }
.logo-light { color: var(--heading); }
.footer-bottom { border-top-color: var(--line); }
.footer-bottom a { color: var(--teal); }
.promo:not(.promo-tekst) { background: var(--surface); }
@media (prefers-color-scheme: dark) { html.dark-auto .site-footer { background: #0e1a22; } html.dark-auto .logo strong { color: var(--gold); } }

@media (max-width: 960px) {
    .dest-mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 200px; }
    .dest-mosaic > :first-child { grid-column: span 2; grid-row: span 1; }
    body.home .site-header:not(.is-scrolled) .site-nav.is-open a:not(.btn) { color: var(--ink); }
}
@media (max-width: 620px) {
    .hero { min-height: auto; padding-top: 120px; }
    .dest-mosaic { grid-auto-rows: 170px; gap: 12px; }
    .dest-tile h3 { font-size: 1.3rem; }
    .stats { border-radius: var(--radius); }
}
/* Filter op bestemming (/reisorganisaties) */
.filter-select { display: flex; align-items: center; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.filter-select label { font-weight: 600; color: var(--heading); }
.filter-select select { padding: .55em 1em; border-radius: 999px; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; }

/* ==========================================================================
   Vormgeving: blokken, patronen, tegelkleuren en hero-varianten (Admin → Vormgeving)
   ========================================================================== */
:root { --wave-gold: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='24' viewBox='0 0 48 24'%3E%3Cg fill='none' stroke='%23d9a441' stroke-opacity='.8' stroke-width='1.2'%3E%3Cpath d='M0 24a24 24 0 0 1 48 0M8 24a16 16 0 0 1 32 0M16 24a8 8 0 0 1 16 0'/%3E%3Cpath d='M-24 12a24 24 0 0 1 48 0M-16 12a16 16 0 0 1 32 0M-8 12a8 8 0 0 1 16 0M24 12a24 24 0 0 1 48 0M32 12a16 16 0 0 1 32 0M40 12a8 8 0 0 1 16 0'/%3E%3C/g%3E%3C/svg%3E"); --wave-ink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='24' viewBox='0 0 48 24'%3E%3Cg fill='none' stroke='%23241a22' stroke-opacity='.26' stroke-width='1.2'%3E%3Cpath d='M0 24a24 24 0 0 1 48 0M8 24a16 16 0 0 1 32 0M16 24a8 8 0 0 1 16 0'/%3E%3Cpath d='M-24 12a24 24 0 0 1 48 0M-16 12a16 16 0 0 1 32 0M-8 12a8 8 0 0 1 16 0M24 12a24 24 0 0 1 48 0M32 12a16 16 0 0 1 32 0M40 12a8 8 0 0 1 16 0'/%3E%3C/g%3E%3C/svg%3E"); --wave-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='24' viewBox='0 0 48 24'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.44' stroke-width='1.2'%3E%3Cpath d='M0 24a24 24 0 0 1 48 0M8 24a16 16 0 0 1 32 0M16 24a8 8 0 0 1 16 0'/%3E%3Cpath d='M-24 12a24 24 0 0 1 48 0M-16 12a16 16 0 0 1 32 0M-8 12a8 8 0 0 1 16 0M24 12a24 24 0 0 1 48 0M32 12a16 16 0 0 1 32 0M40 12a8 8 0 0 1 16 0'/%3E%3C/g%3E%3C/svg%3E");
        --cloud-gold: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='70' viewBox='0 0 120 70'%3E%3Cg fill='none' stroke='%23d9a441' stroke-opacity='.9' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M10 30c0-8 10-10 14-4 2-9 16-10 19-1 6-5 15 0 12 7H14c-3 0-4-1-4-2z'/%3E%3Cpath d='M22 26c2-3 6-3 7 0'/%3E%3Cpath d='M70 62c0-7 9-9 12-3 2-8 14-9 17-1 5-4 13 0 11 6H73c-2 0-3-1-3-2z'/%3E%3Cpath d='M81 58c2-3 5-3 6 0'/%3E%3C/g%3E%3C/svg%3E"); --cloud-ink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='70' viewBox='0 0 120 70'%3E%3Cg fill='none' stroke='%23241a22' stroke-opacity='.32' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M10 30c0-8 10-10 14-4 2-9 16-10 19-1 6-5 15 0 12 7H14c-3 0-4-1-4-2z'/%3E%3Cpath d='M22 26c2-3 6-3 7 0'/%3E%3Cpath d='M70 62c0-7 9-9 12-3 2-8 14-9 17-1 5-4 13 0 11 6H73c-2 0-3-1-3-2z'/%3E%3Cpath d='M81 58c2-3 5-3 6 0'/%3E%3C/g%3E%3C/svg%3E"); --cloud-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='70' viewBox='0 0 120 70'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.5' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M10 30c0-8 10-10 14-4 2-9 16-10 19-1 6-5 15 0 12 7H14c-3 0-4-1-4-2z'/%3E%3Cpath d='M22 26c2-3 6-3 7 0'/%3E%3Cpath d='M70 62c0-7 9-9 12-3 2-8 14-9 17-1 5-4 13 0 11 6H73c-2 0-3-1-3-2z'/%3E%3Cpath d='M81 58c2-3 5-3 6 0'/%3E%3C/g%3E%3C/svg%3E");
        --blossom-pink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90' viewBox='0 0 90 90'%3E%3Cg fill='%23c8456f' fill-opacity='.32'%3E%3Cg transform='translate(22 24)'%3E%3Ccircle cx='0' cy='-6' r='4.5'/%3E%3Ccircle cx='5.7' cy='-1.9' r='4.5'/%3E%3Ccircle cx='3.5' cy='4.9' r='4.5'/%3E%3Ccircle cx='-3.5' cy='4.9' r='4.5'/%3E%3Ccircle cx='-5.7' cy='-1.9' r='4.5'/%3E%3C/g%3E%3Cg transform='translate(66 66) scale(.7)'%3E%3Ccircle cx='0' cy='-6' r='4.5'/%3E%3Ccircle cx='5.7' cy='-1.9' r='4.5'/%3E%3Ccircle cx='3.5' cy='4.9' r='4.5'/%3E%3Ccircle cx='-3.5' cy='4.9' r='4.5'/%3E%3Ccircle cx='-5.7' cy='-1.9' r='4.5'/%3E%3C/g%3E%3Ccircle cx='70' cy='18' r='2.5'/%3E%3Ccircle cx='18' cy='70' r='2'/%3E%3C/g%3E%3C/svg%3E"); --blossom-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90' viewBox='0 0 90 90'%3E%3Cg fill='%23ffffff' fill-opacity='.6'%3E%3Cg transform='translate(22 24)'%3E%3Ccircle cx='0' cy='-6' r='4.5'/%3E%3Ccircle cx='5.7' cy='-1.9' r='4.5'/%3E%3Ccircle cx='3.5' cy='4.9' r='4.5'/%3E%3Ccircle cx='-3.5' cy='4.9' r='4.5'/%3E%3Ccircle cx='-5.7' cy='-1.9' r='4.5'/%3E%3C/g%3E%3Cg transform='translate(66 66) scale(.7)'%3E%3Ccircle cx='0' cy='-6' r='4.5'/%3E%3Ccircle cx='5.7' cy='-1.9' r='4.5'/%3E%3Ccircle cx='3.5' cy='4.9' r='4.5'/%3E%3Ccircle cx='-3.5' cy='4.9' r='4.5'/%3E%3Ccircle cx='-5.7' cy='-1.9' r='4.5'/%3E%3C/g%3E%3Ccircle cx='70' cy='18' r='2.5'/%3E%3Ccircle cx='18' cy='70' r='2'/%3E%3C/g%3E%3C/svg%3E"); }

/* Sierlijn onder sectiekoppen: wolkenmotief i.p.v. een streep */
.section .section-head h2::after { width: 90px; height: 16px; border-radius: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='16' viewBox='0 0 90 16'%3E%3Cg fill='none' stroke='%23d9a441' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M2 8h26M62 8h26'/%3E%3Cpath d='M34 11c-4 0-5-6 0-6 2 0 3 1 3 3M56 11c4 0 5-6 0-6-2 0-3 1-3 3M37 8c0-5 16-5 16 0'/%3E%3C/g%3E%3Ccircle cx='45' cy='12' r='2' fill='%23c0392b'/%3E%3C/svg%3E") center / contain no-repeat; margin-top: 14px; }

/* Achtergronden voor blokken */
.bg-wit     { background: var(--white); }
.bg-papier  { background: var(--sand); }
.bg-patroon { --pat: var(--wave-ink); --pat-size: 48px 24px; background: var(--sand); }
.bg-rood    { background: radial-gradient(ellipse at 20% 0%, rgba(255,255,255,.12), transparent 55%), linear-gradient(160deg, #c0392b, #7a1f1a); }
.bg-jade    { background: radial-gradient(ellipse at 80% 0%, rgba(255,255,255,.12), transparent 55%), linear-gradient(160deg, #2a8f73, #145846); }
.bg-goud    { background: linear-gradient(160deg, #f3d48a, #d9a441); }
.bg-inkt    { background: var(--navy); }
.bg-nacht   { --pat: var(--wave-gold); --pat-size: 48px 24px; background: linear-gradient(180deg, var(--navy), var(--navy-2)); }
.bg-sakura  { --pat: radial-gradient(circle at 15% 20%, rgba(255,255,255,.5) 0 2px, transparent 3px); --pat-size: 36px 36px; background: linear-gradient(160deg, #d9748f, #9d3355); }
/* Donkere blokken: lichte tekst; kaarten erin houden hun eigen (donkere) tekst */
.bg-dark { --heading: #fff; --ink: rgba(255,255,255,.92); --muted: rgba(255,255,255,.78); --line: rgba(255,255,255,.22); color: var(--ink); }
.bg-dark .eyebrow { color: var(--gold); }
[class*="bg-rood"] .eyebrow, [class*="bg-sakura"] .eyebrow { color: #ffe3a6; }
.bg-dark a:not(.btn) { color: #fff; }
.bg-dark .aff-card, .bg-dark .theme-card, .bg-dark .dest-card, .bg-light .aff-card, .bg-light .theme-card, .bg-light .dest-card { --ink: var(--card-ink); --muted: var(--card-muted); --line: var(--card-line); --heading: var(--card-heading); --teal: var(--card-link); color: var(--card-ink); }
.bg-dark .aff-card a, .bg-dark .theme-card a, .bg-dark .dest-card a { color: inherit; }
.bg-dark .theme-card .link-arrow { color: var(--teal); }
.bg-dark .aff-cta { color: var(--accent-text); }
.bg-dark .btn-outline { border-color: #fff; color: #fff; }
.bg-dark .btn-outline:hover { background: #fff; color: var(--navy); }
[class*="bg-rood"] .btn-accent { background: var(--gold); color: var(--navy); }
.bg-dark .section-head h2::after { filter: brightness(1.4); }

/* Tegelkleuren (bestemmingen zonder foto, tekstbanners) */
.tc-rood   { --tile: linear-gradient(150deg, #d0513f, #7a1f1a 85%); }
.tc-jade   { --tile: linear-gradient(150deg, #2a9a7b, #0f3f33 85%); }
.tc-goud   { --tile: linear-gradient(150deg, #e8b75a, #7a4a17 90%); }
.tc-inkt   { --tile: linear-gradient(150deg, #4a3040, #1a1218 85%); }
.tc-indigo { --tile: linear-gradient(150deg, #4a5aa8, #1c1f3b 85%); }
.tc-sakura { --tile: linear-gradient(150deg, #f08fab, #8a2d52 90%); }
.tc-zee    { --tile: linear-gradient(150deg, #2f9cc0, #0f3a5c 85%); }
.dest-tile[class*="tc-"] .tile-fill, .dest-card[class*="tc-"] .dest-placeholder { background: var(--tile); }
.dest-hero[class*="tc-"]:not(.has-cover)::before { background: radial-gradient(circle at 85% 30%, rgba(255,255,255,.18), transparent 45%), var(--tile); }
.promo-tekst[class*="tc-"] { background: var(--tile); }
.promo-tekst.tc-patroon { --pat: var(--wave-gold); --pat-size: 48px 24px; background: linear-gradient(180deg, var(--navy), var(--navy-2)); }

/* Hero: kleuren van de illustratie volgen het kleurthema */
.hs-1 { stop-color: var(--sky-1); } .hs-2 { stop-color: var(--sky-2); } .hs-3 { stop-color: var(--sky-3); }
.hs-4 { stop-color: var(--sky-4); } .hs-5 { stop-color: var(--sky-5); }
.hw-1 { stop-color: var(--water-1); } .hw-2 { stop-color: var(--water-2); }
.hm-far { fill: var(--mount-far); } .hm-mid { fill: var(--mount-mid); } .hm-near { fill: var(--mount-near); }
.h-rays { transform-box: fill-box; transform-origin: center; animation: spin 140s linear infinite; }
.h-mist { animation: drift 30s ease-in-out infinite alternate; }
.h-mist-2 { animation-duration: 42s; animation-delay: -12s; }
.h-petal { animation: petal 14s linear infinite; opacity: 0; }
.h-p1 { animation-delay: -2s; } .h-p2 { animation-delay: -6s; animation-duration: 17s; } .h-p3 { animation-delay: -9s; }
.h-p4 { animation-delay: -4s; animation-duration: 19s; } .h-p5 { animation-delay: -12s; animation-duration: 16s; } .h-p6 { animation-delay: -7s; }
.h-window { animation: flicker 5s ease-in-out infinite; }
@keyframes spin    { to { transform: rotate(360deg); } }
@keyframes petal   { 0% { transform: translate(0, 0) rotate(0); opacity: 0; } 8% { opacity: .95; } 85% { opacity: .9; } 100% { transform: translate(-260px, 620px) rotate(540deg); opacity: 0; } }
@keyframes flicker { 0%, 100% { opacity: .85; } 45% { opacity: 1; } 55% { opacity: .7; } }

/* Hero met eigen foto of kleurvlak */
.hero-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-colorbg { position: absolute; inset: 0; background: var(--wave-gold) 0 0 / 48px 24px, radial-gradient(ellipse at 70% 80%, var(--accent), transparent 60%), linear-gradient(160deg, var(--navy-2), var(--navy)); }
.hero--foto .hero-shade { background: rgba(22,16,20,var(--ov, .4)); }
.ov-0 { --ov: 0; } .ov-1 { --ov: .1; } .ov-2 { --ov: .2; } .ov-3 { --ov: .3; } .ov-4 { --ov: .4; }
.ov-5 { --ov: .5; } .ov-6 { --ov: .6; } .ov-7 { --ov: .7; } .ov-8 { --ov: .8; }
.hero--foto .hero-content { text-shadow: 0 2px 18px rgba(0,0,0,.35); }
.stats { background: rgba(20,12,18,.28); }
.h-petal { transform-box: fill-box; transform-origin: center; }

/* Tijdelijke kaarten zonder logo: in de themakleuren */
.aff-placeholder { background: linear-gradient(135deg, var(--navy) 0%, var(--accent-dark) 100%); }

/* Speelse randen van blokken (Admin → Vormgeving): fijne golven, wolkjes, penseelstreek of bergtoppen.
   Werkt met een masker: het blok krijgt een sierlijke boven- of onderkant en schuift 13px over het vorige blok. */
:root {
    --edge-golf: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='14' viewBox='0 0 28 14' preserveAspectRatio='none'%3E%3Cpath d='M0 14 C0 6 6 1.5 14 1.5 C22 1.5 28 6 28 14Z'/%3E%3C/svg%3E"); --edge-golf-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='14' viewBox='0 0 28 14' preserveAspectRatio='none'%3E%3Cpath transform='translate(0 14) scale(1 -1)' d='M0 14 C0 6 6 1.5 14 1.5 C22 1.5 28 6 28 14Z'/%3E%3C/svg%3E"); --edge-golf-w: 28px;
    --edge-wolk: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='14' viewBox='0 0 64 14' preserveAspectRatio='none'%3E%3Cpath d='M0 14 C0 9.5 4 6.5 9 7.5 C11 2.5 19 1 23 5.5 C27 2 34 3 35.5 7.5 C39 4.5 47 4.5 49 8.5 C52 6 59 7 64 14Z'/%3E%3C/svg%3E"); --edge-wolk-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='14' viewBox='0 0 64 14' preserveAspectRatio='none'%3E%3Cpath transform='translate(0 14) scale(1 -1)' d='M0 14 C0 9.5 4 6.5 9 7.5 C11 2.5 19 1 23 5.5 C27 2 34 3 35.5 7.5 C39 4.5 47 4.5 49 8.5 C52 6 59 7 64 14Z'/%3E%3C/svg%3E"); --edge-wolk-w: 64px;
    --edge-penseel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='14' viewBox='0 0 160 14' preserveAspectRatio='none'%3E%3Cpath d='M0 14 L0 7.0 L6 7.4 L13 4.8 L20 3.9 L27 6.8 L33 3.5 L40 9.5 L43 3.8 L50 2.2 L56 3.5 L61 2.4 L68 5.6 L71 4.4 L74 2.9 L81 3.4 L86 2.5 L90 4.4 L94 8.0 L98 2.8 L101 7.9 L104 9.4 L111 8.0 L114 3.8 L117 7.0 L122 5.8 L129 5.5 L133 6.8 L140 9.5 L143 4.4 L147 7.7 L153 2.4 L157 9.4 L160 7.0 L160 14Z'/%3E%3C/svg%3E"); --edge-penseel-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='14' viewBox='0 0 160 14' preserveAspectRatio='none'%3E%3Cpath transform='translate(0 14) scale(1 -1)' d='M0 14 L0 7.0 L6 7.4 L13 4.8 L20 3.9 L27 6.8 L33 3.5 L40 9.5 L43 3.8 L50 2.2 L56 3.5 L61 2.4 L68 5.6 L71 4.4 L74 2.9 L81 3.4 L86 2.5 L90 4.4 L94 8.0 L98 2.8 L101 7.9 L104 9.4 L111 8.0 L114 3.8 L117 7.0 L122 5.8 L129 5.5 L133 6.8 L140 9.5 L143 4.4 L147 7.7 L153 2.4 L157 9.4 L160 7.0 L160 14Z'/%3E%3C/svg%3E"); --edge-penseel-w: 160px;
    --edge-bergen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='14' viewBox='0 0 96 14' preserveAspectRatio='none'%3E%3Cpath d='M0 14 L0 11 C4 11 5 3 9 3 C13 3 14 10 17 10 C20 10 21 6 24 6 C27 6 28 11 31 11 L48 11 C51 11 52 1 57 1 C62 1 63 9 67 9 C70 9 71 5 74 5 C77 5 78 11 81 11 L96 11 L96 14Z'/%3E%3C/svg%3E"); --edge-bergen-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='14' viewBox='0 0 96 14' preserveAspectRatio='none'%3E%3Cpath transform='translate(0 14) scale(1 -1)' d='M0 14 L0 11 C4 11 5 3 9 3 C13 3 14 10 17 10 C20 10 21 6 24 6 C27 6 28 11 31 11 L48 11 C51 11 52 1 57 1 C62 1 63 9 67 9 C70 9 71 5 74 5 C77 5 78 11 81 11 L96 11 L96 14Z'/%3E%3C/svg%3E"); --edge-bergen-w: 96px;
}
.edge-top { position: relative; z-index: 1; margin-top: -13px; }
.section.edge-top { padding-top: calc(clamp(56px, 8vw, 104px) + 13px); }
.site-footer.edge-top { padding-top: calc(64px + 13px); }
.promo.edge-top { padding-top: calc(40px + 13px); }
.promo-tekst.edge-top { padding-top: calc(56px + 13px); }
.edge-bottom { position: relative; z-index: 1; }
.edge-top-golf { -webkit-mask: var(--edge-golf) 0 0 / var(--edge-golf-w) 14px repeat-x, linear-gradient(#000 0 0) 0 13px / 100% calc(100% - 13px) no-repeat;
    mask: var(--edge-golf) 0 0 / var(--edge-golf-w) 14px repeat-x, linear-gradient(#000 0 0) 0 13px / 100% calc(100% - 13px) no-repeat; }
.edge-bottom-golf { -webkit-mask: var(--edge-golf-b) 0 100% / var(--edge-golf-w) 14px repeat-x, linear-gradient(#000 0 0) 0 0 / 100% calc(100% - 13px) no-repeat;
    mask: var(--edge-golf-b) 0 100% / var(--edge-golf-w) 14px repeat-x, linear-gradient(#000 0 0) 0 0 / 100% calc(100% - 13px) no-repeat; }
.edge-top-wolk { -webkit-mask: var(--edge-wolk) 0 0 / var(--edge-wolk-w) 14px repeat-x, linear-gradient(#000 0 0) 0 13px / 100% calc(100% - 13px) no-repeat;
    mask: var(--edge-wolk) 0 0 / var(--edge-wolk-w) 14px repeat-x, linear-gradient(#000 0 0) 0 13px / 100% calc(100% - 13px) no-repeat; }
.edge-bottom-wolk { -webkit-mask: var(--edge-wolk-b) 0 100% / var(--edge-wolk-w) 14px repeat-x, linear-gradient(#000 0 0) 0 0 / 100% calc(100% - 13px) no-repeat;
    mask: var(--edge-wolk-b) 0 100% / var(--edge-wolk-w) 14px repeat-x, linear-gradient(#000 0 0) 0 0 / 100% calc(100% - 13px) no-repeat; }
.edge-top-penseel { -webkit-mask: var(--edge-penseel) 0 0 / var(--edge-penseel-w) 14px repeat-x, linear-gradient(#000 0 0) 0 13px / 100% calc(100% - 13px) no-repeat;
    mask: var(--edge-penseel) 0 0 / var(--edge-penseel-w) 14px repeat-x, linear-gradient(#000 0 0) 0 13px / 100% calc(100% - 13px) no-repeat; }
.edge-bottom-penseel { -webkit-mask: var(--edge-penseel-b) 0 100% / var(--edge-penseel-w) 14px repeat-x, linear-gradient(#000 0 0) 0 0 / 100% calc(100% - 13px) no-repeat;
    mask: var(--edge-penseel-b) 0 100% / var(--edge-penseel-w) 14px repeat-x, linear-gradient(#000 0 0) 0 0 / 100% calc(100% - 13px) no-repeat; }
.edge-top-bergen { -webkit-mask: var(--edge-bergen) 0 0 / var(--edge-bergen-w) 14px repeat-x, linear-gradient(#000 0 0) 0 13px / 100% calc(100% - 13px) no-repeat;
    mask: var(--edge-bergen) 0 0 / var(--edge-bergen-w) 14px repeat-x, linear-gradient(#000 0 0) 0 13px / 100% calc(100% - 13px) no-repeat; }
.edge-bottom-bergen { -webkit-mask: var(--edge-bergen-b) 0 100% / var(--edge-bergen-w) 14px repeat-x, linear-gradient(#000 0 0) 0 0 / 100% calc(100% - 13px) no-repeat;
    mask: var(--edge-bergen-b) 0 100% / var(--edge-bergen-w) 14px repeat-x, linear-gradient(#000 0 0) 0 0 / 100% calc(100% - 13px) no-repeat; }
/* Zachtere, speelsere hoeken voor tegels en kaarten */
.dest-tile, .aff-card, .theme-card { border-radius: 26px 10px 26px 10px; }
.dest-card a { border-radius: 26px 10px 26px 10px; }
/* Boot: rustig deinen */
.h-boat { animation: boatbob 9s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes boatbob { 0%, 100% { transform: translateY(0) rotate(0deg); } 30% { transform: translateY(-1.5px) rotate(-.4deg); } 65% { transform: translateY(1px) rotate(.3deg); } }
.hero.edge-bottom { z-index: 2; margin-bottom: -13px; }
.hero.edge-bottom + .section { padding-top: calc(clamp(56px, 8vw, 104px) + 13px); }
.hero.edge-bottom + .section.edge-top { margin-top: 0; }

/* Reistijdkalender (bestemmingspagina) */
.climate-section { padding-top: clamp(40px, 6vw, 72px); padding-bottom: clamp(24px, 4vw, 40px); }
.climate { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 8px; }
.climate li { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 4px 10px; border-radius: 14px 6px 14px 6px; background: var(--surface); border: 1px solid var(--line); }
.climate .cl-month { font-weight: 700; text-transform: uppercase; font-size: .78rem; letter-spacing: .06em; color: var(--heading); }
.climate .cl-bar { width: 70%; border-radius: 6px; background: var(--line); height: 10px; }
.climate .cl-3 .cl-bar { height: 44px; background: linear-gradient(180deg, #3aa383, var(--teal-deep)); }
.climate .cl-2 .cl-bar { height: 28px; background: linear-gradient(180deg, #f0c25f, #c98f2a); }
.climate .cl-1 .cl-bar { height: 14px; background: #d8b9b3; }
.climate li { justify-content: flex-end; min-height: 118px; }
.climate .cl-label { font-size: .72rem; color: var(--muted); }
.climate .is-now { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent) inset; }
.climate-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; margin: 18px 0 0; font-size: .875rem; color: var(--muted); }
.climate-legend span::before { content: ""; display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.climate-legend .cl-3::before { background: #3aa383; } .climate-legend .cl-2::before { background: #e0a940; }
.climate-legend .cl-1::before { background: #d8b9b3; } .climate-legend .cl-now::before { background: transparent; box-shadow: 0 0 0 2px var(--accent) inset; }
.climate-note { max-width: 780px; margin: 16px auto 0; text-align: center; color: var(--ink); }
@media (max-width: 760px) { .climate { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

/* Meer patronen in kleur (Admin → Vormgeving → achtergrond per blok) */
.bg-papier-wolk  { --pat: var(--cloud-ink); --pat-size: 120px 70px; background: var(--sand); }
.bg-papier-bloesem { --pat: var(--blossom-pink); --pat-size: 90px 90px; background: var(--sand); }
.bg-rood-golf    { --pat: var(--wave-gold); --pat-size: 48px 24px; background: linear-gradient(160deg, #c0392b, #7a1f1a); }
.bg-rood-wolk    { --pat: var(--cloud-gold); --pat-size: 120px 70px; background: linear-gradient(160deg, #c0392b, #7a1f1a); }
.bg-jade-golf    { --pat: var(--wave-gold); --pat-size: 48px 24px; background: linear-gradient(160deg, #2a8f73, #145846); }
.bg-jade-wolk    { --pat: var(--cloud-white); --pat-size: 120px 70px; background: linear-gradient(160deg, #2a8f73, #145846); }
.bg-goud-golf    { --pat: var(--wave-ink); --pat-size: 48px 24px; background: linear-gradient(160deg, #f3d48a, #d9a441); }
.bg-inkt-wolk    { --pat: var(--cloud-gold); --pat-size: 120px 70px; background: linear-gradient(180deg, var(--navy), var(--navy-2)); }
.bg-indigo-golf  { --pat: var(--wave-gold); --pat-size: 48px 24px; background: linear-gradient(160deg, #2e3570, #161936); }
.bg-sakura-bloesem { --pat: var(--blossom-white); --pat-size: 90px 90px; background: linear-gradient(160deg, #d9748f, #9d3355); }
.bg-eigen1-golf  { --pat: var(--wave-white); --pat-size: 48px 24px; background: var(--eigen1-bg, #8c2f39); }
.bg-eigen2-golf  { --pat: var(--wave-ink); --pat-size: 48px 24px; background: var(--eigen2-bg, #e9d8b4); }
.bg-eigen1-wolk  { --pat: var(--cloud-white); --pat-size: 120px 70px; background: var(--eigen1-bg, #8c2f39); }
.bg-eigen2-wolk  { --pat: var(--cloud-ink); --pat-size: 120px 70px; background: var(--eigen2-bg, #e9d8b4); }

/* Hero: losse lagen (vliegtuig/vogels en bloesemtak) – schalen niet mee met de achtergrond */
.hero-sky { position: absolute; top: 96px; left: 3%; width: clamp(300px, 38vw, 680px); height: auto; overflow: visible; pointer-events: none; }
.hero-branch { position: absolute; top: 58px; right: 0; width: clamp(200px, 27vw, 480px); height: auto; overflow: visible; pointer-events: none; }
@media (max-width: 760px) { .hero-sky { top: 70px; width: 70%; } .hero-branch { top: 56px; width: 46%; opacity: .85; } }

.hero-sky .h-plane { animation: fly2 34s linear infinite; }
@keyframes fly2 { from { transform: translateX(-420px); } to { transform: translateX(620px); } }

/* ---------- Regio's ---------- */
.region-chips { justify-content: center; }
@media (prefers-color-scheme: light) { .page-hero:not(.bg-dark):not(.bg-light) .region-chips a:not([aria-current]) { background: rgba(255,255,255,.9); } }
html:not(.dark-auto) .page-hero:not(.bg-dark):not(.bg-light) .region-chips a:not([aria-current]) { background: rgba(255,255,255,.9); }
.table-scroll { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -4px; padding: 4px; }   /* relative: verborgen teksten in de cellen blijven binnen het scrollvak (anders schuift de pagina op mobiel opzij) */
.climate-grid { width: 100%; min-width: 720px; border-collapse: separate; border-spacing: 4px; font-size: .875rem; }
.climate-grid th { font-weight: 700; text-transform: uppercase; font-size: .72rem; letter-spacing: .05em; color: var(--heading); padding: 4px 2px; text-align: center; }
.climate-grid th[scope="row"] { text-align: left; text-transform: none; font-size: .9rem; letter-spacing: 0; white-space: nowrap; padding-right: 12px; }
.climate-grid th[scope="row"] a { color: var(--heading); text-decoration: none; }
.climate-grid th[scope="row"] a:hover { color: var(--accent); }
.climate-grid td { height: 30px; border-radius: 8px 3px 8px 3px; background: var(--line); }
.climate-grid td.cl-3 { background: linear-gradient(180deg, #3aa383, var(--teal-deep)); }
.climate-grid td.cl-2 { background: linear-gradient(180deg, #f0c25f, #c98f2a); }
.climate-grid td.cl-1 { background: #d8b9b3; }
.climate-grid td.is-now { box-shadow: 0 0 0 2px var(--accent); }
.climate-grid th.is-now { color: var(--accent); }

/* ---------- Nu op z'n mooist ---------- */
.now-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.now-grid > * { flex: 0 1 calc((100% - 48px) / 4); min-width: 0; }
.now-card { position: relative; isolation: isolate; display: flex; align-items: flex-end; aspect-ratio: 4 / 3; border-radius: 20px 8px 20px 8px; overflow: hidden; color: #fff; text-decoration: none; box-shadow: var(--shadow); transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.now-card img, .now-card .tile-fill { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .7s var(--ease); }
.now-card[class*="tc-"] .tile-fill { background: var(--tile); }
.now-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 35%, rgba(0,0,0,.65)); }
.now-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); color: #fff; }
.now-card:hover img, .now-card:hover .tile-fill { transform: scale(1.06); }
.now-body { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; }
.now-body strong { font-family: var(--font-display); font-size: 1.25rem; line-height: 1.2; }
.now-body small { font-size: .8rem; opacity: .9; }
.now-body small::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #3aa383; box-shadow: 0 0 0 3px rgba(58,163,131,.35); margin-right: 7px; vertical-align: 1px; }
@media (max-width: 960px) { .now-grid > * { flex-basis: calc((100% - 16px) / 2); } }

/* ---------- Routekaartje ---------- */
.route-map { margin: 0 0 2em; background: var(--surface); border: 1px solid var(--line); border-radius: 22px 8px 22px 8px; overflow: hidden; }
.route-map svg { display: block; width: 100%; height: auto; }
.rm-sea { fill: #dcecf0; }
.rm-land path { fill: #f4ecdc; stroke: #c9bba3; stroke-width: .5; vector-effect: non-scaling-stroke; }
.rm-line { fill: none; stroke: var(--accent); stroke-linecap: round; }
.rm-dot { fill: var(--accent); stroke: #fff; stroke-width: 2; vector-effect: non-scaling-stroke; }
.rm-nr { fill: #fff; font-weight: 700; font-size: 12px; font-family: var(--font-body, sans-serif); }
.rm-name { fill: var(--heading); font-weight: 600; font-size: 14px; paint-order: stroke; stroke: #fff; stroke-width: 3px; stroke-linejoin: round; font-family: var(--font-body, sans-serif); }
.route-map figcaption { padding: 10px 16px; font-size: .9rem; color: var(--muted); border-top: 1px solid var(--line); }
.route-map figcaption strong { color: var(--heading); }
@media (prefers-color-scheme: dark) { html.dark-auto .rm-sea { fill: #16262e; } html.dark-auto .rm-land path { fill: #2a2f2c; stroke: #454b47; } html.dark-auto .rm-name { stroke: #111; } }


/* ---------- Patronen dimmen (Admin → Vormgeving: schuifje 0–100%) ---------- */
.has-pat, .promo-tekst.tc-patroon { position: relative; isolation: isolate; }
.has-pat::before, .promo-tekst.tc-patroon::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: var(--pat) 0 0 / var(--pat-size); opacity: var(--pat-op, .5); }
.pat-0 { --pat-op: 0; } .pat-10 { --pat-op: .1; } .pat-20 { --pat-op: .2; } .pat-30 { --pat-op: .3; } .pat-40 { --pat-op: .4; } .pat-50 { --pat-op: .5; }
.pat-60 { --pat-op: .6; } .pat-70 { --pat-op: .7; } .pat-80 { --pat-op: .8; } .pat-90 { --pat-op: .9; } .pat-100 { --pat-op: 1; }

/* ---------- Automatisch leesbare tekst ----------
   Vaste lichte blokken (goud, lichte eigen kleur) houden donkere tekst, ook in donkere modus.
   Kaarten binnen gekleurde blokken gebruiken altijd hun eigen kaartkleuren. */
.bg-light { --heading: #1d1a22; --ink: #2a2126; --muted: #54484d; --line: rgba(0,0,0,.16); --teal: #14584a; color: var(--ink); }
.bg-light .eyebrow { color: #7a2418; }
.bg-light a:not(.btn) { color: #14584a; }
.bg-light .btn-outline { border-color: #1d1a22; color: #1d1a22; }
.bg-light .aff-card a, .bg-light .theme-card a, .bg-light .dest-card a { color: inherit; }
.bg-light .theme-card .link-arrow { color: var(--teal); }
.bg-dark .read-more { color: var(--gold); }
.dest-hero .eyebrow { color: var(--gold); }

/* ---------- Focuspunt van foto's (Admin: "Belangrijkste deel van de foto") ---------- */
.fp-top { object-position: 50% 12%; } .fp-bottom { object-position: 50% 88%; } .fp-left { object-position: 12% 50%; } .fp-right { object-position: 88% 50%; }
.fp-top-left { object-position: 12% 12%; } .fp-top-right { object-position: 88% 12%; } .fp-bottom-left { object-position: 12% 88%; } .fp-bottom-right { object-position: 88% 88%; }

/* Fotocredit in de hero van een bestemming */
.photo-credit { position: absolute; right: 12px; bottom: 10px; z-index: 2; margin: 0; padding: 3px 9px; border-radius: 999px; font-size: .72rem; color: rgba(255,255,255,.9); background: rgba(0,0,0,.35); }

/* ---------- Fotogalerij ---------- */
.gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(140px, 17vw, 230px); gap: 12px; }
.gallery-item { position: relative; margin: 0; overflow: hidden; border-radius: 18px 6px 18px 6px; background: var(--line); }
.gallery-item.is-big { grid-column: span 2; grid-row: span 2; }
.gallery-item a { display: block; height: 100%; cursor: zoom-in; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease), filter .3s; }
.gallery-item a:hover img, .gallery-item a:focus-visible img { transform: scale(1.05); }
.gallery-item figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 12px 8px; font-size: .8rem; color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.6)); pointer-events: none; }
.gallery-item figcaption small { opacity: .75; }
.gallery-n1 { grid-template-columns: 1fr; grid-auto-rows: clamp(220px, 40vw, 480px); }
.gallery-n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: clamp(180px, 28vw, 360px); }
@media (max-width: 760px) {
    .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 38vw; gap: 8px; }
    .gallery-n1 { grid-template-columns: 1fr; grid-auto-rows: 60vw; }
}

/* Lightbox */
.lightbox { width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(8,10,14,.94); color: #fff; }
.lightbox::backdrop { background: rgba(8,10,14,.6); }
.lightbox figure { margin: 0; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 56px 64px 24px; box-sizing: border-box; pointer-events: none; }
.lightbox img { max-width: 100%; max-height: calc(100vh - 140px); object-fit: contain; border-radius: 6px; pointer-events: auto; }
.lightbox figcaption { display: flex; gap: 16px; justify-content: center; margin-top: 12px; font-size: .9rem; color: rgba(255,255,255,.85); max-width: 900px; text-align: center; }
.lb-count { opacity: .6; white-space: nowrap; }
.lb-btn { position: absolute; border: 0; background: rgba(255,255,255,.12); color: #fff; width: 48px; height: 48px; border-radius: 50%; font-size: 1.9rem; line-height: 1; cursor: pointer; transition: background .2s; }
.lb-btn:hover, .lb-btn:focus-visible { background: rgba(255,255,255,.28); }
.lb-close { top: 14px; right: 14px; }
.lb-prev, .lb-next { top: 50%; transform: translateY(-50%); }
.lb-prev { left: 12px; } .lb-next { right: 12px; }
.lightbox.is-single .lb-prev, .lightbox.is-single .lb-next { display: none; }
@media (max-width: 760px) { .lightbox figure { padding: 56px 8px 16px; } .lb-prev, .lb-next { top: auto; bottom: 14px; transform: none; } }

/* ---------- Reis van de maand ---------- */
.trip-card { display: grid; grid-template-columns: 1.15fr 1fr; overflow: hidden; border-radius: 28px 10px 28px 10px; background: var(--surface); box-shadow: var(--shadow-lg); color: var(--card-ink); --heading: var(--card-heading); --ink: var(--card-ink); --muted: var(--card-muted); --line: var(--card-line); }
.trip-media { position: relative; min-height: 340px; isolation: isolate; }
.trip-media img, .trip-media .tile-fill { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.trip-card[class*="tc-"] .trip-media .tile-fill { background: var(--tile); }
.trip-badge { position: absolute; top: 18px; left: 18px; padding: .45em 1em; border-radius: 999px; background: var(--accent); color: #fff; font-weight: 700; font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; box-shadow: 0 6px 18px rgba(0,0,0,.25); }
.trip-body { padding: clamp(24px, 4vw, 48px); display: flex; flex-direction: column; gap: 4px; }
.trip-body h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); margin-bottom: .3em; }
.trip-text { color: var(--muted); }
.trip-facts { list-style: none; margin: 12px 0 18px; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.trip-facts li { display: flex; flex-direction: column; padding: 8px 14px; border-radius: 12px 4px 12px 4px; background: var(--sand); border: 1px solid var(--line); }
.trip-facts span { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.trip-facts strong { color: var(--heading); }
.trip-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.trip-note { margin: 16px 0 0; font-size: .78rem; color: var(--muted); }
.trip-section .eyebrow { color: var(--accent-text); }
@media (max-width: 860px) { .trip-card { grid-template-columns: 1fr; } .trip-media { min-height: 220px; aspect-ratio: 16 / 9; } }

/* Automatische interne links: gewoon als link, zonder opvallend verschil */
.prose a.auto-link { text-decoration-thickness: 1px; text-underline-offset: 3px; }
.trip-card > * { min-width: 0; } .trip-body h2 { overflow-wrap: anywhere; }

/* Snelkeuze in de hero: klein en subtiel */
.hero-chips.is-subtle { gap: 4px 14px; margin-top: 1.2rem; }
.hero-chips.is-subtle .hero-chips-label { display: none; }
.hero-chips.is-subtle a { padding: .15em 0; border: 0; border-radius: 0; background: none; font-size: .85rem; color: rgba(255,255,255,.78); text-decoration: underline; text-decoration-color: rgba(255,255,255,.3); text-underline-offset: 4px; }
.hero-chips.is-subtle a:hover { background: none; color: #fff; transform: none; text-decoration-color: currentColor; }

/* Reisorganisaties: sorteren en filter als keuzelijst */
.aff-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.aff-toolbar .search-summary { margin: 0; }
.sort-select { display: inline-flex; align-items: center; gap: 8px; font-size: .9rem; color: var(--muted); }
.sort-select select { padding: .45em 2em .45em .8em; border-radius: 999px; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; }
.filter-row { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: center; margin-top: 20px; }
.filter-row .filter-select { margin-top: 0; }

/* ---------- Koppen van subpagina's: eigen kleur, patroon of foto (Admin → Vormgeving) ---------- */
.page-hero.has-photo, .article-head.has-photo, .page-hero.ph-bg, .article-head.ph-bg { position: relative; isolation: isolate; }
.page-hero.has-photo, .article-head.has-photo { background: var(--navy); padding-top: clamp(64px, 9vw, 120px); }
.ph-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.ph-shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(22,16,20,calc(var(--ov, .5) * .7)), rgba(22,16,20,var(--ov, .5))); }
.has-photo h1, .has-photo .lead { text-shadow: 0 2px 18px rgba(0,0,0,.35); }
.page-hero.edge-bottom, .article-head.edge-bottom { z-index: 2; margin-bottom: -13px; padding-bottom: calc(clamp(36px, 5vw, 56px) + 13px); }
.article-head.edge-bottom { padding-bottom: calc(clamp(80px, 10vw, 120px) + 13px); }
.page-hero.has-photo .blog-search input { background: rgba(255,255,255,.95); color: #1d2033; }
.page-hero.bg-dark .chips a:not([aria-current]) { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.3); color: #fff; }
.page-hero.bg-dark .filter-select label, .page-hero.bg-dark .sort-select { color: #fff; }

/* ---------- Banners: foto als achtergrond, midden uitgelijnd, in artikelen ---------- */
.promo.has-bg { position: relative; isolation: isolate; background: var(--navy); padding: clamp(56px, 8vw, 96px) 0; }
.promo-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.promo-shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(18,14,20,.78), rgba(18,14,20,.35)); }
.promo.has-bg .promo-label { color: rgba(255,255,255,.7); }
.promo.has-bg .promo-text h2, .promo.has-bg .promo-title { text-shadow: 0 2px 16px rgba(0,0,0,.35); }
.promo-center .promo-text { flex-direction: column; text-align: center; gap: 20px; }
.promo-center .promo-label { text-align: center !important; }
.promo-center .promo-text p { max-width: 640px; margin-inline: auto; }
.promo-center.has-bg .promo-shade { background: rgba(18,14,20,.55); }
/* In een artikel: compact kader binnen de tekstbreedte */
.prose .promo-inline, .promo-inline { margin: 2em 0; padding: 22px 24px; border-radius: 20px 6px 20px 6px; border: 0; overflow: hidden; }
.promo-inline .container { padding: 0; max-width: none; }
.promo-inline .promo-label { margin-bottom: 6px; }
.promo-inline .promo-text { gap: 18px; }
.promo-inline .promo-title { font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; color: #fff; margin: 0 0 .25em; line-height: 1.25; }
.promo-inline .promo-text p { font-size: .95rem; }
.promo-inline.promo-afbeelding, .promo-inline.promo-code { background: var(--sand); }
.promo-inline.has-bg { padding: 32px 26px; }
.prose .promo-inline a.btn { color: #fff; text-decoration: none; }
@media (max-width: 760px) { .promo-inline .promo-text { flex-direction: column; align-items: flex-start; } }

/* ---------- Achtergrond van hele pagina's (Admin → Vormgeving → Andere pagina's) ---------- */
main.page-bg { min-height: 40vh; }
.page-bg .section-tint { background: rgba(0,0,0,.035); }
.page-bg.bg-dark .section-tint { background: rgba(255,255,255,.06); }

/* Leesbaarheid op gekleurde blokken en pagina's:
   "eilandjes" met een eigen lichte/donkere ondergrond houden hun eigen tekstkleuren */
:is(.bg-dark, .bg-light) :is(.infobox, .route-map, .eu-map-wrap, .climate li, .toc, .form-note, .form-success, .trip-card, .stats) {
    --ink: var(--card-ink); --muted: var(--card-muted); --line: var(--card-line); --heading: var(--card-heading); --teal: var(--card-link); color: var(--card-ink);
}
:is(.bg-dark, .bg-light) :is(.infobox, .route-map, .toc, .trip-card) a:not(.btn) { color: var(--card-link); }
:is(.bg-dark, .bg-light) :is(.share a, .share button) { background: var(--surface); color: var(--card-ink); border-color: var(--card-line); }
/* Formuliervelden en keuzelijsten: altijd donkere tekst op licht, ongeacht de achtergrond */
:is(.bg-dark, .bg-light, .has-photo) :is(select, textarea, input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button])) {
    background-color: #fff; color: #1d2033; border-color: rgba(0,0,0,.18);
}
:is(.bg-dark, .bg-light, .has-photo) :is(input, textarea)::placeholder { color: #6b6f80; }
:is(.bg-dark, .bg-light, .has-photo) select option { background: #fff; color: #1d2033; }
.bg-dark .filter-select label, .bg-dark .sort-select, .bg-dark .sort-select label { color: #fff; }
.bg-light .filter-select label, .bg-light .sort-select, .bg-light .sort-select label { color: #1d1a22; }
/* Filterknoppen (chips) */
.bg-dark .chips a:not([aria-current]) { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.3); color: #fff; }
.bg-dark .chips a[aria-current][href] { background: #fff; border-color: #fff; color: #1d2033; }
.bg-light .chips a:not([aria-current]) { background: rgba(255,255,255,.75); border-color: rgba(0,0,0,.15); color: #1d1a22; }
.bg-light .chips a[aria-current][href] { background: #1d1a22; border-color: #1d1a22; color: #fff; }
.bg-dark .pagination a:not([aria-current]) { color: #fff; border-color: rgba(255,255,255,.3); }
.bg-light .pagination a:not([aria-current]) { color: #1d1a22; border-color: rgba(0,0,0,.2); }
.bg-light .climate-grid th.is-now { color: #7a2418; }
.bg-dark .climate-grid th.is-now { color: #ffe3a6; }
.bg-light a.tag { color: #14584a; background: rgba(255,255,255,.65); }
.bg-dark a.tag { color: #fff; background: rgba(255,255,255,.16); }
.page-body { position: relative; }

/* ---------- Zoeken op de hele site ---------- */
.nav-search { display: inline-flex; align-items: center; gap: 6px; }
.nav-search svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.nav-search-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.site-nav a.nav-search::after { bottom: -8px; }
.site-search { max-width: 640px; }
.search-h { display: flex; align-items: center; gap: 10px; font-size: clamp(1.3rem, 2.2vw, 1.6rem); margin: 44px 0 18px; }
.search-h:first-child { margin-top: 0; }
.search-h span { font-family: var(--font-body); font-size: .8rem; font-weight: 700; padding: .2em .7em; border-radius: 999px; background: var(--sand); color: var(--muted); }
.search-pages { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.search-pages a { font-weight: 600; }

/* ---------- Handig om te weten (landeninformatie) ---------- */
.facts-section { padding-top: clamp(32px, 5vw, 56px); }
.facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin: 0; }
.fact { padding: 14px 16px; border-radius: 16px 5px 16px 5px; background: var(--surface); border: 1px solid var(--line); color: var(--card-ink); --heading: var(--card-heading); --muted: var(--card-muted); }
.fact dt { font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-text); margin-bottom: 4px; }
.fact dd { margin: 0; font-size: .95rem; line-height: 1.5; }
.fact-safety, .fact-health { grid-column: span 2; }
.facts-note { margin: 16px 0 0; font-size: .85rem; color: var(--muted); text-align: center; }
.facts-note .checked { font-weight: 600; color: var(--heading); }
@media (max-width: 620px) { .fact-safety, .fact-health { grid-column: auto; } }

/* ---------- Pagina van een reisorganisatie ---------- */
.aff-detail { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: clamp(24px, 4vw, 56px); align-items: start; }
.aff-detail-main > :first-child { margin-top: 0; }
.aff-dests { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.aff-dests li::before { display: none; }
.aff-dests a { display: inline-block; padding: .4em 1em; border-radius: 999px; border: 1.5px solid var(--line); text-decoration: none; font-weight: 600; }
.aff-dests span { display: inline-block; padding: .4em 1em; border-radius: 999px; border: 1.5px dashed var(--line); font-weight: 600; color: var(--muted); }
.aff-facts { padding: 20px; position: sticky; top: 96px; }
.aff-facts .aff-media { border-radius: 14px; margin-bottom: 14px; aspect-ratio: 3 / 2; }
.facts-compact { grid-template-columns: 1fr; gap: 8px; }
.facts-compact .fact { padding: 10px 12px; }
.keurmerken { list-style: none; padding: 0; margin: 0 0 16px; display: grid; gap: 6px; font-size: .9rem; }
.keurmerken li::before { content: "✓"; color: var(--teal); font-weight: 700; margin-right: 8px; }
.aff-facts .btn-block { width: 100%; justify-content: center; }
.aff-facts-note { margin: 10px 0 0; font-size: .78rem; }
.aff-card a.aff-more { display: block; padding: 0 24px 18px; margin-top: -8px; font-size: .88rem; font-weight: 600; color: var(--teal); }
@media (max-width: 900px) { .aff-detail { grid-template-columns: 1fr; } .aff-facts { position: static; } }
@media (max-width: 960px) { .nav-search-label { position: static; width: auto; height: auto; clip: auto; overflow: visible; } }
.aff-card { display: flex; flex-direction: column; }
.aff-card > .aff-link { flex: 1; height: auto; }
.prose ul.aff-dests { padding-left: 0; } .aff-facts .field-label { margin-top: 14px; }
.site-search + .search-summary { margin-top: 14px; }

/* ---------- Kop van een bestemming: grootte en "hele foto naast de tekst" ---------- */
.dest-hero.hero-compact { padding: clamp(40px, 5vw, 64px) 0 clamp(32px, 4vw, 52px); }
.dest-hero.hero-groot { padding: clamp(96px, 14vw, 200px) 0 clamp(80px, 11vw, 160px); }
.dest-hero.has-side::before { background: radial-gradient(circle at 85% 30%, rgba(255,255,255,.14), transparent 45%), linear-gradient(160deg, var(--teal-deep), var(--navy) 70%); }
.dest-hero.has-side[class*="tc-"]::before { background: radial-gradient(circle at 85% 30%, rgba(255,255,255,.18), transparent 45%), var(--tile); }
.dest-hero.has-side .dest-hero-content { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.dest-hero-content > .dest-hero-side { max-width: none; }
.dest-hero-side { margin: 0; justify-self: end; }
.dest-hero-side img { display: block; width: auto; max-width: 100%; max-height: 400px; height: auto; border-radius: 22px 8px 22px 8px; box-shadow: 0 18px 50px rgba(0,0,0,.35); border: 4px solid rgba(255,255,255,.9); }
.dest-hero.hero-compact .dest-hero-side img { max-height: 260px; }
.dest-hero.hero-groot .dest-hero-side img { max-height: 540px; }
.dest-hero-side figcaption { margin-top: 8px; font-size: .75rem; color: rgba(255,255,255,.75); text-align: right; }
@media (max-width: 860px) {
    .dest-hero.has-side .dest-hero-content { grid-template-columns: 1fr; }
    .dest-hero-side { justify-self: start; }
    .dest-hero-side img { max-height: 300px; }
}
/* Artikel: omslagfoto altijd boven de (gekleurde) kop */
.article-cover { position: relative; z-index: 3; }
.dest-hero.has-side .dest-hero-side { margin-bottom: 44px; }
@media (max-width: 860px) { .dest-hero.has-side .dest-hero-side { margin-bottom: 36px; } }

/* Kop van een bestemming met een gekozen kleur of patroon */
.dest-hero.ph-bg:not(.has-pat)::before { display: none; }
.dest-hero.ph-bg.has-pat::before { background: var(--pat) 0 0 / var(--pat-size); opacity: var(--pat-op, .5); z-index: 0; }
.dest-hero.ph-bg.has-pat { isolation: isolate; }
.dest-hero-light { color: var(--ink); }
.dest-hero-light h1 { color: var(--heading); }
.dest-hero-light .lead { color: var(--muted); }
.dest-hero-light .breadcrumbs, .dest-hero-light .breadcrumbs a { color: var(--muted); }
.dest-hero-light .eyebrow { color: var(--accent-text); }
.dest-hero-light .dest-hero-side figcaption { color: var(--muted); }
.dest-hero-light .dest-hero-side img { border-color: #fff; box-shadow: 0 14px 40px rgba(0,0,0,.18); }
.dest-hero-light.bg-light .eyebrow { color: #7a2418; }

/* ---------- Kosten per land ---------- */
.costs-section { padding-top: clamp(32px, 5vw, 56px); }
.costs-table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 18px 6px 18px 6px; overflow: hidden; color: var(--card-ink); --heading: var(--card-heading); --line: var(--card-line); }
.costs-table th, .costs-table td { padding: 12px 18px; text-align: left; border-bottom: 1px solid var(--line); font-size: .95rem; }
.costs-table tr:last-child th, .costs-table tr:last-child td { border-bottom: 0; }
.costs-table th { font-weight: 500; color: var(--card-ink); width: 60%; }
.costs-table td { font-weight: 700; color: var(--card-heading); }
.costs-table .cost-day_budget th, .costs-table .cost-day_comfort th, .costs-table .cost-day_budget td, .costs-table .cost-day_comfort td { background: color-mix(in srgb, var(--gold) 12%, transparent); }
.costs-note { margin: 14px 0 0; padding: 12px 16px; border-left: 4px solid var(--gold); background: var(--surface); color: var(--card-ink); border-radius: 0 10px 10px 0; font-size: .92rem; }

/* ---------- Reisschema's ---------- */
.itin-card a { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; background: var(--surface); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); transition: transform .3s var(--ease), box-shadow .3s var(--ease); --ink: var(--card-ink); --muted: var(--card-muted); --heading: var(--card-heading); color: var(--card-ink); }
.itin-card a:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.itin-media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--sand); }
.itin-media img, .itin-media .tile-fill { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.itin-media .badge { position: absolute; top: 14px; left: 14px; }
.itin-body { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.itin-body h3 { margin: 0; font-size: 1.3rem; }
.itin-body p { margin: 0; color: var(--muted); }
.itin-stops { font-size: .85rem; font-weight: 600; color: var(--card-link) !important; }
.itin-body .link-arrow { margin-top: auto; }
.itin-meta { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.itin-meta li { display: flex; flex-direction: column; padding: 8px 14px; border-radius: 12px 4px 12px 4px; background: rgba(255,255,255,.14); border: 1px solid rgba(127,127,127,.25); }
.itin-meta span { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; opacity: .75; }
.itin-cover { margin: 0 0 2em; }
.itin-cover img { width: 100%; border-radius: var(--radius); box-shadow: var(--shadow-lg); aspect-ratio: 16 / 9; object-fit: cover; }
.itin-days { list-style: none; margin: 0 0 2em; padding: 0; position: relative; }
.itin-days::before { content: ""; position: absolute; left: 44px; top: 8px; bottom: 8px; width: 2px; background: var(--line); }
.itin-days li { position: relative; display: grid; grid-template-columns: 90px 1fr; gap: 16px; padding: 0 0 26px; }
.itin-day { position: relative; z-index: 1; align-self: start; justify-self: center; padding: .35em .8em; border-radius: 999px; background: var(--accent); color: #fff; font-weight: 700; font-size: .8rem; white-space: nowrap; }
.itin-days h2 { font-size: 1.3rem; margin: 0 0 .3em; }
.itin-days p { margin: 0; }
.itin-tips { padding: 20px 24px; margin: 0 0 1.5em; }
.itin-tips h2 { font-size: 1.2rem; margin: 0 0 .5em; }
.itin-tips ul { margin: 0; padding-left: 1.2em; }
@media (max-width: 620px) { .itin-days li { grid-template-columns: 70px 1fr; gap: 10px; } .itin-days::before { left: 34px; } }


/* ---------- Donkere modus: stijl (Admin → Vormgeving → Donkere modus) ---------- */
@media (prefers-color-scheme: dark) {
    /* Zacht: leisteen-grijs in plaats van bijna zwart, kaarten duidelijk lichter dan de achtergrond */
    :root.dark-auto.dm-zacht, :root.dark-auto.dm-licht {
        --white: #1e2731; --surface: #2c3844; --sand: #242f3a; --line: #3c4b5b;
        --card-line: #3c4b5b; --header-bg: rgba(30,39,49,.92);
        --map-sea: #1f3242; --map-land: #36495a; --map-other: #2b3c4a; --map-stroke: #1e2731;
        --shadow: 0 1px 2px rgba(0,0,0,.25), 0 8px 24px rgba(0,0,0,.25);
    }
    :root.dark-auto.dm-zacht .site-footer, :root.dark-auto.dm-licht .site-footer { background: #171f28; }
    :root.dark-auto.dm-zacht .aff-card, :root.dark-auto.dm-zacht .theme-card, :root.dark-auto.dm-zacht .dest-card a,
    :root.dark-auto.dm-zacht .itin-card a, :root.dark-auto.dm-zacht .infobox, :root.dark-auto.dm-zacht .fact { border: 1px solid #3c4b5b; }

    /* Kaarten licht: blokken met reisorganisaties, bestemmingen, info en kosten blijven licht zoals overdag */
    :root.dark-auto.dm-licht :is(.aff-card, .theme-card, .dest-card a, .itin-card a, .trip-card, .infobox, .fact, .costs-table, .route-map, .climate li, .toc, .faq details, .now-card .now-body) {
        --surface: #fbf8f2; --sand: #f3ede2; --line: #e6dccb; --card-line: #e6dccb;
        --ink: #2a2126; --muted: #6b5f63; --heading: #1d1a22; --teal: #14584a; --accent-text: #9a2e22;
        --card-ink: #2a2126; --card-muted: #6b5f63; --card-heading: #1d1a22; --card-link: #14584a;
        color: #2a2126;
    }
    :root.dark-auto.dm-licht :is(.aff-card, .theme-card, .dest-card a, .itin-card a, .trip-card, .infobox, .costs-table, .route-map, .fact) { background-color: #fbf8f2; }
    :root.dark-auto.dm-licht .rm-sea { fill: #dcecf0; }
    :root.dark-auto.dm-licht .rm-land path { fill: #f4ecdc; stroke: #c9bba3; }
    :root.dark-auto.dm-licht .rm-name { stroke: #fff; }
    :root.dark-auto.dm-licht .aff-card img, :root.dark-auto.dm-licht .dest-card img { filter: none; }
}

/* Routekaartje: labels als kaartjes, zonder overlap, met een lijntje naar de plek */
.rm-pill { fill: #fff; stroke: rgba(0,0,0,.12); stroke-width: 1; filter: drop-shadow(0 1px 2px rgba(0,0,0,.18)); }
.rm-nrbg { fill: var(--accent); }
.route-map .rm-nr { fill: #fff; font-weight: 700; font-size: 12px; }
.route-map .rm-name { fill: #1d2033; font-weight: 600; font-size: 12.5px; stroke: none; paint-order: normal; }
.rm-lead { stroke: #1d2033; stroke-opacity: .55; stroke-width: 1.2; }
.route-map .rm-dot { stroke-width: 2; }
/* Ruimte tussen de omslagfoto en wat eronder komt (routekaartje, inhoudsopgave) */
.article-cover { margin-bottom: clamp(28px, 4vw, 44px); }
.article-cover + * .route-map:first-child { margin-top: 0; }
@media (max-width: 620px) { .route-map figcaption { font-size: .8rem; line-height: 1.5; } }

/* ======================================================================
   Layout-verbeteringen (elk aan/uit bij Admin → Functies)
   ====================================================================== */

/* 1. Zijkolom bij artikelen (grote schermen) */
.article-layout { display: block; }
.article-layout .container { padding-left: 0; padding-right: 0; }
.article-aside { display: none; }
@media (min-width: 1100px) {
    .article-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 56px; align-items: start; }
    .article-layout .container.narrow { max-width: 760px; margin-left: 0; margin-right: 0; }
    .article-aside { display: block; padding-top: 48px; height: 100%; }
    .aside-sticky { position: sticky; top: 96px; display: grid; gap: 20px; }
    .article-layout.has-toc .article-main .toc { display: none; }        /* inhoudsopgave staat al in de zijkolom */
    .aside-toc .toc { margin: 0; }
    .aside-toc .toc ol { font-size: .92rem; }
}
.aside-box { padding: 20px; border-radius: 18px 6px 18px 6px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); color: var(--card-ink); --heading: var(--card-heading); }
.aside-title { font-family: var(--font-display); font-size: 1.2rem; font-weight: 700; color: var(--card-heading); margin: 0 0 12px; }
.aside-aff { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; }
.aside-aff a { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); text-decoration: none; color: var(--card-ink); transition: border-color .2s, transform .2s; }
.aside-aff a:hover { border-color: var(--accent); transform: translateX(2px); }
.aside-aff strong { font-size: .95rem; }
.aside-aff small { grid-column: 1; font-size: .78rem; color: var(--card-muted); }
.aside-aff span { grid-row: 1 / span 2; grid-column: 2; color: var(--accent-text); font-weight: 700; }
.aside-box .btn-block { width: 100%; justify-content: center; }
.aside-note { margin: 10px 0 0; font-size: .74rem; color: var(--card-muted); }

/* 2. Foto's naast elkaar (½ of ⅓) */
html.f-imgrows .prose figure.size-half, html.f-imgrows .prose figure.size-third { float: left; margin: .5em 16px 1.2em 0; }
html.f-imgrows .prose figure.size-half { width: calc(50% - 8px); }
html.f-imgrows .prose figure.size-third { width: calc(33.333% - 10.67px); }
html.f-imgrows .prose figure.size-half + figure.size-half,
html.f-imgrows .prose figure.size-third + figure.size-third + figure.size-third { margin-right: 0; }
html.f-imgrows .prose figure.size-half img, html.f-imgrows .prose figure.size-third img { aspect-ratio: 4 / 3; object-fit: cover; }
html.f-imgrows .prose figure.size-half + :not(figure.size-half),
html.f-imgrows .prose figure.size-third + :not(figure.size-third) { clear: both; }
html.f-imgrows .prose figure.size-half figcaption, html.f-imgrows .prose figure.size-third figcaption { font-size: .82rem; }
@media (max-width: 560px) { html.f-imgrows .prose figure.size-third { width: calc(50% - 8px); } html.f-imgrows .prose figure.size-third + figure.size-third { margin-right: 0; } html.f-imgrows .prose figure.size-third + figure.size-third + figure.size-third { width: 100%; } }

/* 3. Kaders: Tip, Let op, Citaat van een reiziger */
html.f-callouts .prose blockquote.callout-tip, html.f-callouts .prose blockquote.callout-warn {
    position: relative; margin: 1.8em 0; padding: 18px 20px 18px 60px; border: 0; border-radius: 16px 5px 16px 5px;
    font-family: var(--font-body); font-size: 1rem; line-height: 1.65; color: var(--card-ink);
}
html.f-callouts .prose blockquote.callout-tip { background: color-mix(in srgb, #3aa383 13%, var(--surface)); }
html.f-callouts .prose blockquote.callout-warn { background: color-mix(in srgb, #e0a940 18%, var(--surface)); }
html.f-callouts .prose blockquote.callout-tip::before, html.f-callouts .prose blockquote.callout-warn::before {
    position: absolute; left: 16px; top: 16px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
    font-weight: 800; font-size: 1rem; color: #fff; font-family: var(--font-body);
}
html.f-callouts .prose blockquote.callout-tip::before { content: "✓"; background: #2f8f72; }
html.f-callouts .prose blockquote.callout-warn::before { content: "!"; background: #c98f2a; }
html.f-callouts .prose blockquote.callout-tip::after, html.f-callouts .prose blockquote.callout-warn::after {
    position: absolute; left: 60px; top: -10px; padding: 2px 10px; border-radius: 999px; font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #fff;
}
html.f-callouts .prose blockquote.callout-tip::after { content: "Tip"; background: #2f8f72; }
html.f-callouts .prose blockquote.callout-warn::after { content: "Let op"; background: #c98f2a; }
html.f-callouts .prose blockquote.callout-quote { position: relative; margin: 2em 0; padding: 22px 26px 22px 70px; border: 0; border-radius: 18px 6px 18px 6px; background: var(--sand); font-style: italic; font-size: 1.25rem; line-height: 1.55; }
html.f-callouts .prose blockquote.callout-quote::before { content: "“"; position: absolute; left: 18px; top: -6px; font-size: 5rem; line-height: 1; color: var(--accent); font-family: var(--font-display); font-style: normal; }
html.f-callouts .prose blockquote.callout-quote strong { display: block; margin-top: .6em; font-style: normal; font-family: var(--font-body); font-size: .85rem; letter-spacing: .04em; color: var(--muted); }

/* 5. Terug naar boven + plakkende knop op mobiel */
.to-top { position: fixed; right: 18px; bottom: 18px; z-index: 40; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #fff; box-shadow: 0 8px 22px rgba(0,0,0,.22); opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .25s, transform .25s; }
.to-top svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.to-top.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { background: var(--accent-dark); color: #fff; }
.mobile-cta { display: none; }
@media (max-width: 760px) {
    .mobile-cta { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 39; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); background: var(--header-bg, rgba(255,255,255,.94)); backdrop-filter: blur(8px); box-shadow: 0 -6px 20px rgba(0,0,0,.12); transform: translateY(110%); transition: transform .3s; }
    .mobile-cta.is-visible { transform: none; }
    .mobile-cta .btn { width: 100%; justify-content: center; }
    body.has-mcta .to-top { bottom: 86px; }
}

/* 7. Extra leesbare tekst */
html.f-readable .prose { font-size: 1.1rem; line-height: 1.8; }
html.f-readable .prose p, html.f-readable .prose li { max-width: 68ch; }
html.f-readable .prose p { margin: 0 0 1.25em; }
html.f-readable .prose h2 { margin-top: 2.2em; }
html.f-h2line .prose h2 { position: relative; padding-top: 18px; }
html.f-h2line .prose h2::before { content: ""; position: absolute; left: 0; top: 0; width: 44px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--accent), var(--gold)); }
html.f-readable .prose h3 { margin-top: 1.8em; }
html.f-readable .prose ul li, html.f-readable .prose ol li { margin-bottom: .45em; }
@media (max-width: 620px) { html.f-readable .prose { font-size: 1.04rem; line-height: 1.75; } }

/* Minder witruimte onder de infoblokken op landpagina's (klimaat, handig om te weten, kosten) */
.facts-section, .costs-section { padding-bottom: clamp(24px, 4vw, 40px); }
:is(.climate-section, .facts-section, .costs-section) + .section:not(.section-tint):not(.facts-section):not(.costs-section) { padding-top: clamp(28px, 4vw, 48px); }

/* Video's in de tekst (YouTube/Vimeo) */
.prose .video-embed, .video-embed { margin: 1.8em 0; clear: both; }
.video-frame { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius, 14px); overflow: hidden; background: #14211b; }
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-play { position: absolute; inset: 0; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  border: 0; cursor: pointer; color: #fff; font: inherit; text-align: center; padding: 16px;
  background: radial-gradient(ellipse at 50% 40%, color-mix(in srgb, var(--accent) 55%, #14211b) 0%, #14211b 75%); }
.video-play-icon { width: 76px; height: 76px; border-radius: 50%; background: rgba(255,255,255,.95); position: relative; box-shadow: 0 8px 30px rgba(0,0,0,.35); transition: transform .2s ease; }
.video-play-icon::after { content: ""; position: absolute; left: 31px; top: 24px; border-style: solid; border-width: 14px 0 14px 22px; border-color: transparent transparent transparent var(--accent); }
.video-play:hover .video-play-icon, .video-play:focus-visible .video-play-icon { transform: scale(1.08); }
.video-play:focus-visible { outline: 3px solid var(--gold, #e0b04a); outline-offset: -6px; }
.video-play-text { font-weight: 700; font-size: 1.05rem; }
.video-play small { font-size: .8rem; opacity: .8; }
.video-embed figcaption { margin-top: .6em; font-size: .9rem; color: var(--muted, #5b6b63); text-align: center; }

/* Banner in de zijkolom van artikelen */
.promo-side, .prose .promo-side { margin: 0; padding: 18px 18px 20px; }
.promo-side .promo-text { flex-direction: column; align-items: flex-start; gap: 12px; }
.promo-side .promo-title { font-size: 1.25rem; }
.promo-side .promo-text p { font-size: .9rem; }
.promo-side .btn { width: 100%; justify-content: center; text-align: center; }
.promo-side.has-bg { padding: 26px 20px; }
.promo-side .promo-image { display: block; width: 100%; max-width: 100%; }
.promo-side .promo-image img { width: 100%; height: auto; border-radius: 10px; }
.promo-side .promo-frame { width: 100%; }
@media (min-width: 1100px) {
    .aside-sticky { max-height: calc(100vh - 112px); overflow-y: auto; scrollbar-width: thin; padding-bottom: 4px; }
}

/* Reisorganisaties: wisselen tussen kaarten en tabel */
.view-toggle { display: inline-flex; border: 1px solid var(--card-line); border-radius: 999px; padding: 3px; background: var(--surface); }
.view-toggle a { padding: 6px 14px; border-radius: 999px; font-size: .9rem; font-weight: 600; color: var(--card-ink); text-decoration: none; }
.view-toggle a[aria-current="page"] { background: var(--teal-deep); color: #fff; }
.view-toggle a:not([aria-current]):hover { background: var(--sand); }

/* Tabel: wie reist waarheen? */
.aff-table-wrap { overflow: auto; max-height: 80vh; border: 1px solid var(--card-line); border-radius: var(--radius-sm); background: var(--surface); box-shadow: var(--shadow); }
.aff-table-wrap:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.aff-table { border-collapse: separate; border-spacing: 0; width: 100%; font-size: .95rem; color: var(--card-ink); }
.aff-table th, .aff-table td { padding: 10px 12px; border-bottom: 1px solid var(--card-line); text-align: center; background: var(--surface); }
.aff-table thead th { position: sticky; top: 0; z-index: 2; vertical-align: bottom; background: var(--sand); color: var(--card-heading); }
.aff-table .aff-t-name { position: sticky; left: 0; z-index: 1; text-align: left; min-width: 190px; max-width: 240px; border-right: 1px solid var(--card-line); }
.aff-table thead .aff-t-name { z-index: 3; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; }
.aff-table tbody .aff-t-name a { font-weight: 700; color: var(--card-link); }
.aff-table tbody .aff-t-name small { display: block; font-weight: 500; color: var(--card-muted); font-size: .8rem; }
.aff-t-dest a { color: var(--card-heading); text-decoration: none; font-weight: 600; font-size: .85rem; }
.aff-t-dest span { writing-mode: vertical-rl; transform: rotate(180deg); display: inline-block; max-height: 140px; white-space: nowrap; }
.aff-t-dest a:hover span { text-decoration: underline; }
.aff-table .is-current { background: color-mix(in srgb, var(--gold) 16%, var(--surface)); }
.aff-check { display: inline-block; width: 22px; height: 22px; border-radius: 50%; background: var(--teal-deep); position: relative; vertical-align: middle; }
.aff-check::after { content: ""; position: absolute; left: 8px; top: 4px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.aff-table td.no::before { content: "–"; color: var(--card-line); }
.aff-table tbody tr:hover th, .aff-table tbody tr:hover td { background: color-mix(in srgb, var(--teal) 7%, var(--surface)); }
.aff-table .aff-t-go { white-space: nowrap; }
.aff-table-note { margin-top: 12px; }

/* Banner tussen de blogberichten */
.grid-3 > .promo-feed { grid-column: 1 / -1; margin: 4px 0; }
.promo-feed .promo-image { max-width: 970px; margin: 0 auto; }
.promo-feed .promo-title { font-size: 1.45rem; }
@media (max-width: 620px) { .aff-table .aff-t-name { min-width: 130px; max-width: 150px; } .aff-table th, .aff-table td { padding: 8px 8px; } }

/* Kaart: duidelijke grenzen tussen gemarkeerde buurlanden (bv. India en Bhutan); namen zijn ook klikbaar */
.eu-dest path { stroke-width: 2; stroke-linejoin: round; paint-order: stroke; }
.eu-labels .eu-lab { pointer-events: auto; cursor: pointer; }
.eu-labels .eu-lab:hover rect, .eu-labels .eu-lab.is-hover rect { fill: var(--gold); stroke: var(--gold); }
.eu-dest.is-hover path { fill: var(--gold); }

/* Blog: categorieën en landkeuze op één rij */
.blog-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 24px; }
.blog-filters .chips { margin-top: 0; }
.blog-land { display: flex; align-items: center; }
.blog-land .filter-select { margin-top: 0; gap: 8px; }
.blog-land .filter-select label { font-size: .9rem; }
.blog-land .filter-select select { padding: .45em 2.2em .45em 1em; font-size: .95rem; }
@media (min-width: 761px) { .blog-filters .blog-land { margin-left: auto; } }

/* ============ Reis-shop (/reizen) ============ */
.shop-layout { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 36px; align-items: start; }
.shop-filters { position: sticky; top: 92px; }
.shop-filter-box { background: var(--surface); border: 1px solid var(--card-line); border-radius: var(--radius); padding: 6px 18px 18px; box-shadow: var(--shadow); color: var(--card-ink); }
.shop-filter-box > summary { list-style: none; cursor: default; font-weight: 700; padding: 12px 0 4px; font-family: var(--font-display); font-size: 1.2rem; color: var(--card-heading); pointer-events: none; }
.shop-filter-box > summary::-webkit-details-marker { display: none; }
.shop-filter-box > summary span { display: inline-grid; place-items: center; min-width: 22px; height: 22px; margin-left: 6px; border-radius: 999px; background: var(--accent); color: #fff; font: 700 .75rem var(--font-body); vertical-align: middle; }
.shop-facet { border-top: 1px solid var(--card-line); padding-top: 12px; margin-top: 12px; }
.shop-facet-title { margin: 0 0 6px; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--card-muted); }
.shop-facet-list { list-style: none; margin: 0; padding: 0; }
.shop-facet-list li::before { display: none; }
.shop-facet-list.is-long li.is-more { display: none; }
.shop-facet-list a { display: flex; justify-content: space-between; gap: 10px; padding: 5px 8px; margin: 0 -8px; border-radius: 8px; color: var(--card-ink); text-decoration: none; font-size: .94rem; }
.shop-facet-list a:hover { background: var(--sand); }
.shop-facet-list a small { color: var(--card-muted); font-variant-numeric: tabular-nums; }
.shop-facet-list a[aria-current] { background: var(--teal-deep); color: #fff; font-weight: 600; }
.shop-facet-list a[aria-current] small { color: #fff; }
.shop-more { margin-top: 4px; padding: 0; border: 0; background: none; color: var(--card-link); font: 600 .88rem var(--font-body); cursor: pointer; text-decoration: underline; }
.shop-clear { display: inline-block; margin-top: 14px; font-weight: 600; font-size: .92rem; }
.shop-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 22px; }
.shop-toolbar .search-summary { margin: 0; }
.shop-toolbar .sort-select { margin-left: auto; }
.shop-active { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.shop-active li::before { display: none; }
.shop-active a { display: inline-flex; gap: 6px; align-items: center; padding: 4px 12px; border-radius: 999px; background: var(--sand); border: 1px solid var(--card-line); color: var(--card-ink); text-decoration: none; font-size: .88rem; font-weight: 600; }
.shop-active a:hover { border-color: var(--accent); }
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 22px; }
.shop-card { background: var(--surface); border: 1px solid var(--card-line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.shop-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.shop-card-link { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; }
.shop-card-media { position: relative; aspect-ratio: 3 / 2; background: var(--sand); overflow: hidden; }
.shop-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shop-duration { position: absolute; left: 12px; bottom: 12px; padding: 4px 10px; border-radius: 999px; background: rgba(20, 16, 22, .78); color: #fff; font-size: .8rem; font-weight: 700; }
.shop-card-body { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px 18px; flex: 1; color: var(--card-ink); }
.shop-place { margin: 0; font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-text); }
.shop-card h3 { margin: 0; font-size: 1.08rem; line-height: 1.3; color: var(--card-heading); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.shop-types { margin: 0; font-size: .85rem; color: var(--card-muted); }
.shop-card-foot { display: flex; justify-content: space-between; align-items: end; gap: 10px; margin-top: auto; padding-top: 10px; }
.shop-org { display: inline-flex; align-items: center; gap: 8px; font-size: .85rem; font-weight: 600; color: var(--card-muted); min-width: 0; }
.shop-org img { width: 28px; height: 28px; object-fit: contain; border-radius: 6px; background: #fff; border: 1px solid var(--card-line); flex: none; }
.shop-price { white-space: nowrap; font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; color: var(--card-heading); }
.shop-price small { font: 500 .78rem var(--font-body); color: var(--card-muted); margin-right: 2px; }
.shop-card .btn-block { margin-top: 12px; }
.pagination-gap { padding: 0 6px; color: var(--muted); align-self: center; }
.shop-note { margin-top: 26px; }
@media (max-width: 900px) {
    .shop-layout { grid-template-columns: 1fr; gap: 20px; }
    .shop-filters { position: static; }
    .shop-filter-box > summary { cursor: pointer; pointer-events: auto; padding: 12px 0; }
    .shop-filter-box > summary::after { content: "▾"; float: right; color: var(--card-muted); }
    .shop-filter-box[open] > summary::after { content: "▴"; }
    .shop-toolbar .sort-select { margin-left: 0; }
}
.shop-filter-box:not([open]) { padding-bottom: 6px; }
.promo[hidden] { display: none !important; }

/* Reis-shop: tekst per land, blok op de homepage en onder artikelen */
.shop-intro { padding: 34px 0 0; }
.shop-intro .container { max-width: 860px; }
.shop-intro-text p { margin: 0 0 12px; font-size: 1.06rem; line-height: 1.7; text-wrap: pretty; }
.shop-intro-text h2, .shop-intro-text h3 { margin: 18px 0 8px; font-size: 1.2rem; }
.shop-intro-links { margin: 4px 0 0; font-size: .95rem; }
.shop-intro-links span { font-weight: 700; margin-right: 4px; }
.shop-intro + .shop-section { padding-top: 34px; }
.shop-grid-3 { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
@media (min-width: 900px) { .shop-grid-3 { grid-template-columns: repeat(3, 1fr); } }
.shop-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: -6px 0 22px; }
.shop-tabs button { padding: 8px 18px; border-radius: 999px; border: 1px solid rgba(42, 33, 38, .15); background: #fff; color: #2a2126; font: 600 .95rem var(--font-body); cursor: pointer; }
.shop-tabs button:hover { border-color: var(--accent); }
.shop-tabs button[aria-selected="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.shop-grid[hidden] { display: none !important; }

/* Rand onderkant van de kop op een bestemmingspagina (Admin → Vormgeving) */
.dest-hero.edge-bottom { z-index: 2; margin-bottom: -13px; padding-bottom: calc(clamp(48px, 7vw, 96px) + 13px); }
.dest-hero.hero-compact.edge-bottom { padding-bottom: calc(clamp(32px, 4vw, 52px) + 13px); }
.dest-hero.hero-groot.edge-bottom { padding-bottom: calc(clamp(80px, 11vw, 160px) + 13px); }
.dest-hero.edge-bottom + .infobox-wrap { z-index: 4; }

.aff-table-wrap { position: relative; }   /* idem voor de tabel op /reisorganisaties */