/* Vakantiewoningen.nl — design-systeem v3 (bron: Claude Design handoff, V3-object).
   Palet wit/coral/ink-blauw, font Manrope. Eén bron van waarheid voor alle pagina's. */

/* Manrope van onze eigen server. Het is een variabel lettertype, dus één bestand per tekenset
   dekt alle gewichten van 200 tot 800. De relatieve paden worden door WhiteNoise omgezet naar
   de gehashte bestandsnamen, dus caching blijft werken.
   font-display: swap houdt de tekst leesbaar tijdens het laden; omdat het bestand nu vooraf
   geladen wordt (preload in base.html) is het er meestal al vóór de eerste tekening, en blijft
   de verschuiving uit die Google Fonts wél veroorzaakte. */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/manrope-latin-ext.6d36d5bdedfa.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: 200 800;
  font-display: swap;
  src: url("../fonts/manrope-latin.938c6e8019b6.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;
}

:root {
  --bg: #FFFFFF;
  --surface: #F6F7F9;
  --surface2: #EDEFF3;
  --ink: #0E1A2B;
  --ink2: #41506A;
  /* --ink3 was #7A8699: 3,69 contrast op wit, en dat haalt de 4,5 van WCAG AA niet. Hij staat
     onder plaatsnamen, prijzen en footerkopjes, dus dat is geen randgeval maar een groot deel
     van de kleine tekst op de site. Nu 4,54. */
  --ink3: #6A778B;
  --line: #E3E7ED;
  --coral: #FF5A3C;
  --coral-dk: #E04220;
  --coral-lt: #FFE6E0;
  /* Coral is een prachtige merkkleur maar een slechte tekstkleur: 3,10 op wit, en ook de
     donkere variant haalt met 4,23 net niet. Vandaar een aparte tint die alleen voor TEKST en
     voor gekleurde vlakken met witte letters gebruikt wordt (4,56). De merkkleur zelf blijft
     ongemoeid voor randen, vlakken en accenten waar geen tekst op staat. */
  --coral-tekst: #D32000;
  --sea: #0E6EA8;
  --gold: #F7B500;
  /* Idem voor goud: #F7B500 is 1,82 op wit en dus onleesbaar als tekstkleur. */
  --gold-tekst: #976E00;
  --success: #0E8A5F;

  --r-xs: 4px; --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 22px; --r-pill: 999px;
  --sh-sm: 0 8px 28px -16px rgba(14,26,43,.18);
  --sh-md: 0 14px 40px -22px rgba(14,26,43,.28);
  --sh-lg: 0 24px 60px -20px rgba(14,26,43,.40);

  --gutter: 56px;
  --maxw: 1280px;
  --font: 'Manrope', 'Inter Tight', system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg); color: var(--ink); font-family: var(--font);
  font-weight: 400; line-height: 1.5; -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
::selection { background: rgba(255,90,60,.22); }

h1, h2, h3 { margin: 0; font-weight: 800; letter-spacing: -0.02em; line-height: 1.05; }
h1 { font-size: clamp(32px, 4vw, 54px); letter-spacing: -0.03em; }
h2 { font-size: clamp(26px, 2.4vw, 40px); }
h3 { font-size: 20px; }
p { margin: 0 0 1em; color: var(--ink2); }

/* Layout */
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding-top: 88px; }
.section--surface { background: var(--surface); padding-block: 88px; }
.eyebrow { color: var(--coral-tekst); font-weight: 700; font-size: 13px; letter-spacing: .08em;
  text-transform: uppercase; }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font);
  font-weight: 700; font-size: 15px; padding: 12px 20px; border-radius: var(--r-md);
  border: 1px solid transparent; cursor: pointer; transition: transform .06s, background .15s; }
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--coral-tekst); color: #fff; }
.btn--primary:hover { background: #C41E00; }
.btn--dark { background: var(--ink); color: #fff; }
.btn--ghost { background: #fff; color: var(--ink); border-color: var(--line); }

/* Topbar */
.topbar { position: sticky; top: 0; z-index: 50; background: #fff; border-bottom: 1px solid var(--line); }
.topbar__in { height: 72px; display: flex; align-items: center; gap: 28px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; letter-spacing: -0.02em; }
.brand__mark { width: 30px; height: 30px; border-radius: 8px; background: var(--coral); color: #fff;
  display: grid; place-items: center; font-size: 18px; font-weight: 800; }
.brand__logo { height: 30px; width: auto; display: block; }
@media (max-width: 560px) { .brand__logo { height: 26px; } }
.nav { display: flex; gap: 22px; margin-left: 8px; }
.nav a { font-weight: 600; font-size: 15px; color: var(--ink2); padding: 6px 0;
  border-bottom: 2px solid transparent; }
.nav a:hover { color: var(--ink); }
.nav a.is-active { color: var(--ink); border-bottom-color: var(--coral); }
.topbar__right { margin-left: auto; display: flex; align-items: center; gap: 18px; }
/* Alleen de gewone tekstlinks krijgen de gedempte kleur; knoppen houden hun eigen tekstkleur
   (anders kreeg .btn--dark donkere tekst op een donkere knop). */
.topbar__right a:not(.btn) { font-weight: 600; font-size: 15px; color: var(--ink2); }
.topbar__right a:not(.btn):hover { color: var(--ink); }
/* Mobiele hamburger + uitklapmenu (verborgen op desktop) */
.topbar__burger { display: none; margin-left: auto; width: 44px; height: 44px; flex-direction: column;
  align-items: center; justify-content: center; gap: 5px; background: transparent; border: none;
  border-radius: 10px; cursor: pointer; position: relative; z-index: 130; }
.topbar__burger span { width: 22px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .2s, opacity .2s; }
.topbar__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.topbar__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.topbar__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
/* Fullscreen mobiel menu: vult het scherm onder de 72px-header (die met brand + kruis zichtbaar
   blijft om te sluiten). display:none op desktop, want daar toont .nav de links. */
.mnav { display: none; position: fixed; top: 72px; left: 0; right: 0; bottom: 0; z-index: 120;
  background: #fff; flex-direction: column; padding: 14px var(--gutter) calc(20px + env(safe-area-inset-bottom));
  overflow-y: auto; overscroll-behavior: contain; }
/* Hoofdlinks: groot, met een coral chevron rechts. */
.mnav a:not(.mnav__cta) { display: flex; align-items: center; justify-content: space-between;
  padding: 16px 2px; font-weight: 700; font-size: 20px; color: var(--ink);
  border-bottom: 1px solid var(--line2); }
.mnav a:not(.mnav__cta)::after { content: "\203A"; color: var(--coral); font-size: 26px;
  font-weight: 400; line-height: 1; margin-left: 16px; }
.mnav a:not(.mnav__cta):active { color: var(--coral); }
/* Accountsectie: label + rustiger links. */
.mnav__sep { display: flex; align-items: center; gap: 12px; margin: 18px 2px 4px;
  font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink3); }
.mnav__sep::after { content: ""; flex: 1; height: 1px; background: var(--line2); }
.mnav__sec { font-size: 17px !important; font-weight: 600 !important; color: var(--ink2) !important; }
.mnav__cta { margin-top: auto; text-align: center; color: #fff !important; font-size: 17px;
  padding: 17px; border-radius: 999px; }
body.menu-open { overflow: hidden; }

/* Footer */
/* Nominatiebadge Website van het Jaar; donkere variant voor de lichte footer. */
.footer__badge { display: block; width: 132px; height: auto; margin-top: 16px; }
.footer { background: var(--surface); border-top: 1px solid var(--line); margin-top: 96px;
  padding-block: 56px 32px; }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; gap: 28px; }
/* Bewust een h2 en geen h4: Lighthouse meldde terecht dat de koppenvolgorde een
   niveau oversloeg (h2 in de pagina, dan h4 in de footer). Voor een schermlezer is
   dat een gat in de structuur; visueel verandert er niets. */
.footer .footer__kop { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink2);
  margin: 0 0 12px; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.footer a { color: var(--ink2); font-size: 14px; }
.footer a:hover { color: var(--ink); }
.footer__bar { display: flex; justify-content: space-between; margin-top: 40px; padding-top: 20px;
  border-top: 1px solid var(--line); color: var(--ink2); font-size: 13px; }

/* Deal / accommodatie-card */
.card-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
  transition: box-shadow .18s, transform .18s; }
.card:hover { box-shadow: var(--sh-md); transform: translateY(-2px); }
.card__media { position: relative; aspect-ratio: 4/3; background: var(--surface2); }
.card__media img { width: 100%; height: 100%; object-fit: cover; }
.card__badge { position: absolute; top: 10px; left: 10px; background: var(--coral-tekst); color: #fff;
  font-weight: 700; font-size: 12px; padding: 4px 8px; border-radius: var(--r-sm); }
.card__body { padding: 12px 14px 14px; }
.card__name { font-weight: 800; font-size: 15px; letter-spacing: -0.01em; }
.card__loc { color: var(--ink3); font-size: 13px; margin-top: 2px; }
.card__price { margin-top: 10px; font-weight: 800; color: var(--coral-tekst); }
.card__price small { color: var(--ink3); font-weight: 600; }

/* Hero + zoekbalk */
.hero { position: relative; background:
  linear-gradient(180deg, rgba(14,26,43,.06), rgba(14,26,43,.30)),
  linear-gradient(135deg, #2a3f57, #0E1A2B); color: #fff; }
.hero__in { max-width: var(--maxw); margin: 0 auto; padding: 92px var(--gutter) 120px; }
.hero h1 { color: #fff; max-width: 18ch; }
.hero__sub { margin-top: 14px; max-width: 46ch; color: rgba(255,255,255,.86); font-size: 18px; }
.searchbar { margin-top: 28px; background: #fff; border-radius: var(--r-xl); box-shadow: var(--sh-lg);
  padding: 10px; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr auto; gap: 8px; max-width: 920px; }
.searchbar label { display: block; font-size: 11px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink3); padding: 8px 10px 0; }
.searchbar input, .searchbar select { width: 100%; border: 0; background: transparent; font-family: var(--font);
  font-size: 15px; font-weight: 600; color: var(--ink); padding: 2px 10px 10px; outline: none; }
.searchbar .field { border-radius: var(--r-md); }
.searchbar .field:hover { background: var(--surface); }
.searchbar .btn { align-self: center; height: 52px; padding-inline: 26px; }

/* ---- Site-brede zoekbalk (sbx) ---- */
/* Sticky variant: verschijnt pas als je voorbij de hero scrollt (JS zet .is-visible). */
.stickysearch { position: fixed; top: 72px; left: 0; right: 0; z-index: 44; background: #fff;
  border-bottom: 1px solid var(--line); padding: 10px 0; transform: translateY(-130%);
  transition: transform .28s ease; visibility: hidden; }
.stickysearch.is-visible { transform: translateY(0); visibility: visible; }

/* Mobiele zoekknop: alleen op smalle schermen. Vervangt daar de volledige sticky balk, die
   op een telefoon te veel ruimte pakt. Schuift van onderen in zodra je voorbij de hero bent. */
.msearch { display: none; }
@media (max-width: 720px) {
  .stickysearch { display: none; }
  /* Schuift van onderen in via `bottom` (transform bleek hier onbetrouwbaar voor fixed). */
  .msearch { position: fixed; left: 14px; right: 14px; bottom: -84px; z-index: 60;
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    background: var(--coral); color: #fff; border: none; border-radius: 999px;
    padding: 15px 20px; font-size: 16px; font-weight: 800; font-family: var(--font);
    box-shadow: 0 8px 24px rgba(224,66,32,.42); cursor: pointer;
    transition: bottom .28s ease; }
  .msearch.is-visible { bottom: 14px; }
  .msearch svg { flex: 0 0 auto; }
}
.sbx { position: relative; background: #fff; border-radius: var(--r-xl); padding: 8px;
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr .9fr auto; gap: 6px; align-items: stretch;
  border: 1px solid var(--line);
  /* Eigen tekstkleur, want de hero zet color:#fff en de balk staat daarin. Zonder deze regel
     erven de popovers dat wit en staat er witte tekst op hun witte achtergrond: de labels
     Volwassenen/Kinderen/Slaapkamers waren onzichtbaar. */
  color: var(--ink); }
.hero .sbx, .hero-searchbar .sbx { box-shadow: var(--sh-lg); border: none; }
.hero-searchbar { max-width: 960px; margin-top: 24px; }
.stickysearch .sbx { max-width: 1100px; margin: 0 auto; }
.sbx__field { position: relative; text-align: left; background: transparent; border: none;
  border-right: 1px solid var(--line); padding: 8px 14px; cursor: pointer; font-family: var(--font);
  border-radius: var(--r-md) 0 0 var(--r-md); min-width: 0; }
.sbx__field:hover { background: var(--surface); }
.sbx__field label { display: block; font-size: 11px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink3); cursor: pointer; }
.sbx__field input { width: 100%; border: 0; background: transparent; font-family: var(--font);
  font-size: 15px; font-weight: 600; color: var(--ink); padding: 2px 0 0; outline: none; }
.sbx__field > span { display: block; font-size: 15px; font-weight: 600; color: var(--ink); margin-top: 2px; }
.sbx__submit { align-self: center; height: 48px; padding-inline: 26px; }
.sbx-pop { position: absolute; top: calc(100% + 8px); z-index: 60; background: #fff;
  border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--sh-lg); color: var(--ink); }
.sbx-ac { position: absolute; top: calc(100% + 8px); left: 0; width: 340px; z-index: 60;
  background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--sh-lg);
  overflow: hidden; }
.sbx-ac__item { display: block; width: 100%; text-align: left; padding: 11px 16px; background: #fff;
  border: none; border-top: 1px solid var(--line2); cursor: pointer; font-family: var(--font); }
.sbx-ac__item:first-child { border-top: none; }
.sbx-ac__item:hover { background: var(--surface); }
.sbx-ac__item b { display: block; font-size: 14px; font-weight: 700; color: var(--ink); }
.sbx-ac__item span { display: block; font-size: 12px; color: var(--ink3); margin-top: 2px; }
.sbx-cal { left: 50%; transform: translateX(-50%); width: 640px; padding: 20px 20px 16px; }
.sbx-cal__months { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.sbx-cal__nav { position: absolute; top: -4px; width: 34px; height: 34px; border-radius: 999px;
  background: #fff; border: 1px solid var(--line); cursor: pointer; font-size: 16px; z-index: 2; }
.sbx-cal__nav--prev { left: 0; } .sbx-cal__nav--next { right: 0; }
.sbx-cal__title { text-align: center; font-weight: 800; font-size: 15px; margin-bottom: 12px; }
.sbx-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.sbx-cal__wd { text-align: center; font-size: 10px; font-weight: 700; color: var(--ink3);
  padding: 4px 0; letter-spacing: .04em; }
.sbx-cal__day { aspect-ratio: 1; border: none; background: transparent; border-radius: 999px;
  font-family: var(--font); font-size: 13px; font-weight: 600; color: var(--ink); cursor: pointer; }
.sbx-cal__day:hover { background: var(--surface2); }
.sbx-cal__day.is-past { color: var(--line); cursor: default; }
.sbx-cal__day.is-sel { background: var(--ink); color: #fff; }
.sbx-cal__day.is-range { background: var(--coral-lt); border-radius: 0; }
.sbx-cal__foot { display: flex; justify-content: space-between; align-items: center;
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.sbx-cal__hint { font-size: 13px; color: var(--ink2); font-weight: 600; }
.sbx-cal__foot .btn:disabled { opacity: .4; cursor: default; }
.sbx-guests { right: 90px; width: 280px; padding: 18px; }
.sbx-guests__row { display: grid; grid-template-columns: 1fr 34px 32px 34px; align-items: center;
  gap: 6px; padding: 8px 0; }
.sbx-guests__row span { font-size: 14px; font-weight: 600; }
.sbx-guests__row b { text-align: center; font-size: 16px; }
.sbx-guests__row button { width: 34px; height: 34px; border-radius: 999px; border: 1px solid var(--line);
  background: #fff; font-size: 16px; font-weight: 700; cursor: pointer; color: var(--ink); }
.sbx-guests__row button:hover { border-color: var(--ink); }
.sbx-guests__apply { width: 100%; justify-content: center; margin-top: 10px; }
@media (max-width: 900px) {
  /* Topbar → hamburger + uitklapmenu */
  .nav, .topbar__right { display: none; }
  .topbar__burger { display: flex; }
  .mnav.is-open { display: flex; }
  /* Zoekbalk → 2 kolommen */
  .sbx { grid-template-columns: 1fr 1fr; }
  .sbx__field--dest, .sbx__submit { grid-column: span 2; }
  .sbx__field { border-right: none; border-bottom: 1px solid var(--line2); }
  .sbx-cal { width: min(94vw, 640px); }
  .sbx-cal__months { grid-template-columns: 1fr; }
  .sbx-guests { right: 0; }
}
@media (max-width: 560px) {
  /* Zoekbalk → één kolom; grid-items mogen krimpen (min-width:0) tegen overflow */
  .sbx { grid-template-columns: 1fr; gap: 2px; }
  .sbx__field, .sbx__submit { grid-column: 1 / -1; min-width: 0; }
  .sbx__field { border-right: none; border-bottom: 1px solid var(--line2); border-radius: 0; }
  .sbx__submit { height: 46px; margin-top: 8px; }
  .sbx-ac { width: 100%; }
  .sbx-guests { left: 0; right: auto; width: 100%; }
  /* Kalender op mobiel: één maand in plaats van twee. Onder elkaar werden ze samen zo hoog dat
     de knop Toepassen buiten beeld viel en je door een halfjaar moest scrollen. Bladeren gaat
     met de pijlen die er al waren. De popover krijgt een maximum en scrollt zelf, met de voet
     eronder vastgeplakt zodat Toepassen altijd in beeld staat. */
  .sbx-cal { left: 0; transform: none; width: 100%; padding: 16px;
    max-height: 72vh; overflow-y: auto; }
  .sbx-cal__month + .sbx-cal__month { display: none; }
  .sbx-cal__foot { position: sticky; bottom: 0; background: #fff; padding-bottom: 4px; }
  /* SEO-factbox: 3 kolommen is te veel op smal → 2 kolommen */
  .seo__facts { grid-template-columns: repeat(2, 1fr); }
}

/* Trust-strip */
.trust { border-bottom: 1px solid var(--line); }
.trust__in { display: flex; gap: 40px; padding: 18px var(--gutter); max-width: var(--maxw); margin: 0 auto;
  flex-wrap: wrap; }
.trust__item { display: flex; align-items: center; gap: 8px; color: var(--ink2); font-weight: 600; font-size: 14px; }
.trust__dot { width: 8px; height: 8px; border-radius: 999px; background: var(--success); flex: none; }
/* Mobiel: horizontaal schuiven i.p.v. rafelig afbreken over drie regels. */
@media (max-width: 720px) {
  .trust__in { flex-wrap: nowrap; overflow-x: auto; gap: 22px; padding-top: 12px; padding-bottom: 12px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .trust__in::-webkit-scrollbar { display: none; }
  .trust__item { white-space: nowrap; font-size: 13px; }
}

/* Kaartfeitje ("Wist je dat?") — homepage en landpagina */
.kfeit { display: flex; align-items: center; gap: 14px; border: 1px solid var(--line);
  border-radius: 16px; padding: 15px 20px; text-decoration: none; color: inherit;
  background: var(--surface); }
.kfeit:hover { border-color: var(--ink3); }
.kfeit__emoji { font-size: 24px; flex: none; line-height: 1; }
.kfeit__tekst { font-size: 14.5px; }
.kfeit__cta { margin-left: auto; flex: none; font-weight: 600; font-size: 14px; color: var(--ink); }
@media (max-width: 720px) {
  .kfeit { flex-wrap: wrap; gap: 10px; padding: 14px 16px; }
  .kfeit__tekst { flex: 1 1 auto; min-width: 0; font-size: 14px; }
  .kfeit__cta { margin-left: 0; flex: 1 0 100%; color: var(--coral-tekst); }
}

/* Section head */
.sec-head { display: flex; align-items: end; justify-content: space-between; margin-bottom: 22px; }
.sec-head p { margin: 6px 0 0; }

/* De grote regel in een sectiekop is bewust géén <h2> meer. Die rol heeft nu de kleine regel
   erboven, want daar staat waar de sectie over gaat; de grote regel was een speels zinnetje
   ("Hoe ga je weg?") dat als kop niets zei. Visueel verandert er niets: deze klasse neemt de
   opmaak over die h2 had, inclusief de eigen tekstkleur, want een <p> zou anders de gedempte
   kleur van var(--ink2) krijgen. */
.sec-head__kop { margin: 0; font-weight: 800; letter-spacing: -0.02em; line-height: 1.05;
  font-size: clamp(26px, 2.4vw, 40px); color: var(--ink); }
/* Een h2 met de eyebrow-opmaak: alleen de regelhoogte moet terug naar die van de body, want
   h1,h2,h3 zet 1.05 en dat plakt een klein hoofdlettertje tegen de regel eronder. */
h2.eyebrow { line-height: 1.5; }

/* Bestemming-tegels */
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.tile { position: relative; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 3/4;
  background: linear-gradient(160deg, #3a5169, #0E1A2B); color: #fff; display: flex; align-items: end;
  padding: 16px; border: 1px solid var(--line); }
.tile:hover { box-shadow: var(--sh-md); }
.tile__name { font-weight: 800; font-size: 18px; }
.tile__count { font-size: 13px; color: rgba(255,255,255,.8); }

/* Responsive */
@media (max-width: 1024px) { .card-grid { grid-template-columns: repeat(2, 1fr); }
  .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 720px) { :root { --gutter: 20px; }
  .card-grid { grid-template-columns: 1fr; } .footer__grid { grid-template-columns: 1fr; }
  .footer__bar { flex-direction: column; gap: 8px; } }

/* ---- Homepage v3 secties ---- */
.hero--photo { position: relative; background: var(--ink); }
/* z-index 4, niet 2: .hero__in maakt een stapelcontext, dus alles erbinnen (ook de popovers op
   z-index 60) wordt ermee vergeleken. Op 2 won de fotobronvermelding (z-index 3) en die stond
   dwars door de opengeklapte gasten- en kalenderpopover heen. */
.hero--photo .hero__in { position: relative; z-index: 4; }
.hero__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__scrim { position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(14,26,43,.55), rgba(14,26,43,.12) 45%, rgba(14,26,43,.78)); }
/* Foto-bronvermelding (Unsplash/Pexels) — klein, rechtsonder op de hero */
.img-credit { position: absolute; right: 12px; bottom: 12px; z-index: 3; font-size: 10px;
  color: rgba(255,255,255,.8); background: rgba(0,0,0,.32); padding: 2px 9px; border-radius: 999px;
  letter-spacing: .01em; }
.hero__badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px;
  background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.25); border-radius: 999px;
  font-size: 12px; font-weight: 600; color: #fff; }
.hero__badge .dot { width: 6px; height: 6px; border-radius: 99px; background: var(--coral); }
/* H1 op land-, regio- en plaatspagina's. De beschrijvende regel ("Vakantiehuis huren in") stond
   in een sierpil naast de kop, waardoor de h1 alleen een aardrijkskundige naam bevatte: 626
   geindexeerde pagina's met een kop zonder zoekterm erin. De pil is nu de eerste regel van de h1
   zelf en ziet er precies hetzelfde uit; alleen de betekenis klopt nu.
   max-width moet eraf (.hero h1 zet 18ch, en dat knipt de pil af) en de h1-opmaak moet terug naar
   normaal, want die geldt nu voor de pil in plaats van voor de naam eronder. */
.hero .geo-h1 { max-width: none; margin-top: 0; font-size: 12px; font-weight: 400;
  letter-spacing: normal; }
/* De pil zat eerst buiten de h1 en erfde de regelhoogte van de body (18px). Binnen de h1 zou hij
   1.05 erven en 11px lager uitvallen, dus die zetten we terug. */
.geo-h1 .hero__badge { letter-spacing: normal; line-height: 18px; }
/* max-width hoort op de naam, niet op de h1: op de h1 knipt hij de pil af, hier laat hij een
   lange plaatsnaam netjes afbreken zoals daarvoor (18ch bij de grote lettergrootte). */
.geo-h1__naam { display: block; font-weight: 800; letter-spacing: -0.03em; color: #fff;
  max-width: 18ch; }
.hero--photo h1 { font-size: clamp(38px, 5.2vw, 76px); margin-top: 18px; }
.hero--photo h1 .accent { color: var(--coral); }

.cat-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; margin-top: 28px; }
.cat { position: relative; aspect-ratio: 4/5; border-radius: 16px; overflow: hidden; display: block; }
.cat img { width: 100%; height: 100%; object-fit: cover; }
.cat__scrim { position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(14,26,43,.05) 40%, rgba(14,26,43,.85)); }
.cat__cap { position: absolute; left: 14px; right: 14px; bottom: 14px; color: #fff; }
.cat__cap b { display: block; font-size: 18px; font-weight: 800; letter-spacing: -.3px; }
.cat__cap span { font-size: 12px; opacity: .85; }

.rail { display: flex; gap: 18px; overflow-x: auto; padding: 8px 0 24px; scroll-snap-type: x mandatory; }
.rail .card { flex: 0 0 320px; scroll-snap-align: start; }
.rail::-webkit-scrollbar { height: 0; }
.pill { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px; background: var(--coral-lt);
  color: #D12000; border-radius: 999px; font-size: 12px; font-weight: 700; margin-bottom: 12px; }
.iconbtn { width: 44px; height: 44px; border-radius: 999px; background: #fff; border: 1px solid var(--line);
  cursor: pointer; font-size: 18px; color: var(--ink); }

.mosaic { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: 200px; gap: 14px; margin-top: 28px; }
.mosaic a { position: relative; border-radius: 14px; overflow: hidden; color: #fff; }
.mosaic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mosaic .scrim { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(14,26,43,.82)); }
.mosaic .cap { position: absolute; left: 18px; right: 18px; bottom: 16px; }
.mosaic .cap b { font-size: 22px; font-weight: 800; letter-spacing: -.6px; }
.mosaic .cap .meta { font-size: 12px; font-weight: 600; opacity: .9; margin-top: 4px; }
.m-hero { grid-column: span 6; grid-row: span 2; } .m-hero .cap b { font-size: 38px; }
.m-med { grid-column: span 3; } .m-wide { grid-column: span 4; } .m-nar { grid-column: span 2; }

.az { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 20px 28px; margin-top: 24px; }
.az__row { display: grid; grid-template-columns: 48px 1fr; gap: 24px; padding: 14px 0; border-top: 1px solid var(--line); }
.az__row:first-child { border-top: 0; }
.az__letter { font-size: 28px; font-weight: 800; color: var(--coral); }
.az__items { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; min-width: 0; }
.az__items--regio { grid-template-columns: repeat(4, 1fr); }
.az__item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: #fff;
  border: 1px solid var(--line); border-radius: 10px; min-width: 0; }
.az__item > div { min-width: 0; }
.az__item:hover { border-color: var(--coral); }
.az__item b { font-size: 14px; font-weight: 700; overflow-wrap: anywhere; }
.az__item small { display: block; color: var(--ink3); font-size: 11px; margin-top: 2px; }

.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.chip { padding: 12px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px;
  font-size: 14px; font-weight: 600; }
.chip:hover { border-color: var(--coral); }

.reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 28px; }
.review { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 24px; }
.review__top { display: flex; align-items: center; gap: 12px; }
.review__av { width: 44px; height: 44px; border-radius: 50%; background: var(--surface2); }
.review__badge { margin-left: auto; background: var(--ink); color: #fff; padding: 4px 8px; border-radius: 6px;
  font-size: 13px; font-weight: 700; }
.review p { color: var(--ink); margin: 18px 0 0; }
.stars { color: var(--gold-tekst); margin-top: 14px; letter-spacing: 3px; }

.promo { background: var(--ink); color: #fff; border-radius: 24px; padding: 56px; display: grid;
  grid-template-columns: 1.2fr 1fr; gap: 56px; align-items: center; margin-top: 24px; }
.promo h2 { color: #fff; } .promo p { color: rgba(255,255,255,.72); }
.promo__form { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; max-width: 460px; }
.promo__form input { flex: 1; min-width: 0; padding: 14px 18px; border-radius: 10px; border: none;
  background: rgba(255,255,255,.08); color: #fff; font-family: inherit; font-size: 14px; }
.promo__img { height: 280px; border-radius: 18px; overflow: hidden; }
.promo__img img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 1024px) {
  .cat-grid { grid-template-columns: repeat(3, 1fr); }
  .mosaic { grid-template-columns: repeat(2, 1fr); }
  /* De kaarten krijgen een inline grid-column/grid-row uit de view (12-koloms desktop-layout).
     Die inline-stijl wint van de klasse-regels, dus forceren we hier de vrije flow. */
  .mosaic > a { grid-column: auto !important; grid-row: auto !important; }
  .m-hero, .m-wide, .m-nar { grid-column: span 6; } .m-med { grid-column: span 3; }
  .az__items, .az__items--regio { grid-template-columns: repeat(2, 1fr); }
  .reviews { grid-template-columns: 1fr; } .promo { grid-template-columns: 1fr; } .promo__img { display: none; }
}
@media (max-width: 720px) {
  .cat-grid { grid-template-columns: repeat(2, 1fr); }
  .mosaic { grid-template-columns: 1fr; grid-auto-rows: 210px; }
  .mosaic > a { grid-column: auto !important; grid-row: auto !important; }
  .az__items { grid-template-columns: 1fr; } .az__items--regio { grid-template-columns: 1fr 1fr; } .promo { padding: 32px; }
}

/* ---- Landpagina (design-getrouw) ---- */
.land-hero__row { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.land-search { background: #fff; color: var(--ink); padding: 14px; border-radius: 14px; box-shadow: var(--sh-lg);
  display: flex; gap: 10px; align-items: center; min-width: 380px; }
.land-search input { flex: 1; border: none; outline: none; font-family: var(--font); font-size: 14px;
  font-weight: 600; padding: 8px 10px; }
.statsbar { background: var(--surface); border-bottom: 1px solid var(--line); }
.statsbar__in { display: flex; justify-content: space-around; max-width: var(--maxw); margin: 0 auto;
  padding: 22px var(--gutter); flex-wrap: wrap; gap: 16px; }
.stat { text-align: center; }
.stat b { display: block; font-size: 30px; font-weight: 800; letter-spacing: -.02em; }
.stat span { font-size: 12px; color: var(--ink2); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.place-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.place-tile { display: block; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #fff; }
.place-tile:hover { box-shadow: var(--sh-sm); }
.place-tile img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.place-tile__body { padding: 14px; }
.place-tile__body b { font-size: 15px; }
.place-tile__body span { display: block; font-size: 12px; color: var(--ink3); margin-top: 4px; }
.theme-cards { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.theme-card { padding: 18px; background: #fff; border: 1px solid var(--line); border-radius: 12px;
  display: flex; flex-direction: column; gap: 10px; }
.theme-card:hover { border-color: var(--coral); }
.theme-ico { width: 40px; height: 40px; border-radius: 10px; background: var(--coral-lt);
  display: grid; place-items: center; font-size: 20px; }
.theme-card b { font-size: 15px; } .theme-card div span { display: block; font-size: 12px; color: var(--ink3); margin-top: 2px; }
.theme-ico svg { display: block; }
@media (max-width: 1024px) { .place-tiles { grid-template-columns: repeat(2, 1fr); }
  .theme-cards { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px) { .land-search { min-width: 0; width: 100%; }
  .place-tiles, .theme-cards { grid-template-columns: 1fr 1fr; } }

/* ---- Regio/provincie (design-getrouw) ---- */
.hero-pills { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; max-width: 420px; }
.hero-pill { background: rgba(255,255,255,.92); color: var(--ink); padding: 8px 14px; border-radius: 10px; }
.hero-pill span { display: block; font-size: 10px; color: var(--ink3); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.hero-pill b { font-size: 16px; }
.subnav { position: sticky; top: 72px; background: #fff; border-bottom: 1px solid var(--line); z-index: 20; }
.subnav__in { display: flex; gap: 24px; align-items: center; height: 56px; overflow-x: auto; }
.subnav__in a { font-size: 14px; font-weight: 600; color: var(--ink2); padding-bottom: 4px; white-space: nowrap;
  border-bottom: 2px solid transparent; }
.subnav__in a.is-active, .subnav__in a:hover { color: var(--ink); border-bottom-color: var(--coral); }
.place-chips { margin-top: 28px; padding: 18px 22px; background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.place-chips__label { font-size: 12px; font-weight: 700; color: var(--ink3); text-transform: uppercase; letter-spacing: .06em; margin-right: 4px; }
.place-chip { font-size: 13px; font-weight: 600; color: var(--ink); padding: 5px 10px; background: #fff;
  border-radius: 999px; border: 1px solid var(--line); }
.place-chip:hover { border-color: var(--coral); }
.place-chip span { color: var(--ink3); font-weight: 500; }
/* Uitklap "toon alle regio's/plaatsen" (native <details>, geen JS nodig) */
.showall { margin-top: 18px; text-align: center; }
.showall > summary { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; list-style: none;
  border-radius: 999px; }
.showall > summary::-webkit-details-marker { display: none; }
.showall > summary::after { content: "▾"; font-size: 11px; }
.showall[open] > summary::after { content: "▴"; }
.showall .place-chips { text-align: left; }
.card-grid--3 { grid-template-columns: repeat(3, 1fr); }
.region-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.region-card { display: flex; gap: 14px; padding: 14px; border-radius: 12px; background: #fff;
  border: 1px solid var(--line); align-items: center; }
.region-card:hover { border-color: var(--coral); }
.region-card img { width: 80px; height: 80px; border-radius: 10px; object-fit: cover; flex-shrink: 0; }
.region-card b { font-size: 16px; } .region-card span { display: block; font-size: 12px; color: var(--ink3); margin-top: 4px; }
@media (max-width: 1024px) { .region-cards { grid-template-columns: 1fr; } .card-grid--3 { grid-template-columns: repeat(2, 1fr); } }

/* ---- Plaatspagina (design-getrouw) ---- */
.filters-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.filter-chip { padding: 10px 14px; background: #fff; border: 1px solid var(--line); border-radius: 999px;
  font-size: 13px; font-weight: 600; color: var(--ink); cursor: pointer; }
.filter-chip { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.filter-chip:hover { border-color: var(--coral); }
.filter-chip span { font-size: 11px; font-weight: 700; color: var(--ink3); }
.filter-chip.is-active { background: var(--ink); color: #fff; border-color: var(--ink); }
.filter-chip.is-active span { color: rgba(255,255,255,.7); }
.filter-chip--all { background: var(--ink); color: #fff; border-color: var(--ink); font-weight: 700; }
.leeg-melding { color: var(--ink3); font-size: 15px; padding: 24px 0; }

.ptile-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.ptile__img { position: relative; aspect-ratio: 4/3; border-radius: 14px; overflow: hidden; }
.ptile__img img { width: 100%; height: 100%; object-fit: cover; }
.ptile__tag { position: absolute; top: 12px; left: 12px; background: #fff; color: var(--ink); padding: 4px 8px;
  border-radius: 4px; font-size: 11px; font-weight: 700; }
.ptile__photos { position: absolute; bottom: 10px; left: 10px; background: rgba(14,26,43,.7); color: #fff;
  padding: 3px 8px; border-radius: 4px; font-size: 10px; font-weight: 600; }
.ptile__ribbon { position: absolute; bottom: 0; right: 0; background: var(--coral); color: #fff;
  padding: 8px 14px 10px; min-width: 110px; clip-path: polygon(14px 0, 100% 0, 100% 100%, 0 100%); }
.ptile__ribbon span { display: block; font-size: 10px; opacity: .85; text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
.ptile__ribbon b { display: block; font-size: 20px; font-weight: 800; letter-spacing: -.02em; line-height: 1; }
.ptile__body { padding-top: 12px; }
.ptile__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.ptile__top h3 { font-size: 15px; line-height: 1.2; }
.ptile__rating { background: var(--ink); color: #fff; padding: 2px 6px; border-radius: 5px; font-size: 12px; font-weight: 800; flex-shrink: 0; }
.ptile__loc { font-size: 11px; color: var(--ink3); margin-top: 4px; }
.ptile__feats { display: flex; gap: 10px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line);
  color: var(--ink2); font-size: 12px; font-weight: 600; }

/* Doen-grid: zoveel kaarten als er echte plekken zijn (1 t/m 6). De eerste wordt alleen
   uitgelicht als er genoeg omheen staat, anders blijft het net een gelijkmatig raster. */
.doen-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 200px;
  grid-auto-flow: dense; gap: 14px; }
.doen-card.is-big { grid-column: span 2; grid-row: span 2; }
/* Zonder foto: donkere kaart met leesbare tekst, nooit een willekeurig stockbeeld. */
.doen-card { position: relative; overflow: hidden; border-radius: 14px; color: #fff; display: block;
  background: linear-gradient(155deg, #24405C, #0F1720); }
.doen-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.doen-card__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14,26,43,.1) 30%, rgba(14,26,43,.85)); }
.doen-card__num { position: absolute; top: 14px; left: 14px; width: 38px; height: 38px; border-radius: 999px;
  background: #fff; color: var(--ink); display: grid; place-items: center; font-size: 13px; font-weight: 800; }
.doen-card.is-big .doen-card__num { width: 56px; height: 56px; font-size: 18px; }
.doen-card__cat { position: absolute; top: 18px; left: 14px; display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 11px; background: rgba(255,255,255,.92);
  color: var(--ink); border-radius: 999px; font-size: 11px; font-weight: 700; }
.doen-card__cat svg { display: block; }
.doen-card__cap { position: absolute; left: 16px; right: 16px; bottom: 16px; }
.doen-card__cap b { font-size: 18px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.doen-card.is-big .doen-card__cap { left: 24px; right: 24px; bottom: 24px; }
.doen-card.is-big .doen-card__cap b { font-size: 30px; }
.doen-card__cap p { font-size: 14px; line-height: 1.45; margin: 10px 0 0; color: rgba(255,255,255,.9); max-width: 380px; }
.doen-card__dist { display: inline-block; margin-top: 8px; font-size: 12px; font-weight: 600; color: rgba(255,255,255,.85); }
.doen-card__dist b { color: #fff; font-weight: 800; }

.weather { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 28px;
  display: grid; grid-template-columns: repeat(12, 1fr); gap: 12px; }
.weather__col { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.weather__track { height: 180px; width: 100%; display: flex; align-items: flex-end; justify-content: center; }
.weather__bar { width: 24px; border-radius: 4px; }
.weather__temp { font-size: 13px; font-weight: 800; }
.weather__sea { font-size: 11px; font-weight: 700; color: #2F80B8; }
.weather__m { font-size: 11px; color: var(--ink3); font-weight: 600; text-transform: uppercase; }

.nearby-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.nearby-card { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #fff; }
.nearby-card:hover { box-shadow: var(--sh-sm); }
.nearby-card img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.nearby-card__body { padding: 14px; }
.nearby-card__top { display: flex; justify-content: space-between; align-items: baseline; }
.nearby-card__top b { font-size: 15px; } .nearby-card__top span { font-size: 11px; color: var(--ink3); font-weight: 600; }
.nearby-card__count { font-size: 12px; color: var(--ink2); margin-top: 4px; display: block; }
@media (max-width: 1024px) { .ptile-grid { grid-template-columns: repeat(2, 1fr); }
  .doen-grid { grid-template-columns: repeat(2, 1fr); } .doen-card.is-big { grid-column: span 2; grid-row: span 1; }
  .weather { overflow-x: auto; } .nearby-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px) { .ptile-grid { grid-template-columns: 1fr; } .nearby-grid { grid-template-columns: 1fr; }
  .doen-grid { grid-template-columns: 1fr; } .doen-card.is-big { grid-column: span 1; } }

/* ---- KB-widgets (design kb-widgets.jsx) ---- */
.kbw { margin: 36px 0; padding: 24px; background: #fff; border: 1px solid var(--line);
  border-radius: 14px; font-size: 14px; }
.kbw--dense { margin: 24px 0; padding: 18px; }
.kbw__label { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700;
  color: var(--coral); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 12px; }
.kbw__label .dot { width: 6px; height: 6px; border-radius: 99px; background: var(--coral); }
.kbw__title { font-size: 22px; font-weight: 800; letter-spacing: -.02em; margin: 0 0 6px; line-height: 1.15; }
.kbw__title--sm { font-size: 18px; }
.kbw__sub { font-size: 14px; color: var(--ink2); line-height: 1.5; margin: 0 0 18px; }
.kbw__footer { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 12px;
  color: var(--ink3); display: flex; justify-content: space-between; align-items: center; }
.kbw__footer a { color: var(--coral); font-weight: 700; }
.kbw-houses { display: grid; gap: 12px; }
.kbw-houses > a { display: block; border-radius: 10px; overflow: hidden; background: #fff;
  border: 1px solid var(--line); color: var(--ink); }
.kbw-houses > a:hover { box-shadow: var(--sh-sm); }
.kbw-houses__img { position: relative; aspect-ratio: 4/3; background: var(--surface2); }
.kbw-houses__img img { width: 100%; height: 100%; object-fit: cover; }
.kbw-houses__rating { position: absolute; bottom: 8px; right: 8px; background: var(--ink); color: #fff;
  padding: 3px 7px; border-radius: 4px; font-size: 11px; font-weight: 800; }
.kbw-houses__body { padding: 10px; }
.kbw-houses__body b { display: block; font-size: 13px; font-weight: 800; line-height: 1.2; letter-spacing: -.01em; }
.kbw-houses__body span { display: block; font-size: 11px; color: var(--ink3); margin-top: 3px; }
.kbw-houses__body em { display: block; font-style: normal; margin-top: 6px; font-size: 14px; font-weight: 800; color: var(--coral); }
.kbw-houses__body em i { font-style: normal; font-size: 10px; color: var(--ink3); font-weight: 500; }
.kbw-loc { margin: 36px 0; border-radius: 14px; overflow: hidden; border: 1px solid var(--line);
  background: #fff; display: grid; grid-template-columns: 200px 1fr; }
.kbw-loc__img { position: relative; min-height: 180px; }
.kbw-loc__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kbw-loc__img span { position: absolute; top: 10px; left: 10px; padding: 3px 9px; background: #fff;
  color: var(--ink); border-radius: 4px; font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.kbw-loc__body { padding: 18px 20px; display: flex; flex-direction: column; justify-content: space-between; }
.kbw-loc__crumb { font-size: 11px; color: var(--ink3); font-weight: 600; }
.kbw-loc__body h4 { font-size: 24px; font-weight: 800; letter-spacing: -.02em; margin: 4px 0 0; line-height: 1.1; }
.kbw-loc__body p { font-size: 13px; color: var(--ink2); margin: 8px 0 0; line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kbw-loc__foot { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 14px; gap: 16px; }
.kbw-loc__stats { display: flex; gap: 14px; }
.kbw-loc__stats b { display: block; font-size: 17px; font-weight: 800; letter-spacing: -.01em; }
.kbw-loc__stats span { font-size: 10px; color: var(--ink3); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.kbw-places { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.kbw-places a { display: grid; grid-template-columns: 48px 1fr auto; gap: 10px; align-items: center;
  padding: 8px 10px; background: #fff; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); }
.kbw-places a:hover { border-color: var(--coral); }
.kbw-places img { width: 48px; height: 48px; border-radius: 6px; object-fit: cover; }
.kbw-places b { font-size: 13px; font-weight: 800; letter-spacing: -.01em; line-height: 1.1; display: block; }
.kbw-places div span { font-size: 11px; color: var(--ink3); margin-top: 2px; display: block; }
.kbw-places em { font-style: normal; color: var(--ink3); font-size: 12px; }
.kbw-themes { display: flex; flex-wrap: wrap; gap: 8px; }
.kbw-themes a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 999px;
  background: #fff; color: var(--ink); border: 1px solid var(--line); font-size: 12px; font-weight: 700; }
.kbw-themes a em { font-style: normal; color: var(--ink3); font-weight: 500; font-size: 11px; }
.kbw-themes a.is-sel { background: var(--ink); color: #fff; border-color: var(--ink); }
.kbw-themes a.is-sel em { color: rgba(255,255,255,.65); }
.kbw-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.kbw-facts div { padding: 12px; background: var(--surface); border-radius: 10px; border: 1px solid var(--line); }
.kbw-facts span { display: block; font-size: 10px; color: var(--ink3); font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; }
.kbw-facts b { font-size: 15px; font-weight: 800; margin-top: 4px; letter-spacing: -.01em; display: block; }
.kbw-weather { display: grid; grid-template-columns: repeat(12, 1fr); gap: 6px; }
.kbw-weather > div { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.kbw-weather b { font-size: 11px; font-weight: 800; letter-spacing: -.01em; }
.kbw-weather__track { height: 70px; display: flex; align-items: flex-end; justify-content: center; width: 100%; }
.kbw-weather__track span { width: 70%; border-radius: 3px; display: block; }
.kbw-weather em { font-style: normal; font-size: 10px; color: var(--ink3); font-weight: 700; text-transform: uppercase; }
.kbw-compare { border-radius: 10px; overflow: hidden; border: 1px solid var(--line); }
.kbw-compare__head { display: grid; grid-template-columns: 1fr 1fr 1fr; background: var(--surface);
  padding: 10px 12px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.kbw-compare__head div { text-align: center; }
.kbw-compare__head div:first-child { text-align: left; }
.kbw-compare__row { display: grid; grid-template-columns: 1fr 1fr 1fr; padding: 10px 12px; background: #fff;
  border-top: 1px solid var(--line); align-items: center; }
.kbw-compare__row span { font-size: 12px; font-weight: 700; color: var(--ink3); }
.kbw-compare__row div { text-align: center; font-size: 13px; font-weight: 700; }
.kbw-stat { margin: 32px 0; padding: 24px 28px; background: var(--coral-lt); border-left: 4px solid var(--coral);
  border-radius: 12px; display: flex; align-items: center; gap: 24px; }
.kbw-stat__value { font-size: 56px; font-weight: 800; letter-spacing: -.04em; color: var(--coral); line-height: 1; }
.kbw-stat b { font-size: 16px; font-weight: 800; letter-spacing: -.01em; }
.kbw-stat p { font-size: 13px; color: var(--ink2); margin: 4px 0 0; line-height: 1.45; }
@media (max-width: 720px) {
  .kbw-houses { grid-template-columns: 1fr !important; }
  .kbw-places { grid-template-columns: 1fr; }
  .kbw-loc { grid-template-columns: 1fr; } .kbw-loc__img { min-height: 140px; }
  .kbw-facts { grid-template-columns: repeat(2, 1fr); }
  .kbw-weather { overflow-x: auto; }
  .kbw-stat { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* ---- Inspiratie-detail v3 (design-getrouw) ---- */
.artd-hero { position: relative; height: 600px; overflow: hidden; background: var(--ink); }
.artd-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.artd-hero__scrim { position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(14,26,43,.5), transparent 40%, rgba(14,26,43,.9)); }
.artd-hero__crumbs { position: relative; padding-top: 28px; color: rgba(255,255,255,.85); font-size: 13px; }
.artd-hero__crumbs a { color: rgba(255,255,255,.7); }
.artd-hero__crumbs span { opacity: .5; margin: 0 4px; }
.artd-hero__crumbs em { font-style: normal; }
.artd-hero__cap { position: absolute; left: 0; right: 0; bottom: 40px; color: #fff; }
.artd-hero__tags { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.artd-hero__tags > span:last-child { font-size: 12px; font-weight: 600; color: rgba(255,255,255,.85); }
.artd-hero__cap h1 { font-size: clamp(36px, 5vw, 72px); letter-spacing: -.03em; line-height: 1; color: #fff; max-width: 980px; }
.artd-hero__cap > p { font-size: 19px; line-height: 1.45; margin-top: 18px; max-width: 720px; color: rgba(255,255,255,.92); }
.artd-hero__author { display: flex; align-items: center; gap: 14px; margin-top: 24px; }
.artd-hero__author b { font-size: 14px; }
.artd-hero__author span:last-child { display: block; font-size: 12px; color: rgba(255,255,255,.7); }
.artd { display: grid; grid-template-columns: 220px 1fr; gap: 56px; padding-top: 64px; }
.artd__side { position: sticky; top: 96px; align-self: start; display: flex; flex-direction: column; gap: 24px; }
.artd__side-label { font-size: 11px; font-weight: 700; color: var(--ink3); text-transform: uppercase;
  letter-spacing: .08em; margin-bottom: 10px; }
.artd__share { display: flex; flex-direction: column; gap: 8px; }
.artd__share a, .artd__share button { padding: 10px 12px; background: #fff; border: 1px solid var(--line);
  border-radius: 8px; font-size: 12px; font-weight: 600; color: var(--ink2); cursor: pointer;
  text-align: left; font-family: var(--font); }
.artd__toc { display: flex; flex-direction: column; gap: 4px; border-left: 1px solid var(--line); padding-left: 12px; }
.artd__toc a { font-size: 13px; color: var(--ink2); padding: 4px 0; font-weight: 500; }
.artd__toc a:hover { color: var(--ink); font-weight: 700; }
.artd__body { max-width: 740px; min-width: 0; font-size: 18px; line-height: 1.65; color: var(--ink); }
.artd__lead { font-size: 22px; font-weight: 600; line-height: 1.45; letter-spacing: -.01em; margin: 0 0 28px; color: var(--ink); }
.artd__body h2 { font-size: 32px; letter-spacing: -.02em; margin: 40px 0 16px; line-height: 1.15; }
.artd__body > p { margin: 0 0 18px; color: var(--ink); }
.artd__body h3 { font-size: 26px; letter-spacing: -.02em; margin: 36px 0 14px; line-height: 1.15; }
.artd__body img { max-width: 100%; height: auto; border-radius: 12px; margin: 8px 0; }
.artd__body ul, .artd__body ol { margin: 0 0 18px; padding-left: 22px; color: var(--ink); }
.artd__body li { margin-bottom: 6px; }
/* Links IN lopende tekst moeten er als link uitzien. De globale reset zet `a` op inherit zonder
   onderstreping (goed voor kaartjes en navigatie, fout voor tekst), dus contentblokken zetten
   dat expliciet terug. Zonder deze regel staan de interne links er wel, maar ziet niemand ze. */
.artd__body a,
.seo__body p a,
.faq__a p a { color: var(--coral-tekst); text-decoration: underline; text-underline-offset: 3px; }
.artd__body a:hover,
.seo__body p a:hover,
.faq__a p a:hover { color: var(--coral); }
.artd__quote { margin: 36px 0; padding: 28px 32px; background: var(--coral-lt);
  border-left: 4px solid var(--coral); border-radius: 12px; }
.artd__quote p { font-size: 26px; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; margin: 0; color: var(--ink); }
.artd__quote footer { font-size: 13px; color: var(--ink2); margin-top: 12px; font-weight: 600; }
.artd__img { margin: 24px 0 28px; }
.artd__img img { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: 12px; margin: 0; }
.artd__img figcaption { margin-top: 6px; font-size: 11px; color: var(--ink3); }
.artd__img figcaption a { color: var(--ink3); text-decoration: underline; }

/* Woningen-carousel in artikelen (conversie): horizontaal scrollend, snap per kaart. */
.acar { margin: 36px 0; padding: 20px 20px 16px; background: #fff; border: 1px solid var(--line);
  border-radius: 14px; }
.acar__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px;
  margin-bottom: 14px; }
.acar__label { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ink3); }
.acar__label .dot { width: 6px; height: 6px; border-radius: 99px; background: var(--coral); }
.acar__head h4 { font-size: 20px; font-weight: 800; letter-spacing: -.02em; margin: 4px 0 0; line-height: 1.15; }
.acar__all { flex-shrink: 0; font-size: 13px; font-weight: 700; color: var(--coral); white-space: nowrap; }
.acar__track { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: 6px; margin: 0 -20px; padding-left: 20px; padding-right: 20px;
  -webkit-overflow-scrolling: touch; }
.acar__card { flex: 0 0 210px; scroll-snap-align: start; border: 1px solid var(--line);
  border-radius: 10px; overflow: hidden; background: #fff; color: var(--ink); }
.acar__card:hover { box-shadow: var(--sh-sm); }
.acar__img { position: relative; aspect-ratio: 4/3; background: var(--surface2); }
.acar__img img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; margin: 0; }
.acar__rating { position: absolute; bottom: 8px; right: 8px; background: var(--ink); color: #fff;
  padding: 3px 7px; border-radius: 4px; font-size: 11px; font-weight: 800; }
.acar__card b { display: block; padding: 10px 10px 0; font-size: 13px; font-weight: 800; line-height: 1.2;
  letter-spacing: -.01em; }
.acar__card span { display: block; padding: 0 10px; font-size: 11px; color: var(--ink3); margin-top: 3px; }
.acar__card em { display: block; padding: 0 10px 10px; font-style: normal; margin-top: 6px; font-size: 14px;
  font-weight: 800; color: var(--coral); }
.acar__card em i { font-style: normal; font-size: 10px; color: var(--ink3); font-weight: 500; }

.artd__authorbox { margin-top: 48px; padding: 24px; background: var(--surface); border-radius: 14px;
  display: flex; gap: 18px; align-items: flex-start; }
.artd__authorbox b { font-size: 18px; display: block; margin-top: 4px; }
.artd__authorbox p { font-size: 13px; margin: 6px 0 0; }
.artd__authorbox a { display: inline-block; margin-top: 12px; font-size: 13px; font-weight: 700; color: var(--coral); }
/* Inhoudsopgave als uitklapper (details); op desktop zonder pijl en altijd open. */
.artd__tocbox summary { list-style: none; cursor: pointer; display: flex; align-items: center;
  gap: 8px; }
.artd__tocbox summary::-webkit-details-marker { display: none; }
.artd__tocbox summary .artd__side-label { margin-bottom: 0; }
.artd__toc-n { display: none; font-size: 11px; font-weight: 700; color: var(--ink3); }

@media (max-width: 1024px) { .artd { grid-template-columns: 1fr; gap: 24px; }
  .artd__side { position: static; flex-direction: column; gap: 16px; }
  /* Deelknoppen naast elkaar i.p.v. vier volle regels onder elkaar. */
  .artd__share { flex-direction: row; flex-wrap: wrap; gap: 8px; }
  .artd__share a, .artd__share button { flex: 0 1 auto; padding: 9px 14px; font-size: 13.5px; }
  /* De uitklapper krijgt een rand zodat hij als knop leest, met een draaiend pijltje. */
  .artd__tocbox { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px;
    background: var(--surface); }
  .artd__tocbox summary::after { content: "▾"; margin-left: auto; color: var(--ink3);
    transition: transform .2s; }
  .artd__tocbox[open] summary::after { transform: rotate(180deg); }
  .artd__toc-n { display: inline; }
  .artd__tocbox[open] .artd__toc { margin-top: 10px; }
  .artd-hero { height: 480px; } }

/* ---- Vakantieparken v3 (design-getrouw) ---- */
.park-hero { display: grid; grid-template-columns: 1.4fr 1fr; gap: 64px; align-items: end; padding-top: 40px; }
.park-hero__h1 { font-size: clamp(44px, 5.5vw, 72px); letter-spacing: -.03em; line-height: .98; }
.park-hero__h1 .accent { color: var(--coral); }
.park-hero__h1 em { font-style: normal; font-weight: 400; color: var(--ink2); font-size: .88em; }
.park-hero__lead { font-size: 18px; line-height: 1.55; margin-top: 24px; max-width: 540px; }
.park-book { background: var(--ink); color: #fff; padding: 28px 28px 24px; border-radius: 16px;
  display: flex; flex-direction: column; gap: 14px; }
.park-book__label { font-size: 11px; font-weight: 700; color: var(--coral); text-transform: uppercase; letter-spacing: .08em; }
.park-book__fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.park-book__fields div { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px; padding: 10px 12px; }
.park-book__fields span { display: block; font-size: 10px; color: rgba(255,255,255,.55); font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; }
.park-book__fields b { font-size: 14px; margin-top: 2px; display: block; }
.park-stats { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--surface);
  border-radius: 18px; padding: 28px 32px; }
.park-stats div { padding: 0 24px; border-left: 1px solid var(--line); }
.park-stats div:first-child { border-left: none; }
.park-stats b { display: block; font-size: 38px; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.park-stats span { font-size: 12px; color: var(--ink3); font-weight: 600; text-transform: uppercase;
  letter-spacing: .05em; margin-top: 6px; display: block; }
.park-filterhead { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px;
  margin-bottom: 20px; flex-wrap: wrap; }
.park-sort { display: flex; gap: 6px; align-items: center; }
.park-sort span { font-size: 12px; color: var(--ink3); margin-right: 8px; }
.park-sort button { background: #fff; color: var(--ink); border: 1px solid var(--line); padding: 6px 12px;
  border-radius: 99px; font-size: 12px; font-weight: 700; cursor: pointer; font-family: var(--font); }
.park-sort button.is-active { background: var(--ink); color: #fff; border-color: var(--ink); }
.park-typechips { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.park-typechip { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; background: #fff;
  color: var(--ink); border: 1px solid var(--line); border-radius: 99px; font-size: 13px; font-weight: 700; }
.park-typechip em { font-style: normal; color: var(--ink3); font-weight: 500; }
.park-typechip.is-active { background: var(--coral); color: #fff; border-color: var(--coral); }
.park-typechip.is-active em { color: rgba(255,255,255,.65); }
.park-provchips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 28px; }
.park-provchip { padding: 6px 12px; background: var(--surface); color: var(--ink2); border-radius: 99px;
  font-size: 12px; font-weight: 600; }
.park-provchip em { font-style: normal; color: var(--ink3); margin-left: 2px; }
.park-provchip.is-active { background: var(--ink); color: #fff; }
.park-provchip.is-active em { color: rgba(255,255,255,.55); }
.parkx-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.parkx-card { display: flex; flex-direction: column; background: #fff; border-radius: 14px; overflow: hidden;
  border: 1px solid var(--line); }
.parkx-card:hover { box-shadow: var(--sh-md); transform: translateY(-2px); }
.parkx-card__img { position: relative; aspect-ratio: 4/3; }
.parkx-card__img img { width: 100%; height: 100%; object-fit: cover; }
.parkx-card__place { position: absolute; top: 12px; left: 12px; background: #fff; color: var(--ink);
  padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.parkx-card__houses { position: absolute; bottom: 12px; right: 12px; background: rgba(14,26,43,.92);
  color: #fff; padding: 4px 10px; border-radius: 6px; font-size: 11px; font-weight: 700; }
.parkx-card__body { padding: 16px 18px 18px; display: flex; flex-direction: column; flex: 1; }
.parkx-card__body h3 { font-size: 17px; letter-spacing: -.02em; line-height: 1.2; }
.parkx-card__body p { font-size: 13px; margin: 8px 0 14px; line-height: 1.5; flex: 1;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.parkx-card__foot { display: flex; align-items: center; justify-content: space-between;
  border-top: 1px solid var(--line); padding-top: 12px; }
.parkx-card__foot span { font-size: 11px; font-weight: 700; color: var(--ink3); text-transform: uppercase; letter-spacing: .04em; }
.parkx-card__foot em { font-style: normal; font-size: 13px; font-weight: 700; color: var(--coral); }
.park-map { position: relative; border-radius: 18px; overflow: hidden; height: 320px; background: var(--surface); }
.park-map img { width: 100%; height: 100%; object-fit: cover; opacity: .85; }
.park-map__scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(14,26,43,.85), rgba(14,26,43,.55) 50%, transparent); }
.park-map__cap { position: absolute; inset: 0 auto 0 0; padding: 40px 48px; display: flex; flex-direction: column;
  justify-content: center; color: #fff; max-width: 520px; }
.park-map__cap h3 { font-size: 36px; letter-spacing: -.02em; margin: 14px 0 16px; color: #fff; }
.park-map__cap p { color: rgba(255,255,255,.78); margin-bottom: 22px; }
.park-map__cap .btn { align-self: flex-start; }
.park-seo { display: grid; grid-template-columns: 280px 1fr; gap: 80px; padding-top: 96px; align-items: start; }
.park-seo aside { position: sticky; top: 88px; }
.park-seo__body { max-width: 760px; }
.park-seo__intro { font-size: 19px; line-height: 1.55; color: var(--ink); font-weight: 500; margin-bottom: 32px; }
.park-seo__intro::first-letter { font-size: 70px; font-weight: 800; line-height: .85; float: left;
  margin: 4px 10px 0 0; color: var(--coral); }
.park-seo__body h3 { font-size: 24px; margin: 36px 0 14px; }
.park-seo__body p { font-size: 16px; line-height: 1.65; margin: 0; }
.park-seo__list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.park-seo__list li { display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: baseline;
  font-size: 15px; color: var(--ink2); line-height: 1.55; }
.park-seo__list span { color: var(--coral); font-weight: 800; font-size: 13px; }
.park-gallery { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: repeat(2, 200px);
  gap: 8px; border-radius: 16px; overflow: hidden; }
.park-gallery img { width: 100%; height: 100%; object-fit: cover; display: block; }
.park-gallery__main { grid-row: span 2; position: relative; }
.park-gallery__type { position: absolute; top: 16px; left: 16px; padding: 5px 10px; background: #fff;
  color: var(--ink); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; border-radius: 999px; }
.park-gallery__more { position: relative; cursor: pointer; }
.park-gallery__more div { position: absolute; inset: 0; background: rgba(14,26,43,.72); display: flex;
  flex-direction: column; gap: 4px; align-items: center; justify-content: center; color: #fff; font-size: 13px; font-weight: 700; }
.park-gallery__more span { font-size: 11px; opacity: .65; }
.parkd-head { display: grid; grid-template-columns: 1.5fr 1fr; gap: 48px; align-items: end; }
.parkd-head__right { display: flex; flex-direction: column; align-items: flex-end; gap: 14px; }
.parkd-rating { display: flex; align-items: center; gap: 10px; background: var(--surface); padding: 10px 14px;
  border-radius: 99px; font-size: 13px; font-weight: 700; }
.parkd-rating span { background: var(--success); color: #fff; border-radius: 6px; padding: 3px 7px; font-size: 12px; }
.parkd-stats { display: grid; grid-template-columns: repeat(5, 1fr); margin-top: 32px; background: var(--ink);
  border-radius: 14px; color: #fff; overflow: hidden; }
.parkd-stats div { padding: 20px 24px; border-left: 1px solid rgba(255,255,255,.1); }
.parkd-stats div:first-child { border-left: none; }
.parkd-stats span { font-size: 10px; font-weight: 700; color: rgba(255,255,255,.55); text-transform: uppercase; letter-spacing: .06em; display: block; }
.parkd-stats b { font-size: 22px; font-weight: 800; margin-top: 4px; letter-spacing: -.02em; display: block; }
.parkd-stats em { font-style: normal; font-size: 11px; color: rgba(255,255,255,.55); }
.parkd-facils { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; padding: 18px;
  background: var(--surface); border-radius: 12px; margin: 24px 0 36px; }
.parkd-facils div { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; }
.parkd-facils i { font-style: normal; color: var(--coral); font-weight: 800; }
.parkd-loc { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; padding-top: 96px; }
.parkd-loc__addr { display: inline-flex; align-items: center; gap: 10px; padding: 10px 14px;
  background: var(--surface); border-radius: 10px; font-size: 13px; font-weight: 600; margin-top: 16px; }
.parkd-dist { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 32px; margin-top: 12px; }
.parkd-dist div { display: flex; justify-content: space-between; align-items: baseline; padding: 10px 0;
  border-top: 1px solid var(--line); font-size: 13px; }
.parkd-dist span { color: var(--ink2); } .parkd-dist b { font-weight: 700; }
.parkd-map { position: relative; border-radius: 14px; overflow: hidden; min-height: 520px; background: var(--surface); }
.parkd-map img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: saturate(.6) brightness(1.05); }
.parkd-map__pin { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -100%) rotate(-45deg);
  width: 36px; height: 36px; border-radius: 50% 50% 50% 0; background: var(--coral); color: #fff;
  display: grid; place-items: center; box-shadow: 0 8px 20px rgba(0,0,0,.25); }
.parkd-map__place { position: absolute; bottom: 16px; left: 16px; padding: 8px 14px; background: #fff;
  border-radius: 8px; font-size: 12px; font-weight: 700; box-shadow: 0 4px 12px rgba(0,0,0,.12); }
.parkd-map__open { position: absolute; top: 16px; right: 16px; padding: 6px 10px; background: #fff;
  border-radius: 6px; font-size: 11px; font-weight: 700; }
.parkd-similar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.parkd-similar a { display: flex; flex-direction: column; background: #fff; border-radius: 12px;
  overflow: hidden; border: 1px solid var(--line); }
.parkd-similar a:hover { box-shadow: var(--sh-sm); }
.parkd-similar__img { position: relative; aspect-ratio: 4/3; }
.parkd-similar__img img { width: 100%; height: 100%; object-fit: cover; }
.parkd-similar__img span { position: absolute; top: 10px; left: 10px; padding: 3px 8px; background: #fff;
  border-radius: 999px; font-size: 10px; font-weight: 700; color: var(--ink); }
.parkd-similar__body { padding: 14px 16px; }
.parkd-similar__body b { font-size: 15px; letter-spacing: -.01em; line-height: 1.2; }
.parkd-similar__body span { display: block; font-size: 12px; color: var(--ink3); margin-top: 4px; }
@media (max-width: 1024px) {
  .park-hero, .parkd-head, .parkd-loc, .park-seo { grid-template-columns: 1fr; gap: 32px; }
  .park-seo aside { position: static; }
  .parkx-grid, .parkd-similar { grid-template-columns: repeat(2, 1fr); }
  .park-stats, .parkd-stats { grid-template-columns: repeat(2, 1fr); }
  .parkd-stats div, .park-stats div { border-left: none; }
  .park-gallery { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, 160px); }
  .park-gallery__main { grid-column: span 2; }
  .parkd-map { min-height: 320px; }
}
@media (max-width: 720px) { .parkx-grid, .parkd-similar, .parkd-facils { grid-template-columns: 1fr; } }

/* ---- SEO-secties (land/regio/plaats) ---- */
.seo { display: grid; grid-template-columns: 280px 1fr; gap: 40px; align-items: start; }
/* Landenpagina's zonder geo-boom (Luxemburg, Zwitserland, Noorwegen...) hebben geen
   feitenkolom, want die wordt uit de geo-node gevuld en die bestaat daar niet. Zonder deze
   variant belandt de tekst in de kolom van 280px. */
.seo--zonder-feiten { grid-template-columns: minmax(0, 760px); }
.seo__facts { display: grid; gap: 8px; position: sticky; top: 88px; }
.fact { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; min-width: 0; }
.fact b { overflow-wrap: anywhere; }
.fact span { display: block; font-size: 12px; color: var(--ink3); font-weight: 600; }
.fact b { font-size: 16px; }
.seo__intro { font-size: 17px; line-height: 1.7; color: var(--ink2); }
.seo__kenner-title { font-size: 26px; font-weight: 800; letter-spacing: -.02em; margin: 0 0 14px; }
.seo__para { font-size: 16px; line-height: 1.7; color: var(--ink2); margin-top: 14px; }
.seo__sources { margin-top: 16px; font-size: 12px; color: var(--ink3); }
.seo__section-title { font-size: 21px; font-weight: 800; letter-spacing: -.02em; margin: 30px 0 10px; }
.seo__body p { font-size: 16px; line-height: 1.7; color: var(--ink2); margin: 0 0 14px; }
.seo__intro::first-letter { font-size: 46px; font-weight: 800; color: var(--coral); float: left;
  line-height: .85; margin: 4px 10px 0 0; }
.faq { max-width: 760px; margin-top: 48px; }
.faq h2 { margin-bottom: 16px; }
.faq__item { border: 1px solid var(--line); border-radius: 10px; padding: 0 16px; margin-bottom: 10px; background: #fff; }
.faq__item summary { cursor: pointer; padding: 16px 0; font-weight: 700; list-style: none; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: '+'; float: right; color: var(--coral); font-weight: 800; }
.faq__item[open] summary::after { content: '\2013'; }
.faq__a { padding: 0 0 16px; color: var(--ink2); }
.faq__a p { margin: 0 0 10px; line-height: 1.6; }
.faq__cta { font-size: 14px; }
.faq__cta a { color: var(--coral-dk); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }

/* Overview-blok: echte Holidu-cijfers over alle woningen van een locatie. */
.lov__grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 32px; align-items: start; }
.lov__tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.lov-tile { padding: 18px; background: #fff; border: 1px solid var(--line); border-radius: 12px; }
.lov-tile span { display: block; font-size: 11px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--ink3); margin-bottom: 6px; }
.lov-tile b { font-size: 24px; font-weight: 800; letter-spacing: -.02em; }
.lov-tile b i { font-style: normal; font-size: 12px; font-weight: 600; color: var(--ink3); }
.lov-tile__months { font-size: 18px; }
.lov-tile em { display: block; font-style: normal; font-size: 12px; font-weight: 700;
  color: var(--ink3); margin-top: 4px; }
.lov-tile em.is-good { color: #0B8A4B; }
.lov__facets { display: grid; gap: 14px; }
.lov-facet__head { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }
.lov-facet__head b { margin-left: auto; font-weight: 800; }
.lov-facet__ico svg { display: block; }
.lov-facet__bar { position: relative; height: 8px; border-radius: 99px; background: var(--surface2);
  margin: 8px 0 4px; overflow: visible; }
.lov-facet__bar i { position: absolute; inset: 0 auto 0 0; border-radius: 99px; background: var(--coral); }
.lov-facet__bar u { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--ink);
  border-radius: 2px; opacity: .55; }
.lov-facet__sub { font-size: 12px; color: var(--ink3); }
@media (max-width: 900px) { .lov__grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .lov__tiles { grid-template-columns: repeat(2, 1fr); } }

/* Activiteiten-blok (Viator-affiliate): compact, duidelijk apart van de redactionele content. */
.acts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.act { display: block; border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
  background: #fff; color: var(--ink); }
.act:hover { box-shadow: var(--sh-sm); }
.act__img { aspect-ratio: 3/2; background: var(--surface2); }
.act__img img { width: 100%; height: 100%; object-fit: cover; }
.act__body { padding: 12px 12px 14px; }
.act__body b { display: block; font-size: 14px; font-weight: 700; line-height: 1.25;
  letter-spacing: -.01em; }
.act__meta { display: block; font-size: 12px; color: var(--ink3); margin-top: 5px; }
.act__body em { display: block; font-style: normal; margin-top: 8px; font-size: 14px;
  font-weight: 800; color: var(--coral); }
.act__body em i { font-style: normal; font-size: 11px; color: var(--ink3); font-weight: 500; }
.act__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.act__flag { font-size: 11px; font-weight: 700; color: #157a4a; background: #e8f6ee;
  border-radius: 999px; padding: 3px 8px; white-space: nowrap; }
@media (max-width: 900px) { .acts { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .acts { grid-template-columns: 1fr; } }

/* Artikel-slider op locatiepagina's (verhalen over deze locatie). */
.aslider__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.aslider__head h2 { margin: 12px 0 0; }
.aslider__head .pill-solid .dot { width: 6px; height: 6px; border-radius: 99px; background: currentColor; display: inline-block; margin-right: 6px; }
.aslider__nav { display: flex; gap: 10px; flex-shrink: 0; }
.aslider__arrow { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line);
  background: #fff; color: var(--ink); font-size: 20px; line-height: 1; cursor: pointer; }
.aslider__arrow:hover { border-color: var(--coral); color: var(--coral); }
.aslider__track { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: 8px; margin: 0 -4px; padding-left: 4px; padding-right: 4px; -webkit-overflow-scrolling: touch; }
.aslider__track::-webkit-scrollbar { height: 0; }
.aslider__cell { flex: 0 0 300px; scroll-snap-align: start; }
.aslider__cell .artcard { height: 100%; }
@media (max-width: 640px) { .aslider__cell { flex-basis: 78%; } }
@media (max-width: 1024px) {
  .seo { grid-template-columns: 1fr; }
  .seo__facts { position: static; grid-template-columns: repeat(3, 1fr); }
}

/* ---- FAQ index + categorie ---- */
.faqcat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.faqcat { display: flex; flex-direction: column; gap: 6px; padding: 22px; background: #fff;
  border: 1px solid var(--line); border-radius: 14px; }
.faqcat:hover { border-color: var(--coral); box-shadow: var(--sh-sm); }
.faqcat__icon { font-size: 26px; }
.faqcat b { font-size: 17px; }
.faqcat__sub { color: var(--ink2); font-size: 14px; }
.faqcat__count { color: var(--ink3); font-size: 12px; font-weight: 600; margin-top: 6px; }
.faqpage { display: grid; grid-template-columns: 240px 1fr; gap: 40px; align-items: start; }
.faqpage__side { display: grid; gap: 4px; position: sticky; top: 88px; }
.faqpage__side b { font-size: 12px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink3); margin-bottom: 8px; }
.faqpage__side a { padding: 8px 12px; border-radius: 8px; color: var(--ink2); font-weight: 600; font-size: 14px; }
.faqpage__side a:hover { background: var(--surface); }
.faqpage__side a.is-active { background: var(--coral-lt); color: var(--coral-dk); }
@media (max-width: 1024px) {
  .faqcat-grid { grid-template-columns: repeat(2, 1fr); }
  .faqpage { grid-template-columns: 1fr; }
  .faqpage__side { position: static; grid-auto-flow: column; overflow-x: auto; }
}
@media (max-width: 720px) { .faqcat-grid { grid-template-columns: 1fr; } }

/* ---- FAQ v3 (design-getrouw) ---- */
.faqx-hero { background: var(--surface); border-bottom: 1px solid var(--line); padding: 64px 0 72px; }
.faqx-hero--cat { padding: 48px 0 56px; }
.faqx-crumbs { display: flex; gap: 8px; font-size: 13px; color: var(--ink3); margin-bottom: 24px; font-weight: 500; }
.faqx-crumbs span { opacity: .5; } .faqx-crumbs b { color: var(--ink); }
.faqx-hero__grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 80px; align-items: end; }
.faqx-h1 { font-size: clamp(40px, 5vw, 64px); letter-spacing: -.03em; line-height: 1; }
.faqx-lead { font-size: 17px; color: var(--ink2); line-height: 1.55; margin-top: 22px; max-width: 560px; }
.faqx-search { margin-top: 32px; background: #fff; border: 1px solid var(--line); border-radius: 14px;
  padding: 6px; display: flex; align-items: center; max-width: 620px; box-shadow: var(--sh-sm); }
.faqx-search__ico { padding: 0 14px 0 16px; color: var(--ink3); display: flex; }
.faqx-search input { flex: 1; border: none; outline: none; background: transparent; font-size: 15px;
  font-family: var(--font); color: var(--ink); padding: 14px 0; }
.faqx-searched { margin-top: 14px; font-size: 12px; color: var(--ink3); display: flex; gap: 14px; flex-wrap: wrap; }
.faqx-searched b { color: var(--ink2); }
.faqx-searched a { color: var(--ink2); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
.faqx-status { background: var(--ink); color: #fff; border-radius: 18px; padding: 28px; display: flex; flex-direction: column; gap: 18px; }
.faqx-status__live { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; }
.faqx-status__live .dot { width: 9px; height: 9px; border-radius: 99px; background: var(--success);
  box-shadow: 0 0 0 4px rgba(14,138,95,.2); }
.faqx-status__title { font-size: 28px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
.faqx-status__phone { display: inline-flex; align-items: center; gap: 12px; color: #fff; font-size: 22px;
  font-weight: 800; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.18); }
.faqx-status__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.faqx-status__stats div { background: rgba(255,255,255,.06); padding: 12px 14px; border-radius: 10px; }
.faqx-status__stats span { display: block; font-size: 11px; color: rgba(255,255,255,.6); font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; }
.faqx-status__stats b { font-size: 16px; margin-top: 4px; display: block; }
.faqx-cats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 36px; }
.faqx-cat { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 24px;
  display: flex; flex-direction: column; gap: 14px; min-height: 196px; transition: border-color .15s, transform .15s, box-shadow .15s; }
.faqx-cat:hover { border-color: var(--coral); transform: translateY(-2px); box-shadow: var(--sh-md); }
.faqx-cat__top { display: flex; align-items: center; justify-content: space-between; }
.faqx-cat__ico { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; }
.faqx-cat__ico--lg { width: 56px; height: 56px; border-radius: 14px; }
.faqx-cat__count { font-size: 11px; font-weight: 800; color: var(--ink3); letter-spacing: .06em; text-transform: uppercase; }
.faqx-cat h3 { font-size: 22px; letter-spacing: -.02em; }
.faqx-cat p { font-size: 14px; margin: 0; flex: 1; }
.faqx-cat__link { font-size: 13px; font-weight: 700; color: var(--coral); }
.faqx-popular { display: grid; grid-template-columns: 320px 1fr; gap: 64px; align-items: start; }
.faqx-poplist { background: #fff; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.faqx-poplist a { display: grid; grid-template-columns: 36px 100px 1fr 24px; gap: 18px; align-items: center;
  padding: 20px 22px; border-top: 1px solid var(--line); }
.faqx-poplist a:first-child { border-top: none; }
.faqx-poplist a:hover { background: var(--surface); }
.faqx-poplist__n { font-size: 13px; font-weight: 800; color: var(--coral); }
.faqx-poplist__cat { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--ink3); }
.faqx-poplist__q { font-size: 16px; font-weight: 700; letter-spacing: -.01em; line-height: 1.3; }
.faqx-poplist__arrow { color: var(--ink3); }
.faqx-contact { background: var(--ink); color: #fff; border-radius: 24px; padding: 56px;
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: center; }
.faqx-contact__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.faqx-contact__cards a { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px; padding: 22px; color: #fff; display: flex; flex-direction: column; gap: 14px; }
.faqx-contact__ico { width: 38px; height: 38px; border-radius: 10px; background: rgba(255,255,255,.08);
  display: flex; align-items: center; justify-content: center; }
.faqx-contact__cards b { font-size: 16px; }
.faqx-contact__cards div span { display: block; font-size: 11px; color: rgba(255,255,255,.55); margin-top: 2px; font-weight: 600; }
.faqx-contact__cards em { font-style: normal; font-size: 13px; font-weight: 700; margin-top: auto; }
.faqx-cathero { display: grid; grid-template-columns: 1fr 320px; gap: 56px; align-items: end; }
.faqx-cathero__badge { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.faqx-kort { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 18px; }
.faqx-kort__label { font-size: 11px; font-weight: 800; color: var(--ink3); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 8px; }
.faqx-kort__row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 8px 2px; border-bottom: 1px dashed var(--line); }
.faqx-kort__row span { font-size: 13px; color: var(--ink2); font-weight: 600; }
.faqx-kort__row b { font-size: 13px; text-align: right; }
.faqx-body { display: grid; grid-template-columns: 280px 1fr; gap: 64px; align-items: start; padding-top: 64px; }
.faqx-side { position: sticky; top: 88px; }
.faqx-side__label { font-size: 11px; font-weight: 800; color: var(--ink3); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 14px; }
.faqx-side__nav { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.faqx-side__nav a { display: flex; align-items: center; justify-content: space-between; padding: 13px 16px;
  border-top: 1px solid var(--line); font-size: 14px; font-weight: 600; color: var(--ink);
  border-left: 3px solid transparent; }
.faqx-side__nav a:first-child { border-top: none; }
.faqx-side__nav a.is-active { background: var(--coral-lt); color: var(--coral-dk); font-weight: 800; border-left-color: var(--coral); }
.faqx-side__nav em { font-style: normal; font-size: 11px; font-weight: 800; color: var(--ink3); }
.faqx-side__nav a.is-active em { color: var(--coral-dk); }
.faqx-side__contact { margin-top: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 16px; }
.faqx-side__live { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 800; color: var(--success); margin-bottom: 8px; }
.faqx-side__live .dot { width: 7px; height: 7px; border-radius: 99px; background: var(--success); }
.faqx-side__contact b { font-size: 14px; line-height: 1.4; }
.faqx-side__contact p { font-size: 12px; margin: 4px 0 0; }
.faqx-side__contact a { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 14px; font-weight: 800; }
.faqx-acc__head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 14px;
  border-bottom: 1px solid var(--line); }
.faqx-acc__head h2 { font-size: 22px; }
.faqx-acc__ctrl { display: flex; gap: 16px; font-size: 12px; font-weight: 600; }
.faqx-acc__ctrl a { color: var(--ink2); }
.faqx-acc { background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; margin-top: 14px; }
.faqx-acc details { border-top: 1px solid var(--line); }
.faqx-acc details:first-child { border-top: none; }
.faqx-acc summary { display: grid; grid-template-columns: 40px 1fr 32px; gap: 16px; align-items: start;
  padding: 22px 24px; cursor: pointer; list-style: none; }
.faqx-acc summary::-webkit-details-marker { display: none; }
.faqx-acc__n { font-size: 13px; font-weight: 800; color: var(--coral); padding-top: 2px; }
.faqx-acc__q { font-size: 17px; font-weight: 700; letter-spacing: -.01em; line-height: 1.35; }
.faqx-acc__toggle { width: 30px; height: 30px; border-radius: 99px; background: var(--surface);
  position: relative; flex-shrink: 0; }
.faqx-acc__toggle::after { content: '+'; position: absolute; inset: 0; display: grid; place-items: center;
  font-weight: 800; color: var(--ink); }
.faqx-acc details[open] .faqx-acc__toggle { background: var(--ink); }
.faqx-acc details[open] .faqx-acc__toggle::after { content: '\2013'; color: #fff; }
.faqx-acc__a { padding: 0 24px 26px 80px; max-width: 820px; }
.faqx-acc__a p { font-size: 15px; line-height: 1.65; margin: 0; }
.faqx-acc__cta { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; padding: 10px 16px;
  background: var(--ink); color: #fff; border-radius: 99px; font-size: 12px; font-weight: 800; }
.faqx-acc__feedback { display: flex; align-items: center; gap: 14px; margin-top: 22px; padding-top: 18px;
  border-top: 1px dashed var(--line); font-size: 12px; color: var(--ink3); }
.faqx-acc__feedback button { background: var(--surface); border: 1px solid var(--line); border-radius: 99px;
  padding: 5px 12px; font-size: 12px; font-weight: 700; color: var(--ink2); cursor: pointer; font-family: var(--font); }
.faqx-related { margin-top: 56px; }
.faqx-related h3 { font-size: 20px; margin-bottom: 18px; }
.faqx-related__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.faqx-related__grid a { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 18px;
  display: flex; gap: 14px; align-items: center; }
.faqx-related__grid b { font-size: 15px; }
.faqx-related__grid div span { display: block; font-size: 12px; color: var(--ink3); margin-top: 3px; }
.faqx-related__grid em { margin-left: auto; font-style: normal; color: var(--ink3); }
.faqx-fallback { margin-top: 56px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  padding: 28px; display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
.faqx-fallback b { font-size: 18px; }
.faqx-fallback p { font-size: 14px; margin: 6px 0 0; }
.faqx-fallback__btns { display: flex; gap: 10px; }
@media (max-width: 1024px) {
  .faqx-hero__grid, .faqx-cathero { grid-template-columns: 1fr; gap: 32px; }
  .faqx-cats { grid-template-columns: repeat(2, 1fr); }
  .faqx-popular { grid-template-columns: 1fr; gap: 24px; }
  .faqx-contact { grid-template-columns: 1fr; padding: 32px; }
  .faqx-body { grid-template-columns: 1fr; gap: 32px; }
  .faqx-side { position: static; }
}
@media (max-width: 720px) {
  .faqx-cats, .faqx-contact__cards, .faqx-related__grid { grid-template-columns: 1fr; }
  .faqx-poplist a { grid-template-columns: 28px 1fr 20px; }
  .faqx-poplist__cat { display: none; }
  .faqx-acc__a { padding-left: 24px; }
}

/* ---- Magazine / inspiratie ---- */
.tagpill { display: inline-block; padding: 3px 10px; background: var(--coral-lt); color: var(--coral-dk);
  border-radius: 999px; font-size: 12px; font-weight: 700; }
.feature { display: grid; grid-template-columns: 1.3fr 1fr; gap: 32px; align-items: center;
  background: #fff; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
.feature__img { aspect-ratio: 16/10; }
.feature__img img { width: 100%; height: 100%; object-fit: cover; }
.feature__body { padding: 32px 40px 32px 8px; display: grid; gap: 12px; }
.feature__body h2 { font-size: 30px; }
.feature__meta { color: var(--ink3); font-size: 13px; font-weight: 600; }
.mag-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.mag-card { background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.mag-card:hover { box-shadow: var(--sh-md); transform: translateY(-2px); }
.mag-card__img { aspect-ratio: 16/9; }
.mag-card__img img { width: 100%; height: 100%; object-fit: cover; }
.mag-card__body { padding: 16px 18px 18px; display: grid; gap: 8px; }
.mag-card__body b { font-size: 17px; letter-spacing: -.2px; }
.mag-card__body p { margin: 0; font-size: 14px; color: var(--ink2); }
.mag-card__meta { color: var(--ink3); font-size: 12px; font-weight: 600; }
.article { max-width: 760px; }
.article__body { font-size: 18px; line-height: 1.75; color: var(--ink2); }
.article__body .lead { font-size: 21px; color: var(--ink); font-weight: 600; line-height: 1.5; }
.article__body p { margin: 0 0 1.1em; }
.article__author { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--line);
  color: var(--ink3); font-weight: 600; font-size: 14px; }
@media (max-width: 1024px) { .mag-grid { grid-template-columns: repeat(2, 1fr); }
  .feature { grid-template-columns: 1fr; } .feature__body { padding: 24px; } }
@media (max-width: 720px) { .mag-grid { grid-template-columns: 1fr; } }

/* ---- Vakantieparken ---- */
.chip.is-active { background: var(--coral); color: #fff; border-color: var(--coral); }
.park-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.park-card { background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.park-card:hover { box-shadow: var(--sh-md); transform: translateY(-2px); }
.park-card__img { position: relative; aspect-ratio: 3/2; }
.park-card__img img { width: 100%; height: 100%; object-fit: cover; }
.park-card__type { position: absolute; top: 10px; left: 10px; background: rgba(255,255,255,.95);
  color: var(--ink); font-size: 12px; font-weight: 700; padding: 4px 8px; border-radius: 6px; }
.park-card__body { padding: 16px 18px; display: grid; gap: 6px; }
.park-card__body b { font-size: 17px; }
.park-card__loc { color: var(--ink3); font-size: 13px; }
.park-card__body p { margin: 0; font-size: 14px; color: var(--ink2); }
.park-card__meta { color: var(--coral); font-weight: 700; font-size: 13px; }
.facil-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; }
.facil { padding: 6px 12px; background: var(--surface); border: 1px solid var(--line);
  border-radius: 999px; font-size: 13px; font-weight: 600; }
.dist-table { border-collapse: collapse; width: 100%; max-width: 420px; margin-top: 8px; }
.dist-table td { padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.dist-table td:last-child { text-align: right; color: var(--ink3); font-weight: 600; }
.seo__body h3 { margin: 24px 0 8px; }
@media (max-width: 1024px) { .park-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px) { .park-grid { grid-template-columns: 1fr; } }

/* ---- Inspiratie / magazine v3 (design-getrouw) ---- */
.mag-header { padding: 48px 0 28px; }
.mag-eyebrow { font-size: 12px; font-weight: 700; color: var(--coral); text-transform: uppercase; letter-spacing: .1em; }
.mag-h1 { font-size: clamp(44px, 6vw, 64px); letter-spacing: -.04em; margin: 12px 0 0; }
.mag-lead { font-size: 17px; color: var(--ink2); margin-top: 12px; max-width: 540px; }
.mag-featured { position: relative; display: block; height: 540px; border-radius: 20px; overflow: hidden; color: #fff; }
/* Alleen de directe achtergrondfoto vult de kaart. Zonder > pakte deze regel ook de
   avatar in het auteursblok, die dan formaatvullend over de kaart heen ging liggen. */
.mag-featured > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mag-featured__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, rgba(14,26,43,.85)); }
.mag-featured__cap { position: absolute; left: 36px; right: 36px; bottom: 36px; max-width: 720px; }
.mag-featured__tags { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.pill-solid { padding: 5px 12px; background: var(--coral); border-radius: 999px; font-size: 11px; font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase; }
.mag-featured__cat { font-size: 12px; font-weight: 700; color: rgba(255,255,255,.85); text-transform: uppercase; letter-spacing: .05em; }
.mag-featured__cap h2 { font-size: clamp(30px, 4vw, 56px); letter-spacing: -.03em; line-height: 1.02; color: #fff; }
.mag-featured__cap p { font-size: 17px; line-height: 1.5; margin-top: 14px; max-width: 600px; color: rgba(255,255,255,.9); }
.mag-featured__author { display: flex; align-items: center; gap: 12px; margin-top: 22px; }
.mag-featured__author b { font-size: 14px; } .mag-featured__author span { display: block; font-size: 12px; color: rgba(255,255,255,.7); }
.avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--surface2); flex-shrink: 0; display: inline-block; }

.mag-tabs-wrap { position: sticky; top: 72px; background: var(--bg); z-index: 20; border-bottom: 1px solid var(--line); margin-top: 40px; }
.mag-tabs { display: flex; gap: 8px; overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; }
.mag-tabs::-webkit-scrollbar { display: none; }
/* Vervaagde rand rechts als teken dat er meer is, i.p.v. een zichtbare scrollbalk. */
.mag-tabs-wrap { position: relative; }
.mag-tabs-wrap::after { content: ""; position: absolute; top: 0; right: 0; bottom: 1px; width: 48px;
  background: linear-gradient(90deg, transparent, var(--bg)); pointer-events: none; }
.mag-tab { padding: 14px 16px; font-size: 14px; font-weight: 700; color: var(--ink2); white-space: nowrap;
  border-bottom: 3px solid transparent; margin-bottom: -1px; cursor: pointer; }
.mag-tab em { font-style: normal; font-weight: 500; color: var(--ink3); margin-left: 4px; }
.mag-tab.is-active { color: var(--ink); border-bottom-color: var(--coral); }
.mag-tab:hover { color: var(--ink); }
.mag-filter-note { font-size: 14px; color: var(--ink2); margin: 0 0 20px; }
.mag-filter-note a { color: var(--coral); font-weight: 600; }
.mag-pager { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 40px 0 8px; }
.mag-pager__btn { padding: 10px 18px; border: 1px solid var(--line); border-radius: 10px; font-size: 14px;
  font-weight: 700; color: var(--ink); background: #fff; }
.mag-pager__btn:hover { border-color: var(--coral); color: var(--coral); }
.mag-pager__btn.is-off { color: var(--ink3); background: var(--surface); pointer-events: none; }
.mag-pager__now { font-size: 13px; color: var(--ink3); }

.mag-layout { display: grid; grid-template-columns: 1fr 320px; gap: 32px; padding-top: 32px; }
.mag-articles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-content: start; }
.artcard__img { position: relative; aspect-ratio: 4/3; border-radius: 12px; overflow: hidden; }
.artcard__img img { width: 100%; height: 100%; object-fit: cover; }
.artcard__cat { position: absolute; top: 12px; left: 12px; background: rgba(255,255,255,.95); color: var(--ink);
  padding: 4px 10px; border-radius: 6px; font-size: 11px; font-weight: 700; }
.artcard__title { font-size: 19px; letter-spacing: -.02em; line-height: 1.2; margin: 14px 0 0; }
.artcard__meta { font-size: 12px; color: var(--ink3); margin-top: 8px; }

.mag-side { display: flex; flex-direction: column; gap: 32px; }
.side-box { background: var(--surface); padding: 24px; border-radius: 14px; }
.side-eyebrow { font-size: 12px; font-weight: 700; color: var(--coral); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 14px; }
.most-read { list-style: none; padding: 0; margin: 0; }
.most-read li { display: flex; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.most-read li:first-child { border-top: none; }
.most-read__n { font-size: 22px; font-weight: 800; color: var(--coral); min-width: 24px; }
.most-read b { font-size: 14px; line-height: 1.3; } .most-read span { display: block; font-size: 11px; color: var(--ink3); margin-top: 4px; }
.editors { display: flex; flex-direction: column; gap: 12px; }
.editor { display: flex; align-items: center; gap: 12px; padding: 12px; background: #fff; border: 1px solid var(--line); border-radius: 10px; }
.editor b { font-size: 14px; } .editor span { display: block; font-size: 12px; color: var(--ink3); }
.side-news { background: var(--ink); color: #fff; padding: 24px; border-radius: 14px; }
.side-news h4 { font-size: 22px; letter-spacing: -.02em; margin: 8px 0 12px; color: #fff; }
.side-news input { width: 100%; padding: 12px 14px; border: none; border-radius: 8px; background: rgba(255,255,255,.1);
  color: #fff; font-family: inherit; font-size: 13px; margin-bottom: 8px; }
@media (max-width: 1024px) { .mag-layout { grid-template-columns: 1fr; } .mag-articles { grid-template-columns: repeat(2, 1fr); }
  .mag-featured { height: 420px; } }
@media (max-width: 720px) { .mag-articles { grid-template-columns: 1fr; } .mag-featured__cap { left: 20px; right: 20px; bottom: 20px; } }

/* ---- Zoekbalk-filters (uitklap) ---- */
.sbx-filters { left: 0; right: 0; width: auto; padding: 0; color: var(--ink); z-index: 95;
  max-height: min(66vh, 520px); display: none; flex-direction: column; }
.sbx-filters:not([hidden]) { display: flex; }
.sbx-filters__kop { display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px 10px; border-bottom: 1px solid var(--line); }
.sbx-filters__kop b { font-size: 15px; color: var(--ink); }
.sbx-filters__wis { border: 0; background: none; font: inherit; font-size: 13px;
  color: var(--ink3); cursor: pointer; text-decoration: underline; }
.sbx-filters__wis:hover { color: var(--coral); }
.sbx-filters__groep { padding: 12px 18px 2px; }
.sbx-filters__titel { display: block; font-size: 11px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; color: var(--ink3); margin-bottom: 9px; }
.sbx-filters__chips { display: flex; flex-wrap: wrap; gap: 8px; overflow: visible; }
.fchip { cursor: pointer; }
.fchip input { position: absolute; opacity: 0; pointer-events: none; }
.fchip__in { display: inline-flex; align-items: center; gap: 7px; border: 1.5px solid var(--line);
  border-radius: 999px; padding: 8px 14px 8px 11px; font-size: 13.5px; font-weight: 500;
  color: var(--ink); background: #fff; transition: border-color .12s, background .12s, color .12s; }
.fchip__in svg { flex: none; color: var(--ink3); }
.fchip:hover .fchip__in { border-color: var(--ink3); }
.fchip input:checked + .fchip__in { border-color: var(--coral); background: var(--coral-lt);
  color: #D12000; }
.fchip input:checked + .fchip__in svg { color: var(--coral-dk); }
.fchip input:focus-visible + .fchip__in { outline: 2px solid var(--sea); outline-offset: 2px; }
.sbx-filters__voet { position: sticky; bottom: 0; margin-top: 10px; padding: 12px 18px;
  background: #fff; border-top: 1px solid var(--line); border-radius: 0 0 var(--r-lg) var(--r-lg); }
.sbx-filters__voet .btn { width: 100%; }
.sbx-filters__groep, .sbx-filters__kop { flex: none; }
.sbx-filters { overflow-y: auto; }
/* Mobiel: gewoon als uitklap onder de balk (fixed brak op mobiel door transform-ouders) */
@media (max-width: 860px) {
  .sbx-filters { max-height: 60vh; }
}

/* ---- Actieve filters als pills onder de balk ---- */
.sbx-active { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 7px;
  padding: 8px 10px 4px; }
.sbx-active[hidden] { display: none; }
.sbx-active .apill { display: inline-flex; align-items: center; gap: 6px; border: 0;
  cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--coral-dk);
  background: var(--coral-lt); border-radius: 999px; padding: 6px 11px; }
.sbx-active .apill svg { flex: none; }
.sbx-active .apill:hover { background: #FFD6CC; }
.sbx-active .apill b { font-weight: 700; margin-left: 2px; }

/* --- Horizontale schuifzones: nooit een zichtbare scrollbalk ---------------
   Alles wat zijwaarts schuift (rails, tabbladen, subnav, carrousels) hoort te
   ogen als een strook die je sleept, niet als een venster met een balk eronder.
   Firefox/IE via scrollbar-width, WebKit via de pseudo-selector. */
.rail, .subnav__in, .acar__track, .aslider__track, .faqpage__side,
.weather, .kbw-weather, .mag-tabs, .trust__in, .place-chips, .chips {
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
}
.rail::-webkit-scrollbar, .subnav__in::-webkit-scrollbar, .acar__track::-webkit-scrollbar,
.aslider__track::-webkit-scrollbar, .faqpage__side::-webkit-scrollbar,
.weather::-webkit-scrollbar, .kbw-weather::-webkit-scrollbar, .mag-tabs::-webkit-scrollbar,
.trust__in::-webkit-scrollbar, .place-chips::-webkit-scrollbar, .chips::-webkit-scrollbar {
  display: none;
}

/* --- Auteursweergave (partials/auteur.html) --------------------------------
   Eén bouwsteen voor alle plekken waar een redacteur wordt getoond: onder een
   artikelkop, in de doos onder het stuk en als losse naam op een kaartje. */
.aut-regel { display: flex; align-items: center; gap: 12px; }
.aut-regel b { display: block; font-size: 14.5px; }
.aut-regel b a { color: inherit; text-decoration: none; }
.aut-regel b a:hover { text-decoration: underline; }
.aut-regel > div > span { display: block; font-size: 13px; opacity: .8; }
.aut-foto { position: relative; width: 40px; height: 40px; min-width: 40px; flex: none;
  border-radius: 999px; overflow: hidden;
  background: var(--coral-lt); color: var(--coral-dk); font-weight: 700; font-size: 13px;
  display: flex; align-items: center; justify-content: center; }
.aut-foto img { position: static; inset: auto; width: 100%; height: 100%; object-fit: cover;
  object-position: center 22%; border-radius: 0; }
.aut-foto--l { width: 56px; height: 56px; min-width: 56px; font-size: 17px; }
.aut-kort { color: inherit; text-decoration: none; font-weight: 600; }
.aut-kort:hover { color: var(--coral); }
.artd__authorbox b a { color: inherit; text-decoration: none; }
.artd__authorbox b a:hover { color: var(--coral); }
/* Op een donkere hero (artikelkop, uitgelicht) moet de tekst wit blijven. */
.artd-hero .aut-regel, .mag-featured__cap .aut-regel { color: #fff; }
.artd-hero .aut-regel b a, .mag-featured__cap .aut-regel b a { color: #fff; }

/* --- Landenraster op de thema-hub (/type-vakantie/<thema>/) -----------------
   Deze pagina bestaat om door te verwijzen naar de land×thema-pagina's. Chips
   waren te onopvallend voor iets dat de hoofdmoot van de pagina hoort te zijn. */
.landgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 12px; margin-bottom: 36px; }
.landkaart { display: block; background: #fff; border: 1px solid var(--line);
  border-radius: 14px; padding: 16px 18px; text-decoration: none; color: inherit;
  transition: border-color .14s, transform .14s; }
.landkaart:hover { border-color: var(--coral); transform: translateY(-2px); }
.landkaart b { display: block; font-size: 15.5px; }
.landkaart span { display: block; font-size: 13.5px; color: var(--ink2); margin-top: 3px; }
.landkaart em { display: inline-block; margin-top: 8px; font-style: normal; font-size: 11.5px;
  font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--coral); }

/* Kenner-tekst onderaan de thema-hub: leesbare kolom, niet volle breedte. */
.themetekst { max-width: 780px; margin: 0 auto; }
.themetekst p { font-size: 16.5px; line-height: 1.7; color: var(--ink2); }

/* ---- /bestemmingen/ : landen met hun streken -------------------------------------------
   Een <details> per land. De ingeklapte streken staan gewoon in de HTML, dus de crawler ziet
   ze; alleen het oog wordt gespaard bij 328 links op één pagina. */
.bestemmingen { display: flex; flex-direction: column; gap: 10px; }
.bland { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden; }
.bland[open] { border-color: var(--coral); }
.bland__kop { display: flex; align-items: center; gap: 12px; padding: 16px 20px;
  cursor: pointer; list-style: none; user-select: none; }
.bland__kop::-webkit-details-marker { display: none; }
.bland__kop:hover { background: var(--surface); }
.bland__naam { font-weight: 700; font-size: 19px; letter-spacing: -.01em; }
.bland__cijfers { color: var(--ink3); font-size: 14px; }
.bland__cijfers b { color: var(--ink); }
.bland__scheiding { opacity: .45; margin: 0 4px; }
.bland__pijl { margin-left: auto; color: var(--ink3); transition: transform .15s ease; }
.bland[open] .bland__pijl { transform: rotate(180deg); }
.bland__body { padding: 0 20px 18px; }
.bland__alles { display: inline-block; margin-bottom: 12px; font-weight: 600; font-size: 14px;
  color: var(--coral-dk); }
.bstreken { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 6px; list-style: none; padding: 0; margin: 0; }
.bstreken a { display: flex; justify-content: space-between; gap: 10px; padding: 8px 12px;
  border: 1px solid var(--line); border-radius: 10px; font-size: 14.5px; }
.bstreken a:hover { border-color: var(--coral); background: var(--coral-lt); }
.bstreken a span { color: var(--ink3); font-size: 13px; flex: none; }

@media (max-width: 640px) {
  /* Op mobiel de cijfers onder de naam: naast elkaar wordt het een propje. */
  .bland__kop { flex-wrap: wrap; gap: 4px 12px; padding: 14px 16px; }
  .bland__naam { flex: 1 0 auto; }
  .bland__cijfers { flex: 1 0 100%; font-size: 13px; }
  .bland__pijl { position: absolute; right: 16px; }
  .bland { position: relative; }
  .bland__body { padding: 0 16px 16px; }
}

/* Datumregel op de last-minute kaart: bij een last minute is "wanneer" de halve beslissing,
   dus die staat tussen de plaats en de prijs in plaats van ergens onderaan. */
.lm-datum { margin-top: 6px; font-size: 13px; font-weight: 600; color: var(--coral-tekst); }

/* ---------- Uitklapbaar blok (CSS-only) ---------------------------------------
   Voor lijsten die te lang zijn om helemaal te tonen, zoals de 392 streken op de
   homepage: die maakten de pagina drie schermen langer dan nodig.

   Bewust zonder JavaScript. De links moeten in de HTML staan, want dit is de plek waar
   de streekpagina's hun interne links vandaan halen; ze verbergen achter een script zou
   ze voor een crawler onbereikbaar maken. Nu staan ze er altijd en gaat het alleen om
   hoeveel je ervan ziet.

   Het schakelaartje blijft in de tabvolgorde (weggeclipt, niet display:none), zodat de
   knop met het toetsenbord te bedienen is; de focusring komt op het label terecht. */
.uitklap__schakelaar { position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; }
.uitklap { position: relative; max-height: 460px; overflow: hidden; }
.uitklap::after { content: ""; position: absolute; inset: auto 0 0 0; height: 180px;
  background: linear-gradient(to bottom, rgba(246,247,249,0) 0%, var(--surface) 72%);
  pointer-events: none; }
.uitklap__schakelaar:checked ~ .uitklap { max-height: none; }
.uitklap__schakelaar:checked ~ .uitklap::after { display: none; }

.uitklap__knop { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px;
  padding: 12px 20px; border: 1px solid var(--line); border-radius: 999px; background: #fff;
  font-size: 14px; font-weight: 700; color: var(--ink); cursor: pointer; }
.uitklap__knop:hover { border-color: var(--coral); color: var(--coral-tekst); }
.uitklap__schakelaar:focus-visible ~ .uitklap__knop { outline: 2px solid var(--coral);
  outline-offset: 2px; }
.uitklap__knop::after { content: "▾"; font-size: 12px; }
.uitklap__schakelaar:checked ~ .uitklap__knop::after { content: "▴"; }
.uitklap__minder { display: none; }
.uitklap__schakelaar:checked ~ .uitklap__knop .uitklap__meer { display: none; }
.uitklap__schakelaar:checked ~ .uitklap__knop .uitklap__minder { display: inline; }