/* Ontwerp v6 (Spanje.com v6, Claude Design, september 2026).

   Het ontwerp is een prototype met de stijl in elk element zelf. Hier staat
   diezelfde stijl als klassen, met exact de maten en kleuren uit het ontwerp:
   design/spanje-v6/Spanje.com v6.dc.html is de bron, en design/spanje-v6/render/
   de gerenderde pagina's om naast de site te leggen.

   De namen zijn Nederlands en beschrijven wat iets is, niet hoe het eruitziet,
   net als in de rest van de repo. Een waarde die meer dan eens voorkomt staat
   als variabele bovenaan. */

@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/plusjakartasans-latin-ext.341687eeeb6a.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: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/plusjakartasans-latin.7660bd9909fb.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 {
  --inkt: #17201f;
  --groen: #0f5c5b;
  --groen-donker: #0a403f;
  --groen-zacht: #eef5f2;
  --accent: #e0703c;
  --tekst: #3a4644;
  --tekst-intro: #4b5956;
  --tekst-zacht: #55635f;
  --grijs-knop: #46524f;
  --label: #6a7875;
  --noot: #8a9793;
  --scheiding: #c3cdc9;
  --lijn: #e7ecea;
  --lijn-licht: #f1f5f3;
  --lijn-rij: #eef2f0;
  --vlak: #f4f8f6;
  --beeld-leeg: #e8ede9;
  --voet: #0c2a29;
  --breed: 1320px;
  --marge: 32px;
}

/* ------------------------------------------------------------------ basis */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: #fff; color: var(--inkt);
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
}
a { color: var(--groen); text-decoration: none; }
a:hover { color: var(--groen-donker); }
img { max-width: 100%; }
button { font: inherit; }
.alleen-schermlezer {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.alleen-schermlezer:focus {
  position: fixed; top: 8px; left: 8px; width: auto; height: auto; clip: auto; z-index: 100;
  background: #fff; padding: 10px 14px; border-radius: 10px;
}

@keyframes rise { from { opacity: 0; transform: translate3d(0, 20px, 0); } to { opacity: 1; transform: none; } }
.pagina { animation: rise 0.5s cubic-bezier(0.16, 1, 0.3, 1) both; }
.kaart-til { transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease; }
.kaart-til:hover { transform: translateY(-5px); box-shadow: 0 22px 44px -26px rgba(12, 40, 40, 0.5); }
.zoom { transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); }
.kaart-til:hover .zoom { transform: scale(1.05); }
.rail { overflow-x: auto; scrollbar-width: none; }
.rail::-webkit-scrollbar { display: none; }
@media (prefers-reduced-motion: reduce) {
  .pagina { animation: none; }
  .kaart-til, .zoom { transition: none; }
  .kaart-til:hover, .kaart-til:hover .zoom { transform: none; }
}

/* Een beeld dat zijn vak vult. Het vak bepaalt de maat; zonder beeld blijft
   de lichtgroene ondergrond staan, net als het lege vak in het ontwerp. */
.vak { position: relative; overflow: hidden; background: var(--beeld-leeg); }
.vak > img, .vak .zoom > img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
}
.vak .zoom { position: absolute; inset: 0; }

/* ------------------------------------------------------------ opbouw */

.omhulsel { max-width: var(--breed); margin: 0 auto; padding-left: var(--marge); padding-right: var(--marge); }
.sectie { max-width: var(--breed); margin: 0 auto; padding: 56px var(--marge) 0; }
.sectie--slot { padding-bottom: 80px; }

.kicker {
  margin: 0 0 8px; font-size: 13px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--accent);
}
.titel-2 { margin: 0 0 10px; font-size: 32px; font-weight: 800; letter-spacing: -0.02em; }
.titel-2--dicht { margin-bottom: 8px; }
.intro { margin: 0 0 20px; font-size: 16.5px; color: var(--tekst-intro); }
.intro--lang { line-height: 1.6; max-width: 900px; text-wrap: pretty; }
.intro--aanbod { margin-bottom: 22px; font-size: 16px; }
.noot { margin: 16px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--noot); max-width: 980px; text-wrap: pretty; }
.linkregel { margin: 8px 0 0; font-size: 13px; font-weight: 700; }
.doorlink { font-size: 15px; font-weight: 700; color: var(--groen); white-space: nowrap; }
.kop-met-link { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: 20px; }

.knop-rand {
  display: inline-block; margin-top: 22px; cursor: pointer; border: 1.5px solid var(--groen);
  background: #fff; color: var(--groen); border-radius: 12px; padding: 13px 22px;
  font-size: 15px; font-weight: 700; text-align: center;
}
.knop-rand:hover { background: var(--groen-zacht); color: var(--groen); }
.knop-rand--breed { width: 100%; margin-top: 16px; padding: 12px 18px; font-size: 14.5px; }

.label-klein {
  margin: 0 0 10px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--label);
}

/* Rasters met het gedrag van het ontwerp op smalle schermen. */
.raster { display: grid; }
.raster-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.raster-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.raster-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.raster-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.raster-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }

/* ------------------------------------------------------------- topbalk */

.topbalk { background: var(--groen); color: rgba(255, 255, 255, 0.92); }
.topbalk__binnen {
  max-width: var(--breed); margin: 0 auto; padding: 9px var(--marge);
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.topbalk__tellingen { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.topbalk__item { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; white-space: nowrap; }
.topbalk__datum { font-size: 13px; white-space: nowrap; color: rgba(255, 255, 255, 0.72); }

/* ---------------------------------------------------------------- kop */

.kop { position: sticky; top: 0; z-index: 50; background: #fff; border-bottom: 1px solid var(--lijn); }
.kop__binnen {
  max-width: var(--breed); margin: 0 auto; padding: 0 var(--marge); height: 76px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.merk { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; color: var(--groen); white-space: nowrap; }
.merk:hover { color: var(--groen); }
.merk__tld { color: var(--accent); }
.kop__nav { display: flex; align-items: center; gap: 0; flex: 0 1 auto; min-width: 0; }
.kop__knop {
  cursor: pointer; flex-shrink: 0; border: 0; display: inline-flex; align-items: center; gap: 7px;
  white-space: nowrap; font-size: 15px; font-weight: 500; color: var(--grijs-knop);
  padding: 10px 14px; border-radius: 10px; background: transparent;
}
.kop__knop:hover { color: var(--groen); }
.kop__knop[aria-expanded="true"] { font-weight: 700; color: var(--groen); background: var(--groen-zacht); }
.kop__pijl { font-size: 9px; opacity: 0.6; }
.kop__rechts { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.kop__cta {
  cursor: pointer; border: 0; background: var(--accent); color: #fff; border-radius: 10px;
  padding: 12px 20px; font-size: 14.5px; font-weight: 700; white-space: nowrap;
}
.kop__cta:hover { color: #fff; filter: brightness(0.95); }
@media (max-width: 1080px) { .kop__knop { padding-left: 9px; padding-right: 9px; font-size: 14px; } }
@media (max-width: 960px) { .kop__pijl { display: none; } .kop__cta { padding-left: 14px; padding-right: 14px; } }

/* Het uitklapmenu onder de kop. */
.mega {
  position: sticky; top: 76px; z-index: 49; background: #fff; border-bottom: 1px solid var(--lijn);
  box-shadow: 0 22px 40px -30px rgba(12, 40, 40, 0.55);
}
.mega__binnen {
  max-width: var(--breed); margin: 0 auto; padding: 26px var(--marge) 28px;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px;
}
.mega__titel {
  margin: 0 0 14px; font-size: 12px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--accent);
}
.mega__titel--stil { color: var(--label); }
.mega__lijst { display: grid; gap: 4px; }
.mega__item { display: block; padding: 10px 0; border-bottom: 1px solid var(--lijn-licht); }
.mega__item-label { display: block; font-size: 17px; font-weight: 700; color: var(--inkt); }
.mega__item[aria-current="page"] .mega__item-label, .mega__item:hover .mega__item-label { color: var(--groen); }
.mega__item-noot { display: block; margin-top: 2px; font-size: 13.5px; color: var(--label); }
.mega__chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chip { font-size: 13.5px; color: var(--grijs-knop); background: var(--vlak); border-radius: 8px; padding: 7px 13px; }
.chip:hover { color: var(--groen); }
.mega__uitgelicht-beeld { height: 170px; border-radius: 14px; }
.mega__uitgelicht-kicker {
  margin: 12px 0 4px; font-size: 12px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--accent);
}
.mega__uitgelicht-titel { margin: 0; font-size: 16.5px; font-weight: 700; line-height: 1.3; color: var(--inkt); }
@media (max-width: 900px) { .mega__binnen { grid-template-columns: minmax(0, 1fr); gap: 22px; } }

/* --------------------------------------------------------------- voet */

.voet { background: var(--voet); color: rgba(255, 255, 255, 0.8); }
.voet__binnen {
  max-width: var(--breed); margin: 0 auto; padding: 52px var(--marge) 34px;
  display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr)); gap: 40px;
}
.voet__merk { margin: 0 0 12px; font-size: 24px; font-weight: 800; color: #fff; }
.voet__tekst { margin: 0 0 18px; font-size: 15px; line-height: 1.65; color: rgba(255, 255, 255, 0.68); text-wrap: pretty; }
.voet__kolomtitel { margin: 0 0 14px; font-size: 14px; font-weight: 700; color: #fff; }
.voet__lijst { display: grid; gap: 9px; }
.voet__link { font-size: 14.5px; color: rgba(255, 255, 255, 0.68); }
.voet__link:hover { color: #fff; }
.voet__onder { border-top: 1px solid rgba(255, 255, 255, 0.12); }
.voet__onder-binnen {
  max-width: var(--breed); margin: 0 auto; padding: 18px var(--marge);
  display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.voet__klein { font-size: 13px; color: rgba(255, 255, 255, 0.5); }
@media (max-width: 900px) { .voet__binnen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .voet__binnen { grid-template-columns: minmax(0, 1fr); } }

/* ---------------------------------------------------------- kruimelpad */

.kruimelpad { margin: 0 0 16px; font-size: 13.5px; color: var(--label); }
.kruimelpad a { font-weight: 600; color: var(--groen); }
.kruimelpad__punt { color: var(--scheiding); }
.kruimelpad__hier { font-weight: 700; color: var(--inkt); }

/* ------------------------------------------------------------ mozaïek */

.mozaiek-sectie { padding-top: 22px; }
.mozaiek {
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 12px; height: 380px;
}
.mozaiek__groot { border-radius: 20px; min-height: 220px; }
.mozaiek__rechts { display: grid; grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 12px; }
.mozaiek__klein { border-radius: 20px; min-height: 150px; }
.mozaiek--enkel { grid-template-columns: minmax(0, 1fr); }
.fotocredit { margin: 10px 0 0; font-size: 12.5px; color: var(--noot); }

/* --------------------------------------------------------- kerncijfers */

.kerncijfers-sectie { padding-top: 34px; }
.kerncijfers {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  border-top: 2px solid var(--inkt);
}
.kerncijfers--zes { grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); }
.kerncijfer { min-width: 0; padding: 20px 24px 22px 0; }
.kerncijfer__label {
  margin: 0 0 8px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--noot); text-wrap: pretty;
}
.kerncijfer__waarde {
  margin: 0; font-size: 34px; font-weight: 800; letter-spacing: -0.035em; line-height: 1;
  color: var(--inkt); overflow-wrap: anywhere;
}

/* ------------------------------------------------------- inleiding + reis */

.inleiding-sectie { padding-top: 46px; }
.duo-inleiding {
  display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); gap: 48px; align-items: start;
}
.titel-1 { margin: 0 0 16px; font-size: 44px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.06; }
.leestekst { font-size: 18px; line-height: 1.75; color: var(--tekst); text-wrap: pretty; }
.leestekst { margin-bottom: 30px; }
.leestekst p { margin: 0 0 16px; }
.leestekst > :last-child { margin-bottom: 0; }
.feitenrij {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(108px, 1fr)); gap: 0;
  border-top: 1px solid var(--lijn);
}
.feitenrij__vak { min-width: 0; padding: 16px 20px 0 0; }
.feitenrij__label {
  margin: 0 0 4px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--noot);
}
.feitenrij__waarde { margin: 0; font-size: 16px; font-weight: 700; color: var(--inkt); text-wrap: pretty; }

.reiswijzer { border: 1px solid var(--lijn); border-radius: 20px; padding: 22px; }
.reiswijzer__titel { margin: 0 0 16px; font-size: 20px; font-weight: 800; letter-spacing: -0.02em; }
.reiswijzer__label { margin-top: 18px; }
.reiswijzer__label:first-of-type { margin-top: 0; }
.reiswijzer__veld { border-top: 1px solid var(--lijn-licht); padding: 12px 0; }
.reiswijzer__kop { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.reiswijzer__naam { margin: 0 0 3px; font-size: 15px; font-weight: 700; text-wrap: pretty; }
.reiswijzer__afstand { margin: 0; font-size: 13px; color: var(--label); }
.code-badge {
  flex-shrink: 0; font-size: 11.5px; font-weight: 800; letter-spacing: 0.06em; color: var(--groen);
  background: var(--groen-zacht); border-radius: 8px; padding: 5px 9px;
}
.reiswijzer__schiphol { margin: 8px 0 0; font-size: 13px; line-height: 1.55; color: var(--tekst-intro); text-wrap: pretty; }
.reiswijzer__trein { border-top: 1px solid var(--lijn-licht); padding: 11px 0; font-size: 13.5px; color: var(--tekst); }
.reiswijzer__trein strong { font-weight: 700; }
.reiswijzer__noot { margin: 14px 0 0; font-size: 12px; line-height: 1.55; color: var(--noot); text-wrap: pretty; }

/* ------------------------------------------------------ maandstroken */

.maandstrook { gap: 8px; }
.maandvak { border-radius: 12px; padding: 12px 6px; text-align: center; }
.maandvak__maand {
  margin: 0 0 5px; font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--label);
}
.maandvak__waarde {
  margin: 0 0 4px; font-size: 19px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.18;
  overflow-wrap: anywhere; hyphens: auto;
}
.maandvak__woord { margin: 0; font-size: 10.5px; font-weight: 700; }

/* Kleuren per stand. Lucht: 0 aangenaam, 1 koel, 2 warm, 3 heet. */
.stand-lucht-0 { background: #e4f2e8; color: #1d5e3c; }
.stand-lucht-1 { background: #e8eff6; color: #2b5474; }
.stand-lucht-2 { background: #fdeecd; color: #8a5a12; }
.stand-lucht-3 { background: #f9ddd1; color: #a2411c; }
/* Zee: 0 fijn zwemmen, 1 fris, 2 warm. */
.stand-zee-0 { background: #e4f2e8; color: #1d5e3c; }
.stand-zee-1 { background: #e8eff6; color: #2b5474; }
.stand-zee-2 { background: #fdeecd; color: #8a5a12; }
.maandvak .maandvak__maand { color: var(--label); }

.legenda { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 14px; }
.legenda__item { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--grijs-knop); }
.legenda__blok { width: 13px; height: 13px; border-radius: 4px; }

/* Drukte als staafjes. */
.druktestrook { gap: 8px; align-items: end; }
.druktevak { text-align: center; }
.druktevak__staaf-ruimte { height: 104px; display: flex; align-items: flex-end; border-bottom: 1px solid var(--lijn); }
.druktevak__staaf { width: 100%; border-radius: 8px 8px 0 0; }
.druktevak__maand {
  margin: 9px 0 3px; font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--label);
}
.druktevak__woord { margin: 0; font-size: 12px; font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; hyphens: auto; }
.drukte-0 { color: #46524f; } .drukte-0 .druktevak__staaf, .legenda__blok.drukte-0 { height: 26%; background: #cfdcd6; }
.drukte-1 { color: #2b5474; } .drukte-1 .druktevak__staaf, .legenda__blok.drukte-1 { height: 52%; background: #a9c6db; }
.drukte-2 { color: #8a5a12; } .drukte-2 .druktevak__staaf, .legenda__blok.drukte-2 { height: 78%; background: #eec078; }
.drukte-3 { color: #a2411c; } .drukte-3 .druktevak__staaf, .legenda__blok.drukte-3 { height: 100%; background: #e09068; }
.legenda__blok.drukte-0, .legenda__blok.drukte-1, .legenda__blok.drukte-2, .legenda__blok.drukte-3 { height: 13px; }

/* ---------------------------------------------------------- weertabel */

.weertabel { border: 1px solid var(--lijn); border-radius: 18px; overflow: hidden; }
.weertabel table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.weertabel thead tr { background: var(--vlak); }
.weertabel th {
  text-align: left; padding: 13px 16px; font-size: 12px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--label); white-space: nowrap;
}
.weertabel tbody tr { border-top: 1px solid var(--lijn-licht); }
.weertabel td { padding: 12px 16px; color: var(--tekst); }
.weertabel td:first-child { font-weight: 700; text-transform: capitalize; color: var(--inkt); }
.weerrij--heet { background: #fdf6f2; }
.weerkaarten { display: none; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.weerkaart { border: 1px solid var(--lijn); border-radius: 14px; padding: 14px 16px; }
.weerkaart__maand { margin: 0 0 10px; font-size: 14px; font-weight: 800; text-transform: capitalize; }
.weerkaart__cellen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.weerkaart__label {
  margin: 0 0 2px; font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--noot);
}
.weerkaart__waarde { margin: 0; font-size: 15px; font-weight: 700; color: var(--tekst); }

/* ------------------------------------------------------- cijferlijst */

.cijferlijst { gap: 0 56px; }
.cijferrij {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px; align-items: baseline;
  border-bottom: 1px solid var(--lijn-rij); padding: 15px 0;
}
.cijferrij__label { margin: 0 0 3px; font-size: 15.5px; font-weight: 700; line-height: 1.3; text-wrap: pretty; }
.cijferrij__gebied { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--noot); text-wrap: pretty; }
.cijferrij__waarde { margin: 0; font-size: 25px; font-weight: 800; letter-spacing: -0.025em; color: var(--groen); white-space: nowrap; }

/* ------------------------------------------------------------ lijsten */

.naamlijst { gap: 0 40px; }
.naamrij {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  border-bottom: 1px solid var(--lijn-licht); padding: 14px 0;
}
.naamrij__naam { font-size: 16px; font-weight: 700; }
.naamrij__kenmerk { flex-shrink: 0; font-size: 13.5px; font-weight: 600; color: var(--tekst-zacht); }

.dagenlijst { border: 1px solid var(--lijn); border-radius: 18px; overflow: hidden; max-width: 720px; }
.dagrij { display: flex; justify-content: space-between; gap: 20px; padding: 14px 20px; border-bottom: 1px solid var(--lijn-licht); }
.dagrij__datum { font-size: 15px; font-weight: 700; color: var(--groen); }
.dagrij__naam { font-size: 15px; color: var(--tekst); text-align: right; }

/* ----------------------------------------------------- streekproducten */

.producten { gap: 16px; }
.product { border: 1px solid var(--lijn); border-radius: 16px; padding: 18px 20px; display: flex; flex-direction: column; gap: 6px; }
.product__kop { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.pil {
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--groen); background: var(--groen-zacht); border-radius: 999px; padding: 4px 10px;
}
.product__sinds { font-size: 12px; color: var(--noot); white-space: nowrap; }
.product__naam { margin: 4px 0 0; font-size: 17px; font-weight: 700; line-height: 1.25; text-wrap: pretty; }
.product__translit { margin: 0; font-size: 13px; color: var(--label); }
.product__bescherming { margin: 0; font-size: 13px; line-height: 1.5; color: var(--tekst-intro); }
.product__herkomst { margin: 2px 0 0; font-size: 13px; color: var(--tekst-zacht); }
.product__herkomst a { font-weight: 700; color: var(--groen); }

/* ------------------------------------------------------ wonen en kopen */

.wonenvlak { background: var(--vlak); border-radius: 22px; padding: 10px 28px; max-width: 900px; }
.wonenrij {
  display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 8px 28px; align-items: center;
  border-bottom: 1px solid #e3ebe7; padding: 20px 0;
}
.wonenrij:last-child { border-bottom: 0; }
.wonenrij__waarde { margin: 0; font-size: 30px; font-weight: 800; letter-spacing: -0.03em; line-height: 1; color: var(--groen); overflow-wrap: anywhere; }
.wonenrij__label { margin: 0 0 3px; font-size: 16px; font-weight: 700; text-wrap: pretty; }
.wonenrij__noot { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--tekst-zacht); text-wrap: pretty; }

/* ------------------------------------------------------- prijsvakken */

.prijsvakken { gap: 18px; }
.prijsvak { border: 1px solid var(--lijn); border-radius: 16px; padding: 22px; }
.prijsvak__waarde { margin: 0 0 4px; font-size: 28px; font-weight: 800; color: var(--groen); letter-spacing: -0.02em; }
.prijsvak__label { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--label); }

/* ------------------------------------------------------ tekstkaarten */

.tekstkaarten { gap: 22px; margin-top: 18px; }
.tekstkaart { border: 1px solid var(--lijn); border-radius: 18px; padding: 22px 24px; }
.tekstkaart__titel { margin: 0 0 7px; font-size: 18px; font-weight: 700; }
.tekstkaart__tekst { margin: 0; font-size: 15px; line-height: 1.65; color: var(--tekst-intro); text-wrap: pretty; }

/* --------------------------------------------------------- in de buurt */

.buurt { gap: 24px; }
.buurt__titel {
  margin: 0 0 10px; font-size: 12px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--label);
}
.buurt__rij { display: flex; justify-content: space-between; gap: 12px; border-top: 1px solid var(--lijn-licht); padding: 9px 0; font-size: 14px; }
.buurt__naam { min-width: 0; }
.buurt__afstand { flex-shrink: 0; color: var(--noot); }

/* ---------------------------------------------------------------- kaart */

.kaartvlak { position: relative; height: 340px; border-radius: 20px; overflow: hidden; background: var(--beeld-leeg); }
.kaartvlak iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.kaartvlak__laden {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; padding: 24px; text-align: center;
}
.kaartvlak__uitleg { margin: 0; max-width: 460px; font-size: 14px; line-height: 1.55; color: var(--tekst-zacht); }
.kaartvlak__knop {
  cursor: pointer; border: 0; background: var(--groen); color: #fff; border-radius: 12px;
  padding: 12px 20px; font-size: 14.5px; font-weight: 700;
}
.kaart-bijschrift { margin: 12px 0 0; font-size: 12.5px; color: var(--noot); }

/* --------------------------------------------------------- boekkaarten */

.boekkaarten { gap: 18px; margin-top: 18px; }
.boekkaart { display: block; border: 1px solid var(--lijn); border-radius: 18px; padding: 22px 24px; background: #fff; color: var(--inkt); }
.boekkaart:hover { color: var(--inkt); }
.boekkaart__titel { margin: 0 0 6px; font-size: 18px; font-weight: 800; letter-spacing: -0.02em; }
.boekkaart__tekst { margin: 0 0 14px; font-size: 14px; line-height: 1.55; color: var(--tekst-zacht); text-wrap: pretty; }
.boekkaart__cta { font-size: 14px; font-weight: 700; color: var(--groen); }

/* -------------------------------------------------------- aanbodkaarten */

.aanbod { gap: 22px; }
.aanbodkaart { display: block; border: 1px solid var(--lijn); border-radius: 18px; overflow: hidden; background: #fff; color: var(--inkt); }
.aanbodkaart:hover { color: var(--inkt); }
.aanbodkaart__beeld { height: 190px; }
.aanbodkaart--huis .aanbodkaart__beeld { height: 170px; }
.aanbodkaart__badge {
  position: absolute; top: 12px; left: 12px; pointer-events: none; border-radius: 8px;
  padding: 5px 10px; font-size: 12px; font-weight: 700;
}
.aanbodkaart__badge--score { background: var(--groen); color: #fff; }
.aanbodkaart__badge--sterren { background: rgba(255, 255, 255, 0.95); font-size: 11.5px; color: #b8621f; }
.aanbodkaart__body { padding: 16px 18px 18px; }
.aanbodkaart__plaats { margin: 0 0 4px; font-size: 13px; font-weight: 700; color: var(--accent); }
.aanbodkaart__titel { margin: 0 0 8px; font-size: 17px; font-weight: 700; line-height: 1.3; }
.aanbodkaart--huis .aanbodkaart__titel { font-size: 15.5px; line-height: 1.32; }
.aanbodkaart__tekst { margin: 0 0 12px; font-size: 14px; line-height: 1.55; color: var(--tekst-zacht); text-wrap: pretty; }
.aanbodkaart__meta { margin: 0 0 8px; font-size: 13.5px; color: var(--label); }
.aanbodkaart__voet {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  border-top: 1px solid var(--lijn-rij); padding-top: 12px;
}
.aanbodkaart__voet-meta { font-size: 13px; color: var(--label); }
.aanbodkaart__prijs { font-size: 18px; font-weight: 800; color: var(--groen); white-space: nowrap; }
.aanbodkaart__weekprijs { margin: 0; font-size: 16.5px; font-weight: 800; color: var(--groen); }
.aanbodkaart__per { font-size: 12.5px; font-weight: 600; color: var(--label); }

/* ------------------------------------------------------------ buren */

.buren { gap: 16px; }
.buur { display: block; color: var(--inkt); }
.buur:hover { color: var(--inkt); }
.buur__beeld { height: 130px; border-radius: 12px; }
.buur__naam { margin: 10px 0 2px; font-size: 15px; font-weight: 700; }
.buur__meta { margin: 0; font-size: 12px; color: var(--noot); }

/* ------------------------------------------------------- van dichtbij */

.dichtbij { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr); gap: 44px; margin-top: 20px; align-items: start; }
.inhoudsopgave { border: 1px solid var(--lijn); border-radius: 18px; padding: 20px 22px; position: sticky; top: 96px; }
.inhoudsopgave__titel {
  margin: 0 0 12px; font-size: 12px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--label);
}
.inhoudsopgave a { display: block; margin: 0 0 9px; font-size: 14.5px; font-weight: 600; color: var(--groen); }
.tekstsectie { margin-bottom: 30px; scroll-margin-top: 96px; }
.tekstsectie__titel { margin: 0 0 10px; font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }
.tekstsectie__tekst { font-size: 17px; line-height: 1.75; color: var(--tekst); text-wrap: pretty; }
.tekstsectie__tekst p { margin: 0 0 14px; }
.tekstsectie__tekst > :last-child { margin-bottom: 0; }
.tekstsectie__tekst h3 { margin: 22px 0 8px; font-size: 18px; font-weight: 800; }
.tekstsectie__tekst ul { margin: 0 0 14px; padding-left: 22px; }

/* ------------------------------------------------ smalle schermen */

@media (max-width: 1240px) { .raster-12 { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .raster-3, .raster-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .raster-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .raster-2, .duo-inleiding, .dichtbij { grid-template-columns: minmax(0, 1fr); }
  .raster-12 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .mozaiek { grid-template-columns: minmax(0, 1fr); height: auto; }
  .weertabel { display: none; }
  .weerkaarten { display: grid; }
  .inhoudsopgave { position: static; }
  .wonenrij { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  :root { --marge: 20px; }
  .raster-3, .raster-4 { grid-template-columns: minmax(0, 1fr); }
  .raster-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .raster-12 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .titel-1 { font-size: 36px; }
  .titel-2 { font-size: 27px; }
  .kop-met-link { flex-direction: column; align-items: flex-start; gap: 6px; }
}
.dichtbij--enkel { grid-template-columns: minmax(0, 1fr); }

/* ======================================================== streekpagina */

.streekhero { position: relative; height: 420px; overflow: hidden; background: var(--groen); }
.streekhero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.streekhero__waas { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 32, 32, 0.2), rgba(8, 32, 32, 0.76)); }
.streekhero__tekst { position: absolute; left: 0; right: 0; bottom: 34px; }
.streekhero__kicker { margin: 0 0 10px; font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #f5b544; }
.streekhero__titel { margin: 0 0 14px; font-size: 56px; font-weight: 800; letter-spacing: -0.03em; color: #fff; line-height: 1.02; }
.streekhero__badges { display: flex; gap: 10px; flex-wrap: wrap; }
.badge-wit { background: rgba(255, 255, 255, 0.94); border-radius: 999px; padding: 8px 16px; font-size: 13.5px; font-weight: 700; color: var(--inkt); }
.streekhero__credit { position: absolute; right: var(--marge); top: 14px; margin: 0; font-size: 11.5px; color: rgba(255, 255, 255, 0.8); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); }

.prijsbalk { border-bottom: 1px solid var(--lijn); background: var(--vlak); }
.prijsbalk__binnen {
  max-width: var(--breed); margin: 0 auto; padding: 16px var(--marge);
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; align-items: center;
}
.prijsbalk__tekst { margin: 0; font-size: 14.5px; font-weight: 600; color: var(--grijs-knop); }
.prijsbalk__pillen { display: flex; gap: 10px; flex-wrap: wrap; }
.pil-rand { font-size: 13.5px; font-weight: 700; color: var(--groen); border: 1.5px solid var(--groen); border-radius: 999px; padding: 8px 15px; }
.pil-rand:hover { background: var(--groen-zacht); }

.streek-intro-sectie { padding-top: 44px; }
.duo-streek { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 52px; align-items: start; }
.titel-2--ruim { margin-bottom: 16px; }
.cijferkaarten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.cijferkaart { border: 1px solid var(--lijn); border-radius: 16px; padding: 20px; }
.cijferkaart__waarde { margin: 0 0 3px; font-size: 22px; font-weight: 800; color: var(--groen); letter-spacing: -0.02em; overflow-wrap: anywhere; }
.cijferkaart__label { margin: 0; font-size: 13px; font-weight: 600; color: var(--label); }

.feitenstrook-sectie { padding-top: 30px; }
.feitenstrook {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 16px; align-items: center;
  background: var(--vlak); border-radius: 16px; padding: 20px 24px;
}
.feitenstrook__label { margin: 0 0 3px; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--label); }
.feitenstrook__waarde { margin: 0; font-size: 19px; font-weight: 800; color: var(--groen); }
.feitenstrook__link { font-size: 14px; font-weight: 700; color: var(--groen); white-space: nowrap; }

.beeldband-sectie { padding-top: 36px; }
.beeldband { gap: 12px; }
.beeldband__vak { height: 200px; border-radius: 14px; }

/* Verdelingen met balkjes: hotelklasse, verzorging, reisduur, soort huis. */
.verdelingen { gap: 20px; }
.verdeling { border: 1px solid var(--lijn); border-radius: 16px; padding: 22px; }
.verdeling__titel { margin: 0 0 16px; font-size: 15px; font-weight: 700; }
.verdeling__rijen { display: grid; gap: 12px; }
.verdeling__kop { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 5px; }
.verdeling__label { min-width: 0; flex: 1 1 auto; font-size: 14px; color: var(--grijs-knop); overflow-wrap: anywhere; }
.verdeling__pct { flex-shrink: 0; font-size: 14px; font-weight: 700; color: var(--groen); }
.verdeling__balk { height: 6px; border-radius: 999px; background: var(--lijn-rij); overflow: hidden; }
.verdeling__vul { height: 100%; background: var(--groen); border-radius: 999px; }
.lijstkaarten { gap: 20px; margin-top: 20px; }
.lijstkaart { border: 1px solid var(--lijn); border-radius: 16px; padding: 22px; }
.lijstkaart__titel { margin: 0 0 14px; font-size: 15px; font-weight: 700; }
.lijstkaart__rij { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--lijn-licht); font-size: 14px; }
.lijstkaart__sleutel { color: var(--label); }
.lijstkaart__waarde { font-weight: 700; white-space: nowrap; }
.lijstkaart__paar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; }
.samenvatting { margin: 14px 0 0; font-size: 13px; color: var(--noot); }

/* In de buurt op een streek: naam met de plaats eronder. */
.buurt--streek .buurt__titel { margin: 0 0 12px; font-size: 15px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--inkt); border-bottom: 2px solid var(--groen); padding-bottom: 8px; }
.buurt--streek .buurt__item { margin-bottom: 10px; }
.buurt__item-naam { margin: 0 0 2px; font-size: 14.5px; font-weight: 600; line-height: 1.35; }
.buurt__item-plaats { margin: 0; font-size: 13px; color: var(--noot); }

.zietkolommen { gap: 22px; }
.zietkolom { border-top: 2px solid var(--groen); padding-top: 16px; }
.zietkolom__titel { margin: 0 0 7px; font-size: 17px; font-weight: 700; }
.zietkolom__tekst { margin: 0; font-size: 15.5px; line-height: 1.65; color: var(--tekst-zacht); text-wrap: pretty; }

.boekband-sectie { max-width: var(--breed); margin: 56px auto 0; padding: 0 var(--marge); }
.boekband {
  background: var(--groen); border-radius: 22px; padding: 42px;
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 40px; align-items: center;
}
.boekband__kicker { margin: 0 0 8px; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #f5b544; }
.boekband__titel { margin: 0 0 10px; font-size: 32px; font-weight: 800; letter-spacing: -0.02em; color: #fff; line-height: 1.12; }
.boekband__tekst { margin: 0; font-size: 16.5px; line-height: 1.65; color: rgba(255, 255, 255, 0.84); text-wrap: pretty; }
.boekband__knoppen { display: grid; gap: 10px; }
.boekband__knop { display: block; text-align: center; border-radius: 12px; padding: 16px; font-size: 15.5px; font-weight: 700; background: var(--accent); color: #fff; }
.boekband__knop:hover { color: #fff; filter: brightness(0.95); }
.boekband__knop--rand { background: none; border: 1.5px solid rgba(255, 255, 255, 0.45); padding: 15px; }

.luchthavenkaarten { gap: 16px; }
.luchthavenkaart { border: 1px solid var(--lijn); border-radius: 14px; padding: 18px; }
.luchthavenkaart__kop { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.luchthavenkaart__naam { margin: 0 0 3px; font-size: 15.5px; font-weight: 700; }
.luchthavenkaart__afstand { margin: 0 0 10px; font-size: 13.5px; color: var(--label); }
.luchthavenkaart__verbinding { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--tekst-intro); text-wrap: pretty; }
.treinlijst { gap: 0 40px; }
.treinrij { display: flex; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--lijn-licht); padding: 13px 0; font-size: 14.5px; color: var(--tekst); }
.treinrij__van { font-weight: 700; }
.treinrij__duur { flex-shrink: 0; color: var(--tekst-zacht); text-align: right; }

.kop-met-link--aanbod { margin-bottom: 8px; }

@media (max-width: 900px) {
  .duo-streek, .boekband { grid-template-columns: minmax(0, 1fr); }
  .feitenstrook { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* De kaartlink over de volle breedte en afbrekend: "Bekijk Costa Dorada op de
     kaart" past niet in een halve kolom van 160 pixels. */
  .feitenstrook__link { grid-column: 1 / -1; white-space: normal; }
  .streekhero__titel { font-size: 42px; }
}
@media (max-width: 560px) {
  .streekhero { height: 360px; }
  .streekhero__titel { font-size: 36px; }
  .boekband { padding: 28px; }
  .lijstkaart__paar { grid-template-columns: minmax(0, 1fr); }
}

/* ========================================================== landpagina */

.titel-2--groot { font-size: 34px; }
.titel-2--middel { font-size: 30px; margin-bottom: 8px; }
.titel-3 { margin: 0 0 22px; font-size: 26px; font-weight: 800; letter-spacing: -0.02em; }
.knop-vol {
  display: inline-block; border: 0; background: var(--groen); color: #fff; border-radius: 12px;
  padding: 17px 30px; font-size: 16px; font-weight: 700;
}
.knop-vol:hover { color: #fff; background: var(--groen-donker); }
.knop-rand--hero { margin-top: 0; padding: 16px 28px; font-size: 16px; }

.landhero { background: linear-gradient(180deg, var(--vlak) 0%, #fff 100%); }
.landhero__binnen {
  max-width: var(--breed); margin: 0 auto; padding: 56px var(--marge) 64px;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 56px; align-items: center;
}
.landhero__titel { margin: 0 0 22px; font-size: 54px; line-height: 1.06; letter-spacing: -0.03em; font-weight: 800; text-wrap: balance; }
.landhero__usps { display: grid; gap: 11px; margin-bottom: 24px; }
.landhero__usp { display: flex; align-items: center; gap: 10px; font-size: 16.5px; font-weight: 600; color: #26332f; }
.vinkje {
  display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px;
  border-radius: 999px; background: #dff2e6; color: #1d7a4c; font-size: 12px; font-weight: 800; flex-shrink: 0;
}
.landhero__tekst { margin: 0 0 30px; font-size: 17.5px; line-height: 1.68; color: var(--tekst-intro); text-wrap: pretty; }
.landhero__tekst strong { font-weight: 700; }
.landhero__voorraad {
  display: flex; gap: 24px; flex-wrap: wrap; margin-bottom: 28px; padding: 18px 0;
  border-top: 1px solid #e3eae6; border-bottom: 1px solid #e3eae6;
}
.landhero__getal { margin: 0 0 2px; font-size: 22px; font-weight: 800; color: var(--groen); }
.landhero__getal-label { margin: 0; font-size: 13px; font-weight: 600; color: var(--label); }
.landhero__knoppen { display: flex; gap: 12px; flex-wrap: wrap; }
/* Drie beelden in vaste vakken: één hoog links, twee rechts onder elkaar. De
   vakken hebben een vaste hoogte en het beeld vult ze (object-fit), zodat er
   nooit iets over een ander vak heen schuift zoals in het prototype. */
.landhero__beelden {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  grid-template-rows: 190px 190px; gap: 14px;
}
.landhero__beelden--enkel { grid-template-columns: minmax(0, 1fr); grid-template-rows: 394px; }
.landhero__groot { grid-row: span 2; border-radius: 18px; }
.landhero__beelden--enkel .landhero__groot { grid-row: auto; }
.landhero__klein { border-radius: 18px; }

/* Het zoekpaneel als kaart onder de hero. */
.zoekpaneel-sectie { max-width: var(--breed); margin: 0 auto; padding: 0 var(--marge); }
.herozoek__paneel {
  background: #fff; border: 1px solid var(--lijn); border-radius: 18px;
  box-shadow: 0 18px 40px -30px rgba(12, 40, 40, 0.5); padding: 20px;
}
.herozoek__tabs { display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; }
.herozoek__tab {
  cursor: pointer; border: 0; background: var(--lijn-licht); color: var(--grijs-knop); border-radius: 10px;
  padding: 11px 20px; font-size: 14.5px; font-weight: 700; white-space: nowrap;
}
.herozoek__tab.is-aan { background: var(--groen); color: #fff; }
.herozoek__aantal { margin-left: 6px; font-weight: 600; opacity: 0.75; }
.herozoek__vorm.is-uit { display: none; }
.herozoek__velden { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; align-items: end; }
.herozoek__velden--los { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.herozoek__veld { display: grid; gap: 6px; min-width: 0; }
.herozoek__label { font-size: 12.5px; font-weight: 700; color: var(--label); }
.herozoek__veld select, .herozoek__veld input {
  min-width: 0; width: 100%; border: 1px solid #dde4e1; border-radius: 10px; padding: 13px 14px;
  font: inherit; font-size: 15px; background: #fafbfa; color: var(--inkt);
}
.herozoek__knop {
  cursor: pointer; border: 0; background: var(--accent); color: #fff; border-radius: 10px;
  padding: 15px 28px; font-size: 15.5px; font-weight: 700; white-space: nowrap;
}
.herozoek__knop:hover { filter: brightness(0.95); }
.herozoek__extern { margin: 0; font-size: 15px; color: var(--tekst-intro); }
.herozoek__prijzen { margin: 14px 0 0; font-size: 13.5px; color: var(--label); }
.herozoek__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.herozoek__chip { font-size: 13px; font-weight: 600; color: var(--grijs-knop); background: var(--vlak); border-radius: 8px; padding: 7px 12px; }

/* Aanbodkaarten zoals op de landpagina: groter beeld, prijs bovenaan. */
.aanbod--ruim { gap: 24px; }
.aanbodkaart__beeld--hoog { height: 240px; }
.aanbodkaart__beeld--gids { height: 200px; }
.aanbodkaart__body--ruim { padding: 18px 20px 20px; }
.aanbodkaart__badge--wit { background: rgba(255, 255, 255, 0.95); color: var(--inkt); top: 14px; left: 14px; padding: 6px 11px; }
.aanbodkaart__badge--groen { background: rgba(15, 92, 91, 0.95); color: #fff; font-size: 11.5px; }
.aanbodkaart__grootprijs { margin: 0 0 14px; font-size: 22px; font-weight: 800; color: var(--groen); }
.aanbodkaart__specs { display: flex; gap: 8px 16px; flex-wrap: wrap; border-top: 1px solid var(--lijn-rij); padding-top: 13px; }
.aanbodkaart__specs span { font-size: 13.5px; color: var(--tekst-zacht); font-weight: 500; }
.aanbodkaart__titel--klein { font-size: 16px; margin-bottom: 4px; }
.gidskaart__meta { margin: 0 0 8px; font-size: 12.5px; font-weight: 700; color: var(--accent); }

.directnaar { gap: 22px; }
.directtegel { position: relative; display: block; height: 230px; border-radius: 18px; overflow: hidden; background: var(--groen); }
.directtegel__beeld { position: absolute; inset: 0; opacity: 0.55; }
.directtegel__beeld img { width: 100%; height: 100%; object-fit: cover; display: block; }
.directtegel__waas { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 38, 37, 0.15), rgba(10, 38, 37, 0.86)); }
.directtegel__tekst { position: absolute; left: 22px; right: 22px; bottom: 20px; }
.directtegel__titel { margin: 0 0 6px; font-size: 20px; font-weight: 700; color: #fff; }
.directtegel__blurb { margin: 0 0 10px; font-size: 14.5px; line-height: 1.5; color: rgba(255, 255, 255, 0.86); text-wrap: pretty; }
.directtegel__cta { font-size: 14px; font-weight: 700; color: #f5b544; }

.prijsvak--groot { padding: 24px; }
.prijsvak--groot .prijsvak__waarde { font-size: 32px; }
.prijsvak--groot .prijsvak__label { font-size: 14px; }

.regiotegels { gap: 20px; }
.regiotegel { position: relative; display: block; height: 210px; border-radius: 16px; overflow: hidden; background: var(--groen); }
.regiotegel__beeld { position: absolute; inset: 0; opacity: 0.68; }
.regiotegel__beeld img { width: 100%; height: 100%; object-fit: cover; display: block; }
.regiotegel__waas { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 38, 37, 0.1), rgba(10, 38, 37, 0.82)); }
.regiotegel__tekst { position: absolute; left: 18px; right: 18px; bottom: 16px; }
.regiotegel__naam { margin: 0 0 3px; font-size: 19px; font-weight: 700; color: #fff; }
.regiotegel__meta { margin: 0; font-size: 13px; color: rgba(255, 255, 255, 0.8); }
.andere-regios__kop { margin: 26px 0 12px; font-size: 14px; font-weight: 700; color: var(--grijs-knop); }
.andere-regios { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-regio { font-size: 13.5px; font-weight: 500; color: var(--grijs-knop); background: var(--vlak); border-radius: 8px; padding: 8px 13px; }
.chip-regio:hover { color: var(--groen); background: var(--groen-zacht); }

.duo-landinfo { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 52px; align-items: start; }
.landinfo__deel { margin-bottom: 20px; }
.landinfo__kop { margin: 28px 0 10px; font-size: 22px; font-weight: 800; letter-spacing: -0.01em; }
.landinfo__tekst, .zijkaart__tekst { font-size: 17px; line-height: 1.75; color: var(--tekst); text-wrap: pretty; }
.landinfo__tekst p { margin: 0 0 14px; }
.landinfo__tekst > :last-child, .zijkaart__tekst > :last-child { margin-bottom: 0; }
.landinfo__zij { display: grid; gap: 16px; }
.gegevenskaart { border: 1px solid var(--lijn); border-radius: 18px; padding: 24px; }
.gegevenskaart__rij {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 14px;
  padding: 9px 0; border-bottom: 1px solid var(--lijn-licht);
}
.gegevenskaart__sleutel { font-size: 14px; color: var(--label); }
.gegevenskaart__waarde { font-size: 14px; font-weight: 700; }
.zijkaart { background: var(--vlak); border-radius: 18px; padding: 24px; }
.zijkaart__tekst { font-size: 15.5px; line-height: 1.68; }
.zijkaart__tekst p { margin: 0 0 12px; }

.landgroep__intro { max-width: 720px; margin-bottom: 26px; }
.landgroep__intro p { margin: 0 0 10px; }
.feitjes { gap: 0 44px; }
.feitje {
  display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 16px; align-items: start;
  padding: 16px 0; border-bottom: 1px solid var(--lijn-rij);
}
.feitje__n { font-size: 19px; font-weight: 800; color: var(--groen); }
.feitje__titel { margin: 0 0 5px; font-size: 17px; font-weight: 700; }
.feitje__tekst, .landlijst__tekst { font-size: 15.5px; line-height: 1.65; color: var(--tekst-zacht); text-wrap: pretty; }
.feitje__tekst p, .landlijst__tekst p, .topbestemming__tekst p, .zietkolom__tekst p { margin: 0 0 8px; }
.feitje__tekst > :last-child, .landlijst__tekst > :last-child, .topbestemming__tekst > :last-child, .zietkolom__tekst > :last-child { margin-bottom: 0; }
.waaromkaarten { gap: 20px; }
.raster-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.topbestemmingen { gap: 20px; }
.topbestemming { display: block; border: 1px solid var(--lijn); border-radius: 16px; overflow: hidden; background: #fff; color: var(--inkt); }
.topbestemming:hover { color: var(--inkt); }
.topbestemming__beeld { height: 160px; }
.topbestemming__body { padding: 16px 18px 18px; }
.topbestemming__naam { margin: 0 0 7px; font-size: 17px; font-weight: 700; }
.topbestemming__tekst { font-size: 14.5px; line-height: 1.6; color: var(--tekst-zacht); text-wrap: pretty; }
.lijstduo { gap: 44px; }
.landlijst__rij { padding: 15px 0; border-bottom: 1px solid var(--lijn-rij); }
.landlijst__titel { margin: 0 0 5px; font-size: 17px; font-weight: 700; }

.plaatsrail { display: flex; gap: 20px; padding-bottom: 10px; }
.plaatsrail__kaart { flex: 0 0 300px; }
.plaatsrail__cta { font-size: 14px; font-weight: 700; color: var(--accent); }

/* Reisadvies in de kleur van Buitenlandse Zaken. */
.reisadvies { border: 1px solid var(--lijn); border-radius: 20px; overflow: hidden; margin-top: 18px; max-width: 980px; }
.reisadvies__kop { display: flex; align-items: center; gap: 14px; padding: 16px 22px; background: var(--advies-vlak); }
.reisadvies__kop--klein { gap: 10px; padding: 12px 14px; }
.reisadvies__stip { width: 14px; height: 14px; border-radius: 999px; background: var(--advies-stip); flex-shrink: 0; }
.reisadvies__kop--klein .reisadvies__stip { width: 12px; height: 12px; }
.reisadvies__kleur { margin: 0; font-size: 16.5px; font-weight: 800; color: var(--advies-tekst); }
.reisadvies__kop--klein .reisadvies__kleur { font-size: 14.5px; }
.reisadvies__body { padding: 18px 22px 20px; }
.reisadvies__punt { margin: 0 0 10px; font-size: 15.5px; line-height: 1.65; color: var(--tekst); text-wrap: pretty; }
.reisadvies__voet { margin: 14px 0 0; font-size: 13.5px; color: var(--label); }
.reisadvies--groen { --advies-vlak: #e6f4ea; --advies-stip: #2e9e5b; --advies-tekst: #1d6b3d; }
.reisadvies--geel { --advies-vlak: #fdf6d8; --advies-stip: #e2b31c; --advies-tekst: #7a5d00; }
.reisadvies--oranje { --advies-vlak: #fdebdc; --advies-stip: #e57a22; --advies-tekst: #9a4a0c; }
.reisadvies--rood { --advies-vlak: #fbe3e1; --advies-stip: #d23b30; --advies-tekst: #9b231b; }
.adviesraster { gap: 12px; max-width: 980px; }
.advieskleur { border: 1px solid var(--lijn); border-radius: 14px; overflow: hidden; }
.advieskleur__uitleg { margin: 0; padding: 11px 14px 13px; font-size: 13.5px; line-height: 1.5; color: var(--tekst-intro); text-wrap: pretty; }

.landcijfers { gap: 0 36px; }
.landcijfer { border-top: 2px solid var(--lijn); padding: 16px 0 20px; }
.landcijfer__waarde { margin: 0 0 6px; font-size: 24px; font-weight: 800; letter-spacing: -0.025em; overflow-wrap: anywhere; }
.landcijfer__label { margin: 0 0 6px; font-size: 14.5px; font-weight: 700; line-height: 1.35; text-wrap: pretty; }
.landcijfer__noot { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--noot); text-wrap: pretty; }

.vakantietabel { border: 1px solid var(--lijn); border-radius: 18px; overflow: hidden; max-width: 980px; }
.vakantietabel table { width: 100%; border-collapse: collapse; font-size: 15px; }
.vakantietabel th {
  text-align: left; padding: 13px 18px; font-size: 12px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--label); background: var(--vlak);
}
.vakantietabel td { padding: 13px 18px; color: var(--tekst); border-top: 1px solid var(--lijn-licht); }
.vakantietabel td.vakantietabel__land { font-weight: 700; color: var(--inkt); }
.vakantietabel td.vakantietabel__waar { color: var(--tekst-zacht); }
.vakantiekaarten { display: none; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.vakantiekaart { border: 1px solid var(--lijn); border-radius: 14px; padding: 14px 16px; }
.vakantiekaart__land { margin: 0 0 4px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--noot); }
.vakantiekaart__naam { margin: 0 0 4px; font-size: 16px; font-weight: 700; }
.vakantiekaart__periode { margin: 0 0 3px; font-size: 14px; color: var(--tekst); }
.vakantiekaart__waar { margin: 0; font-size: 13.5px; color: var(--tekst-zacht); }

@media (max-width: 1240px) {
  .raster-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .landhero__binnen, .duo-landinfo { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .landhero__titel { font-size: 42px; }
  .raster-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vakantietabel { display: none; }
  .vakantiekaarten { display: grid; }
  .herozoek__velden--los { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .landhero__binnen { padding-top: 32px; padding-bottom: 40px; }
  .landhero__titel { font-size: 34px; }
  .landhero__beelden { grid-template-rows: 150px 150px; gap: 10px; }
  .landhero__beelden--enkel { grid-template-rows: 260px; }
  .raster-5 { grid-template-columns: minmax(0, 1fr); }
  .titel-2--groot { font-size: 27px; }
  .titel-2--middel { font-size: 25px; }
  .plaatsrail__kaart { flex-basis: 260px; }
  .herozoek__velden { grid-template-columns: minmax(0, 1fr); }
}

/* Zonder inleiding onder de kop: dezelfde lucht als met. */
h2 + .topbestemmingen, h2 + .waaromkaarten, h2 + .feitjes { margin-top: 24px; }

/* ===================================================== regio-overzicht */

.streekhero--overzicht { height: 440px; }
.streekhero__onder { margin: 0; font-size: 18px; line-height: 1.6; color: rgba(255, 255, 255, 0.9); max-width: 640px; text-wrap: pretty; }
.bredekaarten { display: grid; gap: 26px; }
.bredekaart {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); border: 1px solid var(--lijn);
  border-radius: 20px; overflow: hidden; background: #fff; color: var(--inkt);
}
.bredekaart:hover { color: var(--inkt); }
.bredekaart--om { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
.bredekaart--om .bredekaart__beeld { order: 2; }
.bredekaart__beeld { min-height: 300px; }
.bredekaart__tekst { padding: 34px 38px; }
.bredekaart__naam { margin: 0 0 12px; font-size: 30px; font-weight: 800; letter-spacing: -0.02em; }
.bredekaart__blurb { margin: 0 0 18px; font-size: 16.5px; line-height: 1.7; color: var(--tekst-intro); text-wrap: pretty; }
.bredekaart__cijfers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 20px; }
.bredekaart__cijfer { background: var(--vlak); border-radius: 12px; padding: 14px; }
.bredekaart__waarde { margin: 0 0 2px; font-size: 18px; font-weight: 800; color: var(--groen); }
.bredekaart__label { margin: 0; font-size: 12.5px; font-weight: 600; color: var(--label); }
.plaatslijsten { gap: 32px; }
.plaatslijst__streek { margin: 0 0 12px; font-size: 17px; font-weight: 700; }
.plaatslijst__streek a { color: var(--inkt); }
.plaatslijsten .chip-regio { font-size: 13px; padding: 6px 11px; }

@media (max-width: 900px) {
  .bredekaart, .bredekaart--om { grid-template-columns: minmax(0, 1fr); }
  .bredekaart--om .bredekaart__beeld { order: 0; }
  .bredekaart__beeld { min-height: 220px; }
}
@media (max-width: 560px) {
  .streekhero--overzicht { height: 380px; }
  .streekhero__onder { font-size: 16px; }
  .bredekaart__tekst { padding: 22px 20px; }
  .bredekaart__naam { font-size: 25px; }
  .bredekaart__cijfers { gap: 8px; }
}


/* ================================================== aanbod-overzichten */

/* Ontwerp v6: de aanbod-overzichten /reizen/, /vakantiehuisjes/, /cruises/ en
   /te-koop/ (artboards isReizen, isHuizen, isCruises en isAanbod in
   design/spanje-v6/Spanje.com v6.dc.html).

   Apart van v6.css zolang de pagina's in aanbouw zijn; bij het samenvoegen
   gaat dit er als eigen blok in. Maten en kleuren komen uit de inline stijl
   van het ontwerp; waar een waarde al een variabele in v6.css is, staat die
   variabele er. */

/* ------------------------------------------------------------- kop */

.overzichtkop { background: var(--vlak); border-bottom: 1px solid var(--lijn); }
.overzichtkop__binnen { max-width: var(--breed); margin: 0 auto; padding: 30px var(--marge); }
.overzichtkop__pad { margin: 0 0 8px; }
.overzichtkop__titel { margin: 0 0 8px; font-size: 38px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.12; }
.overzichtkop__tekst { margin: 0; font-size: 16.5px; line-height: 1.55; color: var(--tekst-intro); max-width: 760px; text-wrap: pretty; }

/* ------------------------------------------------------- opbouw */

.overzichtlijf { max-width: var(--breed); margin: 0 auto; padding: 26px var(--marge) 0; }
.overzichtlijf__raster {
  display: grid; grid-template-columns: minmax(210px, 0.85fr) minmax(0, 3fr); gap: 32px; align-items: start;
}
/* Niet sticky zoals in het ontwerp: met veertien filtergroepen is de kolom
   hoger dan het scherm, en een plakkende kolom die langer is dan het venster
   laat zijn onderkant nooit zien. */
.overzichtlijf__zij, .overzichtlijf__hoofd { min-width: 0; }
.overzichtlijf__leeg { margin: 0; padding: 30px 0; font-size: 16.5px; color: var(--tekst-intro); }

/* ----------------------------------------------------- filterkolom */

.filterknop { display: none; }
.filterkolom { border: 1px solid var(--lijn); border-radius: 16px; overflow: hidden; background: #fff; }
.filterkolom__kop {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 14px 18px; background: var(--vlak); border-bottom: 1px solid var(--lijn);
}
.filterkolom__titel { font-size: 14.5px; font-weight: 800; }
.filterkolom__wis { font-size: 13px; font-weight: 600; color: var(--groen); }
.filterkolom__lijf { padding: 18px; }

.filterzoek { position: relative; margin-bottom: 20px; }
.filterzoek input {
  width: 100%; min-width: 0; border: 1px solid #dde4e1; border-radius: 10px; padding: 11px 42px 11px 12px;
  font: inherit; font-size: 14.5px; background: #fafbfa; color: var(--inkt);
}
.filterzoek button {
  position: absolute; top: 0; right: 0; bottom: 0; width: 40px; cursor: pointer; border: 0;
  background: none; color: var(--label); display: flex; align-items: center; justify-content: center;
}
.filterzoek button:hover { color: var(--groen); }

.filtergroep { margin-bottom: 20px; }
.filtergroep__titel {
  margin: 0 0 10px; font-size: 13.5px; font-weight: 700; cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
}
.filtergroep__titel::-webkit-details-marker { display: none; }
.filtergroep__titel::after { content: "▾"; font-size: 11px; color: var(--noot); transition: transform 0.18s ease; }
.filtergroep:not([open]) > .filtergroep__titel { margin-bottom: 0; }
.filtergroep:not([open]) > .filtergroep__titel::after { transform: rotate(-90deg); }
.filtergroep__opties { display: grid; gap: 8px; }

/* Het echte vinkje blijft in de HTML (voor toetsenbord en schermlezer) maar
   is onzichtbaar; het vakje ernaast is de getekende versie uit het ontwerp. */
.filteroptie {
  position: relative; cursor: pointer; display: flex; align-items: center; gap: 9px;
  font-size: 14.5px; color: var(--grijs-knop);
}
.filteroptie input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.filteroptie__vak {
  width: 17px; height: 17px; border-radius: 5px; border: 1.5px solid var(--scheiding); background: #fff;
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
}
.filteroptie__vak--rond { border-radius: 999px; }
.filteroptie__label { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.filteroptie__aantal { flex-shrink: 0; font-size: 12.5px; color: var(--noot); }
.filteroptie input:checked ~ .filteroptie__vak { background: var(--groen); border-color: var(--groen); }
.filteroptie input:checked ~ .filteroptie__vak::after { content: "✓"; color: #fff; font-size: 11px; line-height: 1; }
.filteroptie input:checked ~ .filteroptie__label { color: var(--groen); font-weight: 600; }
.filteroptie input:focus-visible ~ .filteroptie__vak { outline: 2px solid var(--groen); outline-offset: 2px; }
.filteroptie:hover .filteroptie__vak { border-color: var(--groen); }
.filteroptie--leeg { cursor: default; opacity: 0.45; }
.filteroptie--leeg:hover .filteroptie__vak { border-color: var(--scheiding); }
.filteroptie--los { margin-bottom: 20px; }

.filterprijs { border-top: 1px solid var(--lijn-rij); padding-top: 16px; }
.filterprijs__titel { margin: 0 0 10px; font-size: 13.5px; font-weight: 700; }
.filterprijs__velden { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.filterprijs__veld { display: grid; gap: 5px; min-width: 0; }
.filterprijs__label { font-size: 12.5px; font-weight: 700; color: var(--label); }
.filterprijs__veld input {
  width: 100%; min-width: 0; border: 1px solid #dde4e1; border-radius: 10px; padding: 10px 12px;
  font: inherit; font-size: 14.5px; background: #fafbfa; color: var(--inkt);
}
.filterkolom__toon {
  margin-top: 18px; width: 100%; cursor: pointer; border: 0; background: var(--accent); color: #fff;
  border-radius: 10px; padding: 13px; font-size: 14.5px; font-weight: 700;
}
.filterkolom__toon:hover { filter: brightness(0.95); }

/* --------------------------------------------------- resultaatbalk */

.resultaatbalk {
  display: flex; justify-content: space-between; align-items: center; gap: 12px 20px;
  flex-wrap: wrap; margin-bottom: 18px;
}
.resultaatbalk__regel { margin: 0; font-size: 15px; font-weight: 600; color: var(--grijs-knop); }
.resultaatbalk__sorteer { display: flex; align-items: center; gap: 6px; font-size: 14.5px; color: var(--label); }
.resultaatbalk__label { font-size: 14.5px; color: var(--label); }
.resultaatbalk__sorteer select {
  min-width: 0; max-width: 100%; border: 1px solid var(--lijn); border-radius: 10px; padding: 7px 10px;
  font: inherit; font-size: 14.5px; color: var(--grijs-knop); background: #fff; cursor: pointer;
}
.resultaatbalk__knop {
  cursor: pointer; border: 1.5px solid var(--groen); background: #fff; color: var(--groen);
  border-radius: 10px; padding: 7px 12px; font-size: 14px; font-weight: 700;
}

/* ---------------------------------------------- gedeelde kaartdelen */

/* De titel is de link; zijn ::after strekt zich over de hele kaart uit. Wat
   daarnaast klikbaar is (de knoppen) ligt er met z-index boven. */
.reisrij, .huiskaart, .koopkaart {
  position: relative; border: 1px solid var(--lijn); border-radius: 18px; overflow: hidden; background: #fff;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease;
}
.reisrij:hover, .huiskaart:hover, .koopkaart:hover { transform: translateY(-5px); box-shadow: 0 22px 44px -26px rgba(12, 40, 40, 0.5); }
.reisrij:hover .zoom, .huiskaart:hover .zoom, .koopkaart:hover .zoom { transform: scale(1.05); }
.strekt { color: var(--inkt); }
.strekt:hover { color: var(--groen); }
.strekt::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.reisrij__knoppen, .huiskaart__partner, .koopkaart__partner { position: relative; z-index: 2; }
.reisrij__beeld, .huiskaart__beeld, .koopkaart__beeld { position: relative; overflow: hidden; background: var(--beeld-leeg); }
.reisrij__beeld .zoom, .huiskaart__beeld .zoom, .koopkaart__beeld .zoom { position: absolute; inset: 0; }
.reisrij__beeld img, .huiskaart__beeld img, .koopkaart__beeld img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
}
@media (prefers-reduced-motion: reduce) {
  .reisrij, .huiskaart, .koopkaart { transition: none; }
  .reisrij:hover, .huiskaart:hover, .koopkaart:hover { transform: none; }
  .reisrij:hover .zoom, .huiskaart:hover .zoom, .koopkaart:hover .zoom { transform: none; }
}

.knop-groen {
  display: inline-block; background: var(--groen); color: #fff; border-radius: 10px;
  padding: 10px 18px; font-size: 14px; font-weight: 700; text-align: center;
}
.knop-groen:hover { color: #fff; background: var(--groen-donker); }
.tagje {
  font-size: 13px; color: var(--grijs-knop); background: var(--vlak); border-radius: 8px;
  padding: 6px 11px; font-weight: 600;
}

/* ------------------------------------------- reizen en cruises: rijen */

.reisrijen { display: grid; gap: 18px; }
.reisrij { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 2fr) minmax(0, 0.7fr); gap: 22px; }
.reisrij__beeld { min-height: 200px; }
.reisrij__badge {
  position: absolute; top: 12px; left: 12px; pointer-events: none; background: rgba(255, 255, 255, 0.95);
  border-radius: 8px; padding: 5px 10px; font-size: 11.5px; font-weight: 700; color: #b8621f;
}
.reisrij__body { padding: 20px 0; min-width: 0; }
.reisrij__plaats { margin: 0 0 6px; font-size: 13px; font-weight: 700; color: var(--accent); }
.reisrij__naam { margin: 0 0 8px; font-size: 20px; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.reisrij__tekst { margin: 0 0 12px; font-size: 14.5px; line-height: 1.6; color: var(--tekst-zacht); text-wrap: pretty; }
.reisrij__tags { display: flex; gap: 8px; flex-wrap: wrap; }
.reisrij__zij {
  padding: 20px 20px 20px 0; display: flex; flex-direction: column; align-items: flex-end;
  justify-content: space-between; gap: 12px; min-width: 0;
}
.reisrij__oordeel { margin: 0; font-size: 13px; font-weight: 700; color: #1d7a4c; text-align: right; }
.reisrij__oordeel-aantal { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 500; color: var(--label); }
.reisrij__schip { font-size: 12.5px; color: var(--noot); text-align: right; overflow-wrap: anywhere; }
.reisrij__slot { text-align: right; }
.reisrij__per { margin: 0 0 2px; font-size: 12.5px; color: var(--label); }
.reisrij__prijs { margin: 0 0 10px; font-size: 24px; font-weight: 800; color: var(--groen); white-space: nowrap; }
.reisrij__knoppen { display: grid; gap: 8px; justify-items: end; }
.reisrij__partner { font-size: 13px; font-weight: 600; color: var(--groen); text-decoration: underline; text-underline-offset: 3px; }

/* ------------------------------------------------ vakantiehuizen: kaarten */

.huiskaarten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.huiskaart { display: flex; flex-direction: column; }
.huiskaart__beeld { height: 190px; }
.huiskaart__score {
  position: absolute; top: 12px; left: 12px; pointer-events: none; background: var(--groen); color: #fff;
  border-radius: 8px; padding: 5px 10px; font-size: 12px; font-weight: 700;
}
.huiskaart__score-aantal { font-weight: 500; opacity: 0.85; }
.huiskaart__body { padding: 16px 18px 18px; display: flex; flex-direction: column; flex: 1 1 auto; }
.huiskaart__plaats { margin: 0 0 4px; font-size: 13px; font-weight: 700; color: var(--accent); }
.huiskaart__naam { margin: 0 0 8px; font-size: 16px; font-weight: 700; line-height: 1.32; overflow-wrap: anywhere; }
.huiskaart__meta { margin: 0 0 12px; font-size: 13.5px; line-height: 1.5; color: var(--label); }
.huiskaart__meta span + span::before { content: " · "; }
.huiskaart__voet { margin-top: auto; display: flex; justify-content: space-between; align-items: baseline; gap: 6px 12px; flex-wrap: wrap; }
.huiskaart__prijs { margin: 0; font-size: 17px; font-weight: 800; color: var(--groen); white-space: nowrap; }
.huiskaart__per { margin: 0; font-size: 13px; font-weight: 600; color: var(--label); }
.huiskaart__partner { font-size: 13px; font-weight: 600; color: var(--groen); text-decoration: underline; text-underline-offset: 3px; }

/* ---------------------------------------------------- te koop: kaarten */

.koopkaarten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.koopkaart__beeld { height: 240px; }
.koopkaart__badge {
  position: absolute; top: 14px; left: 14px; pointer-events: none; background: rgba(255, 255, 255, 0.95);
  border-radius: 8px; padding: 6px 11px; font-size: 12px; font-weight: 700;
}
.koopkaart__body { padding: 18px 20px 20px; }
.koopkaart__naam { margin: 0 0 4px; font-size: 17.5px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.koopkaart__plaats { margin: 0 0 10px; font-size: 14px; color: var(--label); }
.koopkaart__prijs { margin: 0 0 14px; font-size: 22px; font-weight: 800; color: var(--groen); }
.koopkaart__prijs--leeg { font-size: 16px; color: var(--label); }
.koopkaart__per { font-size: 13px; font-weight: 600; color: var(--label); }
.koopkaart__specs { display: flex; gap: 6px 16px; flex-wrap: wrap; border-top: 1px solid var(--lijn-rij); padding-top: 13px; }
.koopkaart__specs span { font-size: 13.5px; color: var(--tekst-zacht); font-weight: 500; }
.koopkaart__partner {
  display: inline-block; margin-top: 14px; font-size: 13.5px; font-weight: 700; color: var(--groen);
  text-decoration: underline; text-underline-offset: 3px;
}

/* ---------------------------------------------------------- bladeren */

.bladeren { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 8px; padding: 34px 0 0; }
.bladeren__nummer, .bladeren__stap {
  display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 42px;
  border: 1.5px solid var(--lijn); border-radius: 10px; padding: 0 10px;
  font-size: 14.5px; font-weight: 700; color: var(--grijs-knop); background: #fff;
}
.bladeren__stap { border-color: var(--groen); color: var(--groen); padding: 0 18px; }
.bladeren a:hover { border-color: var(--groen); color: var(--groen); background: var(--groen-zacht); }
.bladeren__nummer[aria-current="page"] { background: var(--groen); border-color: var(--groen); color: #fff; }
.bladeren__gat { color: var(--noot); padding: 0 2px; }

/* ------------------------------------------------ smalle schermen */

@media (max-width: 1100px) {
  .huiskaarten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .overzichtlijf__raster { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  /* Op een telefoon zit de kolom achter een knop. Open staat hij volledig,
     met exact dezelfde groepen en aantallen als op een breed scherm. */
  .filterknop {
    display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 10px;
    cursor: pointer; border: 1.5px solid var(--groen); background: #fff; color: var(--groen);
    border-radius: 12px; padding: 13px 18px; font-size: 15px; font-weight: 700;
  }
  .filterknop::after { content: "▾"; font-size: 13px; transition: transform 0.18s ease; }
  .filterknop[aria-expanded="true"]::after { transform: rotate(180deg); }
  .filterknop__stip {
    display: inline-block; width: 8px; height: 8px; margin-left: 8px; border-radius: 999px;
    background: var(--accent); vertical-align: middle;
  }
  .filterkolom { display: none; margin-top: 12px; }
  .filterkolom--open { display: block; }
}
@media (max-width: 700px) {
  .koopkaarten { grid-template-columns: minmax(0, 1fr); }
  .reisrij { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .reisrij__beeld { min-height: 0; height: 200px; }
  .reisrij__body { padding: 16px 18px 0; }
  .reisrij__zij { flex-direction: row; align-items: flex-end; padding: 14px 18px 18px; }
  .reisrij__oordeel, .reisrij__schip { text-align: left; }
}
@media (max-width: 560px) {
  .overzichtkop__binnen { padding-top: 22px; padding-bottom: 22px; }
  .overzichtkop__titel { font-size: 30px; }
  .overzichtkop__tekst { font-size: 15.5px; }
  .huiskaarten { grid-template-columns: minmax(0, 1fr); }
  .koopkaart__beeld { height: 210px; }
  .resultaatbalk { flex-direction: column; align-items: flex-start; }
}


/* ================================================== detailpagina's */

/* Ontwerp v6: de aanbod-detailpagina's (reis, vakantiehuis, woning te koop).

   Maten en kleuren uit `isReis`, `isHuis` en `isObject` in
   design/spanje-v6/Spanje.com v6.dc.html. Tijdelijk een eigen bestand zodat
   het naast v6.css kan groeien; het wordt later samengevoegd. Tokens en
   algemene klassen (.sectie, .vak, .kruimelpad, .aanbodkaart) komen uit v6.css. */

/* ------------------------------------------------------------ galerij */

.detailkop { padding-top: 24px; }
.detailkop--reis { padding-top: 22px; }

/* Eén groot beeld links over twee rijen, twee kleinere rechts. Vaste rijen en
   een beeld dat zijn vak vult: in het prototype van de reis schoven de beelden
   en het prijspaneel over elkaar heen, dat nemen we niet over. */
.detailgalerij {
  display: grid; grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr);
  grid-template-rows: 200px 200px; gap: 12px;
}
.detailgalerij--huis { grid-template-rows: 190px 190px; }
.detailgalerij--reis { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); grid-template-rows: 194px 194px; }
.detailgalerij__groot { grid-row: span 2; border-radius: 18px; }
.detailgalerij__klein { border-radius: 18px; }
.detailgalerij--reis .detailgalerij__groot, .detailgalerij--reis .detailgalerij__klein { border-radius: 20px; }
.detailgalerij--enkel { grid-template-columns: minmax(0, 1fr); grid-template-rows: 400px; }
.detailgalerij--enkel .detailgalerij__groot { grid-row: auto; }
.detailgalerij [data-vergroot], .fotoreeks [data-vergroot] { cursor: zoom-in; }
.detailgalerij__alle {
  position: absolute; right: 14px; bottom: 14px; background: rgba(255, 255, 255, 0.95);
  border-radius: 8px; padding: 8px 13px; font-size: 13px; font-weight: 700; color: var(--inkt);
}
.detailgalerij__alle:hover { color: var(--groen); }
.detailgalerij__leeg {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  padding: 20px; text-align: center; font-size: 14px; font-weight: 600; color: var(--label);
}

/* De overige foto's als strook, zodat de hele reeks van de feed te zien is. */
.fotoreeks { display: flex; gap: 12px; padding-bottom: 6px; margin-top: 16px; }
.fotoreeks__vak { flex: 0 0 240px; height: 170px; border-radius: 14px; }

/* ---------------------------------------------------------- hoofddeel */

.detail-sectie { padding-top: 34px; }
.detail-sectie--reis { padding-top: 36px; }
.detailduo {
  display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 48px; align-items: start;
}
.detailduo--reis { grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr); }

.detail-labels { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.detail-label { background: #dff2e6; color: #10684a; border-radius: 8px; padding: 6px 12px; font-size: 12.5px; font-weight: 700; }
.detail-waar { margin: 0 0 8px; font-size: 13.5px; font-weight: 700; color: var(--accent); }
.detail-titel {
  margin: 0 0 8px; font-size: 36px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.12;
  overflow-wrap: anywhere;
}
.detail-titel--object { font-size: 38px; line-height: 1.1; }
.detail-titel--reis { margin-bottom: 14px; font-size: 40px; line-height: 1.08; }
.detail-onder { margin: 0 0 24px; font-size: 16.5px; color: var(--tekst-zacht); text-wrap: pretty; }
.detail-intro { margin-bottom: 24px; font-size: 18px; line-height: 1.75; color: var(--tekst); text-wrap: pretty; }
.detail-intro p { margin: 0 0 14px; }
.detail-intro > :last-child { margin-bottom: 0; }

.detailvakken { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 30px; }
.detailvak { min-width: 0; background: var(--vlak); border-radius: 14px; padding: 16px; }
.detailvak__waarde { margin: 0 0 3px; font-size: 20px; font-weight: 800; color: var(--groen); overflow-wrap: anywhere; }
.detailvak__label { margin: 0; font-size: 13px; font-weight: 600; color: var(--label); }

.detail-h2 { margin: 0 0 12px; font-size: 24px; font-weight: 800; letter-spacing: -0.02em; }
.detail-h2--ruim { margin: 30px 0 16px; }
.detail-h2--reis { margin: 0 0 10px; font-size: 32px; }
.detail-tekst { font-size: 17px; line-height: 1.72; color: var(--tekst-intro); text-wrap: pretty; overflow-wrap: anywhere; }
.detail-tekst p { margin: 0 0 14px; }
.detail-tekst a { font-weight: 700; }

/* Sleutel links, waarde rechts, in twee kolommen. */
.detailrijen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; margin-bottom: 30px; }
.detailrijen--reis { gap: 0 40px; margin: 10px 0 0; }
.detailrij {
  display: flex; justify-content: space-between; gap: 16px; padding: 11px 0;
  border-bottom: 1px solid var(--lijn-rij); font-size: 15px;
}
.detailrijen--reis .detailrij { padding: 13px 0; border-bottom-color: var(--lijn-licht); font-size: 14.5px; }
.detailrij__sleutel { color: var(--label); }
.detailrij__waarde { font-weight: 700; text-align: right; min-width: 0; overflow-wrap: anywhere; }
.detail-noot { margin: 22px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--noot); max-width: 860px; text-wrap: pretty; }

/* 'Wat er aanwezig is': een kaart per groep met vinkjes. */
.voorzieningkaarten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.voorzieningkaart { min-width: 0; border: 1px solid var(--lijn); border-radius: 16px; padding: 20px; }
.voorzieningkaart__titel { margin: 0 0 12px; font-size: 14px; font-weight: 700; }
.vinklijst { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; }
.vinklijst li { display: flex; gap: 9px; align-items: baseline; font-size: 14.5px; color: var(--grijs-knop); overflow-wrap: anywhere; }
.vinklijst__vink { color: #1d7a4c; font-weight: 800; flex-shrink: 0; }
.vinklijst--twee { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px 24px; }

.weetvlak { margin-top: 26px; background: var(--vlak); border-radius: 16px; padding: 22px; }
.weetvlak__titel { margin: 0 0 8px; font-size: 15px; font-weight: 700; }
.weetvlak__tekst { margin: 0; font-size: 15px; line-height: 1.65; color: var(--tekst-zacht); text-wrap: pretty; }

/* ---------------------------------------------------------- zijpaneel */

.detailzij { position: sticky; top: 100px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; min-width: 0; }
.prijskaart {
  min-width: 0; border: 1px solid var(--lijn); border-radius: 18px; padding: 26px;
  box-shadow: 0 18px 40px -32px rgba(12, 40, 40, 0.6);
}
.prijskaart--reis { border-radius: 20px; padding: 24px; box-shadow: none; }
.prijskaart__label { margin: 0 0 2px; font-size: 13px; font-weight: 700; color: var(--label); }
.prijskaart--reis .prijskaart__label { margin-bottom: 4px; font-weight: 400; }
.prijskaart__prijs { margin: 0 0 4px; font-size: 38px; font-weight: 800; color: var(--groen); letter-spacing: -0.02em; overflow-wrap: anywhere; }
.prijskaart--reis .prijskaart__prijs { font-size: 36px; letter-spacing: -0.03em; }
.prijskaart__per { font-size: 17px; font-weight: 600; color: var(--label); letter-spacing: 0; }
.prijskaart__noot { margin: 0 0 18px; font-size: 13.5px; line-height: 1.55; color: var(--label); text-wrap: pretty; }
.prijskaart__noot--donker { color: var(--tekst-zacht); }
.prijskaart__knop {
  display: block; width: 100%; border: 0; background: var(--accent); color: #fff; border-radius: 12px;
  padding: 16px; font-size: 16px; font-weight: 700; text-align: center;
}
.prijskaart--reis .prijskaart__knop { padding: 15px 20px; font-size: 15.5px; }
.prijskaart__knop:hover { color: #fff; filter: brightness(0.95); }
.prijskaart__klein { margin: 12px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--label); text-wrap: pretty; }
.prijskaart--reis .prijskaart__klein { color: var(--noot); }
.prijskaart__aanbieder { margin-top: 20px; border-top: 1px solid var(--lijn-rij); padding-top: 18px; }
.prijskaart__aanbieder-naam { margin: 0 0 2px; font-size: 15.5px; font-weight: 700; }
.prijskaart__aanbieder-rol { margin: 0; font-size: 13.5px; color: var(--label); }

.vluchtkaart { background: var(--vlak); border-radius: 18px; padding: 24px; }
.vluchtkaart__titel { margin: 0 0 10px; font-size: 16px; font-weight: 700; }
.vluchtkaart__tekst { margin: 0 0 14px; font-size: 14.5px; line-height: 1.6; color: var(--tekst-zacht); text-wrap: pretty; }
.vluchtkaart__knop {
  display: block; margin-top: 10px; width: 100%; border: 1.5px solid var(--groen); background: #fff;
  color: var(--groen); border-radius: 10px; padding: 12px; font-size: 14.5px; font-weight: 700; text-align: center;
}
.vluchtkaart__knop:hover { background: var(--groen-zacht); color: var(--groen); }

/* ------------------------------------------------------- foto vergroten */

/* De laag die ontwerp.js opent bij een tik op een foto. Stond in ontwerp.css,
   dat v6 niet meer laadt; zonder deze regels verscheen de foto onderaan de
   pagina in plaats van erover. */
.vergroot {
  position: fixed; inset: 0; z-index: 999; display: flex; align-items: center; justify-content: center;
  padding: 16px; background: rgba(2, 6, 21, 0.92); cursor: zoom-out;
}
.vergroot img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 14px; }
.vergroot__sluit {
  position: absolute; top: 14px; right: 14px; width: 42px; height: 42px; border: 0; border-radius: 999px;
  background: rgba(255, 255, 255, 0.16); color: #fff; font-size: 22px; line-height: 1; cursor: pointer;
}

/* ------------------------------------------------ smalle schermen */

@media (max-width: 900px) {
  .detailduo, .detailduo--reis { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .detailzij { position: static; }
  .detailgalerij, .detailgalerij--huis, .detailgalerij--reis { grid-template-rows: 150px 150px; }
  .detailgalerij--enkel { grid-template-rows: 300px; }
  .voorzieningkaarten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .detailrijen--reis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  /* Op een telefoon het grote beeld boven, de twee kleine ernaast eronder:
     dezelfde drie foto's als op desktop, alleen gestapeld. */
  .detailgalerij, .detailgalerij--huis, .detailgalerij--reis {
    grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: 220px 120px;
  }
  .detailgalerij__groot { grid-row: auto; grid-column: span 2; }
  .detailgalerij--enkel { grid-template-columns: minmax(0, 1fr); grid-template-rows: 240px; }
  .detailgalerij--enkel .detailgalerij__groot { grid-column: auto; }
  .detail-titel, .detail-titel--object { font-size: 29px; }
  .detail-titel--reis { font-size: 31px; }
  .detail-h2--reis { font-size: 27px; }
  .detailvakken { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .detailrijen, .detailrijen--reis, .voorzieningkaarten, .vinklijst--twee { grid-template-columns: minmax(0, 1fr); }
  .prijskaart { padding: 22px; }
  .fotoreeks__vak { flex-basis: 200px; height: 140px; }
}

/* Lucht tussen het laatste blok en de voet, zoals de 80px onderaan `isReis`. */
.detail-slot { height: 80px; }


/* ================================================== gidsen en redactie */

/* Ontwerp v6: gidsen, artikel, over ons en redactie.

   Maten en kleuren komen uit design/spanje-v6/Spanje.com v6.dc.html, artboorden
   `isGidsen`, `isGids` en `isOver`. Tijdelijk een eigen bestand zodat het
   parallel met v6.css gebouwd kon worden; het gaat daarin op. Het gebruikt de
   variabelen en bouwstenen (.sectie, .vak, .raster, .kicker, .boekband) van
   v6.css en herhaalt die niet. */

/* ------------------------------------------------------------ kopband */

.kopband { background: var(--vlak); border-bottom: 1px solid var(--lijn); }
.kopband__binnen { max-width: var(--breed); margin: 0 auto; padding: 40px var(--marge); }
.kopband__titel { margin: 0 0 10px; font-size: 44px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; text-wrap: balance; }
.kopband__tekst { margin: 0; font-size: 17.5px; color: var(--tekst-intro); max-width: 700px; }

/* ------------------------------------------------------ gidsenoverzicht */

.gidsen-uitgelicht { padding-top: 36px; }
.gidslead {
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  border: 1px solid var(--lijn); border-radius: 20px; overflow: hidden; background: #fff; color: var(--inkt);
}
.gidslead:hover { color: var(--inkt); }
.gidslead__beeld { min-height: 380px; }
.gidslead__vlag {
  position: absolute; top: 16px; left: 16px; pointer-events: none; background: var(--accent); color: #fff;
  border-radius: 8px; padding: 6px 12px; font-size: 12px; font-weight: 700;
}
.gidslead__tekst { padding: 38px; }
.gidslead__kicker { margin: 0 0 12px; font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); }
.gidslead__titel { margin: 0 0 14px; font-size: 32px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.12; text-wrap: balance; }
.gidslead__blurb { margin: 0 0 20px; font-size: 16.5px; line-height: 1.68; color: var(--tekst-intro); text-wrap: pretty; }
.gidslead__meta { margin: 0 0 22px; font-size: 14px; color: var(--label); }
.gidslead__knop { display: inline-block; background: var(--groen); color: #fff; border-radius: 12px; padding: 14px 26px; font-size: 15px; font-weight: 700; }

.gidsen-raster { padding-top: 44px; }
.filterbalk {
  display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap;
  border-bottom: 1px solid var(--lijn); padding-bottom: 20px; margin-bottom: 28px;
}
.filterbalk__filters { display: flex; gap: 8px; flex-wrap: wrap; }
.filterpil {
  border: 1.5px solid #dde4e1; background: #fff; color: #28352f; border-radius: 999px;
  padding: 9px 17px; font-size: 13.5px; font-weight: 600; white-space: nowrap;
}
.filterpil:hover { color: var(--groen); border-color: var(--groen); }
.filterpil[aria-current="page"] { background: var(--groen); border-color: var(--groen); color: #fff; }
.filterbalk__aantal { font-size: 14.5px; font-weight: 600; color: var(--grijs-knop); }

.gidsraster { gap: 30px 26px; }
.gidskaart { display: block; border: 1px solid var(--lijn); border-radius: 18px; overflow: hidden; background: #fff; color: var(--inkt); }
.gidskaart:hover { color: var(--inkt); }
.gidskaart__beeld { height: 210px; }
.gidskaart__body { padding: 18px 20px 22px; }
.gidskaart__titel { margin: 0 0 10px; font-size: 18px; font-weight: 700; line-height: 1.32; text-wrap: pretty; }
.gidskaart__blurb { margin: 0 0 12px; font-size: 14.5px; line-height: 1.6; color: var(--tekst-zacht); text-wrap: pretty; }
.gidskaart__datum { margin: 0; font-size: 13px; color: var(--noot); }

.paginaknoppen { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; padding: 36px 0 0; }
.paginaknop {
  min-width: 44px; text-align: center; border: 1.5px solid #dde4e1; background: #fff; color: #28352f;
  border-radius: 10px; padding: 11px 14px; font-size: 14.5px; font-weight: 700;
}
a.paginaknop:hover { color: var(--groen); border-color: var(--groen); }
.paginaknop[aria-current="page"] { background: var(--groen); border-color: var(--groen); color: #fff; }
.paginaknop--leeg { border-color: transparent; min-width: 0; padding-left: 4px; padding-right: 4px; }
.gidsen-redactie { margin: 32px 0 0; text-align: center; }

/* ------------------------------------------------------------- artikel */

.gidskop { max-width: 900px; margin: 0 auto; padding: 40px var(--marge) 0; }
.gidskop .kruimelpad { margin-bottom: 14px; }
.gidskop__kicker { margin-bottom: 12px; }
.gidskop__titel { margin: 0 0 18px; font-size: 46px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.08; text-wrap: balance; overflow-wrap: break-word; }
.gidskop__lood { margin: 0 0 24px; font-size: 20px; line-height: 1.6; color: var(--grijs-knop); text-wrap: pretty; }
.gidskop__auteur { padding: 18px 0; border-top: 1px solid var(--lijn); border-bottom: 1px solid var(--lijn); }

.auteursregel { display: flex; align-items: center; gap: 14px; }
.auteursregel__portret {
  width: 46px; height: 46px; border-radius: 999px; overflow: hidden; flex-shrink: 0; background: var(--beeld-leeg);
  display: flex; align-items: center; justify-content: center;
}
.auteursregel__portret img { width: 100%; height: 100%; object-fit: cover; display: block; }
.auteursregel__initialen { font-size: 15px; font-weight: 800; color: var(--groen); }
.auteursregel__tekst { display: block; min-width: 0; }
.auteursregel__naam { display: block; margin: 0 0 2px; font-size: 15px; font-weight: 700; color: var(--inkt); }
.auteursregel__meta { display: block; font-size: 13.5px; color: var(--label); }

.gidsbeeld { max-width: 1100px; margin: 0 auto; padding: 28px var(--marge) 0; }
.gidsbeeld__vak { height: 480px; border-radius: 20px; }
.gidsbeeld__onderschrift { margin: 12px 0 0; font-size: 13px; color: var(--noot); }

.gidslijf { max-width: 900px; margin: 0 auto; padding: 36px var(--marge) 0; }

.gidsopgave { border: 1px solid var(--lijn); border-radius: 18px; padding: 20px 22px; margin: 0 0 32px; }
.gidsopgave__titel { margin: 0 0 12px; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); }
.gidsopgave__lijst { margin: 0; padding-left: 20px; display: grid; gap: 7px; }
.gidsopgave__lijst li { font-size: 15px; color: var(--label); padding-left: 2px; }
.gidsopgave__lijst a { font-weight: 600; color: var(--groen); }

/* De tekst komt als HTML uit de import. De maten zijn die van de alinea's en
   tussenkoppen in het ontwerp; de rest (lijsten, tabellen, beelden) krijgt
   een rustige standaard die daarbij past. */
.gidstekst { font-size: 18px; line-height: 1.75; color: var(--tekst); text-wrap: pretty; overflow-wrap: break-word; }
.gidstekst p { margin: 0 0 24px; }
.gidstekst h2 { margin: 32px 0 12px; font-size: 28px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; color: var(--inkt); scroll-margin-top: 96px; }
.gidstekst h3 { margin: 26px 0 10px; font-size: 21px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.3; color: var(--inkt); }
.gidstekst h4 { margin: 22px 0 8px; font-size: 18px; font-weight: 700; color: var(--inkt); }
.gidstekst > :first-child { margin-top: 0; }
.gidstekst ul, .gidstekst ol { margin: 0 0 24px; padding-left: 24px; }
.gidstekst li { margin: 0 0 8px; }
.gidstekst a { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.gidstekst strong { font-weight: 700; color: var(--inkt); }
.gidstekst img { max-width: 100%; height: auto; border-radius: 14px; display: block; }
.gidstekst figure { margin: 0 0 24px; }
.gidstekst figcaption { margin: 10px 0 0; font-size: 13px; color: var(--noot); }
.gidstekst blockquote { margin: 0 0 24px; padding: 4px 0 4px 20px; border-left: 3px solid var(--accent); color: var(--grijs-knop); }
.gidstekst table { width: 100%; border-collapse: collapse; margin: 0 0 24px; font-size: 15.5px; display: block; overflow-x: auto; }
.gidstekst th, .gidstekst td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--lijn); vertical-align: top; }
.gidstekst iframe { max-width: 100%; }

.aanbodblok { border: 1px solid var(--lijn); border-radius: 18px; overflow: hidden; margin: 34px 0; background: #fff; }
.aanbodblok__kop {
  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 16px 22px; background: var(--vlak); border-bottom: 1px solid var(--lijn);
}
.aanbodblok--reizen .aanbodblok__kop { background: #fff8f4; }
.aanbodblok__bron { margin: 0 0 3px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--groen); }
.aanbodblok--reizen .aanbodblok__bron { color: var(--accent); }
.aanbodblok__titel { margin: 0; font-size: 18px; font-weight: 800; letter-spacing: -0.01em; }
.aanbodblok__cta { font-size: 14px; font-weight: 700; color: var(--groen); white-space: nowrap; }
.aanbodblok__body { padding: 18px 22px 20px; }
.aanbodblok__items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.aanbodblok__item { display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 13px; align-items: center; color: var(--inkt); }
.aanbodblok__item:hover { color: var(--groen); }
.aanbodblok__beeld { display: block; height: 72px; border-radius: 10px; }
.aanbodblok__info { display: block; min-width: 0; }
.aanbodblok__meta { display: block; margin: 0 0 3px; font-size: 11.5px; font-weight: 700; color: var(--noot); }
.aanbodblok__naam { display: block; margin: 0 0 4px; font-size: 14.5px; font-weight: 700; line-height: 1.3; }
.aanbodblok__prijs { display: block; font-size: 14px; font-weight: 800; color: var(--groen); }
.aanbodblok__voet { margin: 14px 0 0; font-size: 12.5px; color: var(--noot); }

.deelbalk {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 22px 0;
  border-top: 1px solid var(--lijn); border-bottom: 1px solid var(--lijn); margin: 32px 0 40px;
}
.deelbalk__label { font-size: 14.5px; font-weight: 700; }
.deelknop {
  cursor: pointer; border: 1.5px solid #dde4e1; background: #fff; border-radius: 10px; padding: 9px 16px;
  font-size: 13.5px; font-weight: 600; color: var(--grijs-knop);
}
.deelknop:hover { color: var(--groen); border-color: var(--groen); }

/* De doorlinkband volgt direct op de deelbalk, die zijn eigen ondermarge al heeft. */
.gidslijf + .boekband-sectie { margin-top: 0; }
.gidslijf + .boekband-sectie .boekband { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }

.gidsverder__titel { margin: 0 0 22px; font-size: 30px; }
.gidsverder { gap: 26px; }
.gidskaart__beeld--verder { height: 200px; }
.gidskaart__body--verder { padding: 18px 20px 20px; }
.gidskaart__titel--verder { margin: 0; font-size: 17px; }

/* ------------------------------------------------- over ons en redactie */

.overkop {
  padding-top: 48px; padding-bottom: 48px; display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 48px; align-items: center;
}
.overkop--enkel { grid-template-columns: minmax(0, 1fr); }
.overkop .kicker { margin-bottom: 10px; }
.overkop__titel { margin: 0 0 16px; font-size: 46px; line-height: 1.08; }
.overkop__tekst { margin: 0; font-size: 18px; line-height: 1.7; color: var(--tekst-intro); text-wrap: pretty; max-width: 720px; }
.overkop__tekst p { margin: 0 0 12px; }
.overkop__tekst > :last-child { margin-bottom: 0; }
.overkop__figuur, .werkduo__figuur { margin: 0; min-width: 0; }
.overkop__beeld { height: 280px; border-radius: 20px; }

.overcijfers-sectie { padding-top: 44px; }
.overcijfers { gap: 22px; }
.overcijfer { border: 1px solid var(--lijn); border-radius: 16px; padding: 24px; min-width: 0; }
.overcijfer__waarde { margin: 0 0 4px; font-size: 32px; font-weight: 800; color: var(--groen); letter-spacing: -0.02em; overflow-wrap: anywhere; }
.overcijfer__label { margin: 0; font-size: 14px; font-weight: 600; color: var(--label); }

.verhaal { max-width: 900px; }
.verhaal .titel-2 { margin-bottom: 16px; }
.verhaal__tekst { margin-bottom: 0; }

.teamintro { margin: 0 0 28px; font-size: 17px; color: var(--tekst-intro); max-width: 680px; text-wrap: pretty; }
.teamraster { gap: 24px; }
.teamkaart { border: 1px solid var(--lijn); border-radius: 18px; overflow: hidden; background: #fff; }
.teamkaart__foto { height: 240px; display: flex; align-items: center; justify-content: center; }
.teamkaart__foto > img { object-position: center 25%; }
.teamkaart__initialen { font-size: 44px; font-weight: 800; color: var(--groen); }
.teamkaart__body { padding: 18px 20px 20px; }
.teamkaart__naam { margin: 0 0 3px; font-size: 18px; font-weight: 700; }
.teamkaart__rol { margin: 0 0 10px; font-size: 14px; font-weight: 600; color: var(--accent); }
.teamkaart__bio { margin: 0 0 10px; font-size: 14.5px; line-height: 1.6; color: var(--tekst-zacht); text-wrap: pretty; }
.teamkaart__telling { margin: 0 0 10px; font-size: 14px; color: var(--label); }
.teamkaart__link { display: block; font-size: 13.5px; font-weight: 600; color: var(--groen); overflow-wrap: anywhere; }

.werkduo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 52px; align-items: center; }
.werkduo--enkel { grid-template-columns: minmax(0, 1fr); max-width: 900px; }
.werkduo__beeld { height: 420px; border-radius: 20px; }
.werkduo__titel { margin: 0 0 20px; line-height: 1.14; }
.werkpunten { display: grid; gap: 18px; }
.werkpunt { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 16px; align-items: start; }
.werkpunt__nr {
  width: 36px; height: 36px; border-radius: 10px; background: #dff2e6; color: var(--groen);
  display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 800;
}
.werkpunt__titel { margin: 0 0 4px; font-size: 17px; font-weight: 700; }
.werkpunt__tekst { margin: 0; font-size: 15.5px; line-height: 1.65; color: var(--tekst-zacht); text-wrap: pretty; }
.werkduo__link { display: inline-block; margin-top: 22px; white-space: normal; }

.overpartners__titel { margin: 0 0 24px; }
.overpartners { gap: 24px; }
.partnerkaart { border: 1px solid var(--lijn); border-radius: 18px; padding: 28px; min-width: 0; }
.partnerkaart__naam { margin: 0 0 8px; font-size: 20px; font-weight: 800; color: var(--groen); overflow-wrap: anywhere; }
.partnerkaart__voor { margin: 0 0 12px; font-size: 14px; font-weight: 600; color: var(--accent); }
.partnerkaart__tekst { margin: 0; font-size: 15.5px; line-height: 1.65; color: var(--tekst-zacht); text-wrap: pretty; }
.partnerkaart__tekst a { font-weight: 700; }
.overauteur { margin-top: 36px; }

/* ---------------------------------------------------- smalle schermen */

@media (max-width: 900px) {
  .gidslead, .overkop, .werkduo { grid-template-columns: minmax(0, 1fr); }
  .gidslead__beeld { min-height: 280px; }
  .gidsbeeld__vak { height: 380px; }
  .overkop { gap: 28px; }
  .werkduo { gap: 28px; }
  .werkduo__beeld { height: 320px; }
}
@media (max-width: 560px) {
  .kopband__binnen { padding-top: 30px; padding-bottom: 30px; }
  .kopband__titel { font-size: 32px; }
  .gidslead__beeld { min-height: 220px; }
  .gidslead__tekst { padding: 22px 20px 24px; }
  .gidslead__titel { font-size: 25px; }
  .filterbalk { align-items: flex-start; }
  .gidskop { padding-top: 28px; }
  .gidskop__titel, .overkop__titel { font-size: 33px; }
  .gidskop__lood { font-size: 17.5px; }
  .gidsbeeld__vak { height: 240px; border-radius: 16px; }
  .gidstekst { font-size: 17px; }
  .gidstekst h2 { font-size: 24px; }
  .aanbodblok__kop, .aanbodblok__body { padding-left: 16px; padding-right: 16px; }
  .aanbodblok__items { grid-template-columns: minmax(0, 1fr); }
  .aanbodblok__cta { white-space: normal; }
  .overkop { padding-top: 30px; padding-bottom: 30px; }
  .overkop__tekst { font-size: 16.5px; }
  .overkop__beeld { height: 220px; }
  .overcijfer { padding: 18px; }
  .overcijfer__waarde { font-size: 26px; }
  .werkduo__beeld { height: 240px; }
  .partnerkaart { padding: 22px; }
  .gidsverder__titel { font-size: 25px; }
}

/* Een beeld dat niet laadt (een oude externe bron) toont anders zijn alt-tekst
   dwars door het vak heen. Voorlezers houden de alt-tekst gewoon. */
.gidslead__beeld img, .gidskaart__beeld img, .aanbodblok__beeld img { color: transparent; }


/* ================================================== tekstpagina's, zoeken en 404 */

/* Ontwerp v6: de vaste pagina's (feestdagen, zoeken, tekst, contact, 404 en
   de blokkenpagina's uit de oude paginabouwer).

   Tijdelijk een eigen bestand naast v6.css, zodat het ombouwen van deze
   pagina's niet door elkaar loopt met de rest; het wordt later samengevoegd.
   De maten en kleuren komen uit design/spanje-v6/Spanje.com v6.dc.html
   (`isFeestdagen`, `isZoeken`, en de lichte kop van `isReizen`). Waar een
   token uit v6.css bestaat, staat dat token er in plaats van de kleurcode. */

/* ------------------------------------------------------------ paginakop */

.paginakop { background: var(--vlak); border-bottom: 1px solid var(--lijn); }
.paginakop__binnen { max-width: var(--breed); margin: 0 auto; padding: 30px var(--marge); }
.paginakop__kruimel { margin: 0 0 8px; font-size: 13.5px; color: var(--label); }
.paginakop__kruimel a { font-weight: 600; color: var(--label); }
.paginakop__kruimel a:hover { color: var(--groen); }
.paginakop__kicker {
  margin: 0 0 8px; font-size: 13px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--accent);
}
.paginakop__titel { margin: 0 0 8px; font-size: 38px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.12; text-wrap: balance; }
.paginakop__intro { margin: 0; max-width: 760px; font-size: 16.5px; color: var(--tekst-intro); text-wrap: pretty; }
.paginakop > .paginakop__binnen > :last-child { margin-bottom: 0; }

/* `isFeestdagen`: ruimer, grotere kop en een langere intro. */
.paginakop--ruim .paginakop__binnen { padding-top: 44px; padding-bottom: 44px; }
.paginakop--ruim .paginakop__titel { margin-bottom: 12px; font-size: 42px; }
.paginakop--ruim .paginakop__intro { max-width: 820px; font-size: 17.5px; line-height: 1.7; }

/* `isZoeken`: kop met het zoekvak in de band. */
.paginakop--zoek .paginakop__binnen { padding-top: 32px; padding-bottom: 32px; }
.paginakop--zoek .paginakop__titel { margin-bottom: 16px; font-size: 34px; }

/* Ruimte onder de laatste sectie als die zelf geen slotmarge heeft. */
.paginaslot { height: 80px; }
.boekband-sectie.paginaslot { height: auto; margin-bottom: 80px; }

/* ------------------------------------------------------------ leestekst */

/* De tekst van een pagina zoals `.tekstsectie__tekst`, met de h2's die de
   inhoudsopgave als anker gebruikt. */
.leesstuk { max-width: 820px; font-size: 17px; line-height: 1.75; color: var(--tekst); text-wrap: pretty; overflow-wrap: anywhere; }
.leesstuk p { margin: 0 0 14px; }
.leesstuk h2 { margin: 30px 0 10px; font-size: 22px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.25; color: var(--inkt); scroll-margin-top: 96px; }
.leesstuk h3 { margin: 22px 0 8px; font-size: 18px; font-weight: 800; color: var(--inkt); }
.leesstuk > :first-child { margin-top: 0; }
.leesstuk > :last-child { margin-bottom: 0; }
.leesstuk ul, .leesstuk ol { margin: 0 0 14px; padding-left: 22px; }
.leesstuk li { margin-bottom: 6px; }
.leesstuk a { font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.leesstuk table { width: 100%; border-collapse: collapse; font-size: 15px; margin: 0 0 14px; display: block; overflow-x: auto; }
.leesstuk th, .leesstuk td { text-align: left; padding: 10px 12px; border-top: 1px solid var(--lijn-licht); }


/* ------------------------------------------------------------ feestdagen */

.feestdagen { max-width: var(--breed); margin: 0 auto; padding: 36px var(--marge) 80px; }
/* Volgt er nog tekst, dan telt de sectie eronder de ruimte al mee. */
.feestdagen:not(:last-child) { padding-bottom: 0; }
.jaarknoppen { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 22px; }
.jaarknop {
  font-size: 14px; font-weight: 700; border-radius: 999px; padding: 9px 18px;
  background: var(--lijn-licht); color: var(--grijs-knop);
}
.jaarknop:hover { color: var(--groen); }
.jaarknop.is-aan { background: var(--groen); color: #fff; }

.feestdagtabel { border: 1px solid var(--lijn); border-radius: 18px; overflow: hidden; }
.feestdagtabel table { width: 100%; border-collapse: collapse; font-size: 15px; }
.feestdagtabel thead tr { background: var(--vlak); }
.feestdagtabel th {
  text-align: left; padding: 13px 18px; font-size: 12px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--label);
}
.feestdagtabel tbody tr { border-top: 1px solid var(--lijn-licht); }
.feestdagtabel td { padding: 13px 18px; vertical-align: top; }
.feestdagtabel__datum { font-weight: 700; white-space: nowrap; }
.feestdagtabel__waar { color: var(--tekst-intro); }
.feestdag__nl { display: block; margin-top: 2px; font-size: 13.5px; font-weight: 500; color: var(--label); }
.feestdag__waar { font-size: 13.5px; }
.soortpil {
  display: inline-block; font-size: 12px; font-weight: 700; border-radius: 999px; padding: 4px 10px;
  background: var(--groen-zacht); color: var(--groen);
}
.soortpil--regionaal { background: #fdeecd; color: #8a5a12; }

.feestdagkaarten { display: none; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.feestdagkaart { border: 1px solid var(--lijn); border-radius: 14px; padding: 14px 16px; }
.feestdagkaart__datum { margin: 0 0 4px; font-size: 13px; font-weight: 700; color: var(--groen); }
.feestdagkaart__naam { margin: 0 0 8px; font-size: 16px; font-weight: 700; overflow-wrap: anywhere; }
.feestdagkaart__waar { margin: 0; font-size: 13.5px; color: var(--tekst-intro); }

/* Zonder script staan de jaren onder elkaar; dan hoort er lucht tussen. */
.feestdagjaar + .feestdagjaar { margin-top: 22px; }
.feestdagjaar[hidden] + .feestdagjaar, .feestdagjaar + .feestdagjaar[hidden] { margin-top: 0; }

/* -------------------------------------------------------------- zoeken */

.zoekvak {
  display: flex; gap: 12px; flex-wrap: wrap; align-items: center; max-width: 760px;
  background: #fff; border: 1px solid var(--lijn); border-radius: 16px; padding: 14px 16px;
}
.zoekvak--los { margin-bottom: 30px; }
.zoekvak__invoer {
  flex: 1 1 260px; min-width: 0; border: 0; outline: none; background: none; padding: 0;
  font: inherit; font-size: 16px; font-weight: 600; color: var(--inkt);
}
.zoekvak__invoer::placeholder { font-weight: 500; color: var(--noot); }
.zoekvak:focus-within { border-color: var(--groen); }
.zoekvak__knop {
  cursor: pointer; border: 0; background: var(--groen); color: #fff; border-radius: 10px;
  padding: 11px 22px; font: inherit; font-size: 14.5px; font-weight: 700;
}
.zoekvak__knop:hover { background: var(--groen-donker); }
.zoekvak__telling { margin: 14px 0 0; font-size: 14.5px; color: var(--tekst-zacht); }

.zoeksectie { padding-top: 30px; }
.zoekraster { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 36px; align-items: start; }
.zoekfilters { position: sticky; top: 96px; }
.zoekfilters__groep { border-bottom: 1px solid var(--lijn-rij); padding: 0 0 18px; margin-bottom: 18px; }
.zoekfilters__titel {
  margin: 0 0 12px; font-size: 13px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--label);
}
.zoekfilter { display: flex; align-items: center; gap: 10px; padding: 6px 0; color: var(--tekst); }
.zoekfilter__vak {
  width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--scheiding); background: #fff;
  color: #fff; font-size: 12px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.zoekfilter__label { flex: 1; min-width: 0; font-size: 14.5px; font-weight: 500; }
.zoekfilter__aantal { flex-shrink: 0; font-size: 12.5px; color: var(--noot); }
.zoekfilter:hover { color: var(--groen); }
.zoekfilter.is-aan { color: var(--groen); }
.zoekfilter.is-aan .zoekfilter__vak { border-color: var(--groen); background: var(--groen); }
.zoekfilter.is-aan .zoekfilter__label { font-weight: 700; }

.zoekresultaten { display: grid; gap: 14px; min-width: 0; }
.zoekresultaten__leeg { padding: 40px 0; }
.zoekkaart {
  display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 20px;
  border: 1px solid var(--lijn); border-radius: 18px; overflow: hidden; background: #fff; color: var(--inkt);
}
.zoekkaart:hover { color: var(--inkt); }
.zoekkaart__beeld { min-height: 150px; }
.zoekkaart__body { padding: 18px 20px 18px 0; min-width: 0; }
.zoekkaart__soort {
  display: inline-block; margin-bottom: 8px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--groen); background: var(--groen-zacht); border-radius: 999px; padding: 4px 10px;
}
.zoekkaart__titel { margin: 0 0 6px; font-size: 19px; font-weight: 700; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.zoekkaart__tekst { margin: 0 0 12px; font-size: 14.5px; line-height: 1.6; color: var(--tekst-zacht); text-wrap: pretty; }
.zoekkaart__voet {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  border-top: 1px solid var(--lijn-rij); padding-top: 12px;
}
.zoekkaart__meta { font-size: 13px; color: var(--label); min-width: 0; }
.zoekkaart__prijs { flex-shrink: 0; font-size: 17px; font-weight: 800; color: var(--groen); }
.zoekkaart__prijs small { font-size: 12.5px; font-weight: 600; color: var(--label); }

.bladeren--zoek { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding-top: 26px; }
.bladeren--zoek a, .bladeren--zoek span {
  min-width: 40px; padding: 9px 14px; border-radius: 10px; border: 1px solid var(--lijn);
  font-size: 14px; font-weight: 700; text-align: center; color: var(--groen);
}
.bladeren--zoek a:hover { background: var(--groen-zacht); }
.bladeren--zoek span[aria-current] { background: var(--groen); border-color: var(--groen); color: #fff; }

/* --------------------------------------------------------- tekstpagina */

.tekstpagina { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr); gap: 44px; align-items: start; }
.tekstpagina__zij { display: grid; gap: 16px; position: sticky; top: 96px; }
.tekstpagina__zij .inhoudsopgave { position: static; }
.documentenlijst a[aria-current] { color: var(--inkt); font-weight: 800; }
.tekstpagina__stuk { min-width: 0; }
.tekstpagina__meta { margin: 0 0 20px; }
.tekstpagina__vraag {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap;
  max-width: 820px; margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--lijn);
  font-size: 14.5px; color: var(--label);
}

/* ------------------------------------------------------------- contact */

.routekaarten { gap: 18px; }
.routekaart { border: 1px solid var(--lijn); border-radius: 18px; padding: 24px; min-width: 0; }
.routekaart .kicker { font-size: 12px; }
.routekaart__titel { margin: 0 0 8px; font-size: 19px; font-weight: 800; letter-spacing: -0.01em; }
.routekaart__tekst { margin: 0 0 14px; font-size: 15px; line-height: 1.6; color: var(--tekst-zacht); text-wrap: pretty; }
.routekaart__tekst:last-child { margin-bottom: 0; }
.routekaart__mail { margin: 0; font-size: 14.5px; font-weight: 700; overflow-wrap: anywhere; }
.routekaart--donker { background: var(--groen); border-color: var(--groen); }
.routekaart--donker .kicker { color: #f5b544; }
.routekaart--donker .routekaart__titel { color: #fff; }
.routekaart--donker .routekaart__tekst { color: rgba(255, 255, 255, 0.84); }
.routekaart--donker .routekaart__mail a { color: #fff; }

.contactduo { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 44px; align-items: start; }
.contactduo__zij { display: grid; gap: 16px; }
.contactvorm { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 6px; }
.contactvorm__veld { display: grid; gap: 6px; min-width: 0; }
.contactvorm__veld--breed { grid-column: 1 / -1; }
.contactvorm__label { font-size: 13.5px; font-weight: 700; color: var(--inkt); }
.contactvorm input:not([type="checkbox"]):not([type="hidden"]), .contactvorm select, .contactvorm textarea {
  width: 100%; min-width: 0; border: 1px solid var(--lijn); border-radius: 12px; background: #fff;
  padding: 12px 14px; font: inherit; font-size: 15.5px; color: var(--inkt);
}
.contactvorm textarea { min-height: 160px; resize: vertical; }
.contactvorm input:focus, .contactvorm select:focus, .contactvorm textarea:focus { outline: none; border-color: var(--groen); }
.contactvorm__akkoord { grid-column: 1 / -1; display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; line-height: 1.55; color: var(--tekst-zacht); }
.contactvorm__akkoord input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--groen); flex-shrink: 0; }
.contactvorm__fout { font-size: 13.5px; font-weight: 600; color: #b3261e; }
.contactvorm__melding {
  grid-column: 1 / -1; margin: 0 0 16px; padding: 14px 16px; border-radius: 12px;
  background: var(--groen-zacht); color: var(--groen); font-size: 15px; font-weight: 600;
}
.contactvorm__melding--fout { background: #fdecea; color: #b3261e; }
.contactvorm__knop {
  justify-self: start; display: inline-block; cursor: pointer; border: 0; background: var(--groen); color: #fff;
  border-radius: 12px; padding: 14px 26px; font: inherit; font-size: 15px; font-weight: 700; overflow-wrap: anywhere;
}
.contactvorm__knop:hover { background: var(--groen-donker); color: #fff; }
.contactvorm__zelf { margin: 18px 0 0; font-size: 15px; color: var(--tekst-zacht); overflow-wrap: anywhere; }

.contactkaart { background: var(--vlak); border-radius: 18px; padding: 22px 24px; min-width: 0; }
.contactkaart__rij {
  display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 14px; align-items: baseline;
  padding: 10px 0; border-bottom: 1px solid var(--lijn);
}
.contactkaart__rij:last-child { border-bottom: 0; }
.contactkaart__sleutel { font-size: 13px; font-weight: 700; color: var(--label); }
.contactkaart__waarde { font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; }
.contactkaart__blok { padding: 10px 0; border-bottom: 1px solid var(--lijn); }
.contactkaart__blok:last-child { border-bottom: 0; }
.contactkaart__wie { margin: 0 0 4px; font-size: 15.5px; font-weight: 700; }
.contactkaart__wat { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--tekst-zacht); overflow-wrap: anywhere; }

.auteurkaart { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 16px; align-items: start; }
.auteurkaart__portret {
  width: 64px; height: 64px; border-radius: 50%; overflow: hidden; background: var(--groen-zacht); color: var(--groen);
  display: inline-flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 800;
}
.auteurkaart__portret img { width: 100%; height: 100%; object-fit: cover; }
.auteurkaart__rol { margin: 0 0 8px; font-size: 13px; font-weight: 700; color: var(--label); }

.samenwerkvlak {
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 40px; align-items: center;
  background: var(--groen-zacht); border-radius: 22px; padding: 36px;
}
.samenwerkvlak .intro { margin-bottom: 14px; }
.samenwerkvlak__cijfers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.vraagkaart__vraag { margin: 0 0 8px; font-size: 16.5px; font-weight: 700; line-height: 1.35; }

/* ------------------------------------------------------ informatieve gids */

.stapkaarten { gap: 18px; }
.stapkaart { border: 1px solid var(--lijn); border-radius: 18px; padding: 24px; min-width: 0; }
.stapkaart__titel { margin: 0 0 8px; font-size: 19px; font-weight: 800; letter-spacing: -0.01em; }
.stapkaart__tekst { margin: 0; font-size: 15px; line-height: 1.6; color: var(--tekst-zacht); text-wrap: pretty; }

/* ----------------------------------------------------------------- 404 */

.ingangen { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; max-width: 980px; }
.ingang {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  border: 1px solid var(--lijn); border-radius: 16px; padding: 18px 20px; color: var(--inkt);
}
.ingang:hover { border-color: var(--groen); color: var(--inkt); }
.ingang__titel { font-size: 16px; font-weight: 700; min-width: 0; }

/* ----------------------------------------------------- blokkenpagina's */

/* De sjablonen in templates/blokken/ dragen nog klassen van het vorige
   ontwerp. Alleen binnen `.blokkenpagina` krijgen ze hier de v6-maten, zodat
   dit nergens anders op de site iets verschuift. */
.blokkenpagina .sectie > .omhulsel { padding-left: 0; padding-right: 0; }
.blokkenpagina .sectie--kop { padding-top: 44px; }
.blokkenpagina .sectie--vlak { background: var(--vlak); margin-top: 56px; padding: 48px 0; }
.blokkenpagina .kicker--stil { color: var(--label); }
.blokkenpagina .titel-l { margin: 0 0 12px; font-size: 42px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; text-wrap: balance; }
.blokkenpagina .titel-m { margin: 0 0 10px; font-size: 32px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; }
.blokkenpagina .titel-kaart { margin: 0 0 6px; font-size: 18px; font-weight: 800; }
.blokkenpagina .punt__tekst { margin: 0; font-size: 15px; line-height: 1.6; color: var(--tekst-zacht); }
.blokkenpagina .tekst { max-width: 820px; font-size: 17px; line-height: 1.75; color: var(--tekst); text-wrap: pretty; }
.blokkenpagina .tekst p { margin: 0 0 14px; }
.blokkenpagina .tekst > :last-child { margin-bottom: 0; }
.blokkenpagina .tekst h2, .blokkenpagina .tekst h3 { margin: 22px 0 8px; font-size: 20px; font-weight: 800; color: var(--inkt); }
.blokkenpagina .inleider { margin-bottom: 20px; }
.blokkenpagina .knop {
  display: inline-block; background: var(--groen); color: #fff; border-radius: 12px; padding: 13px 22px;
  font-size: 15px; font-weight: 700;
}
.blokkenpagina .knop:hover { background: var(--groen-donker); color: #fff; }
.blokkenpagina .doorlink { display: inline-block; }
.blokkenpagina .duo { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 44px; }
.blokkenpagina .duo > div:only-child { grid-column: 1 / -1; }
.blokkenpagina .merkvlak { margin-top: 20px; background: var(--groen-zacht); border-radius: 16px; padding: 18px 20px; }
.blokkenpagina .band__vak { position: relative; overflow: hidden; border-radius: 18px; background: var(--beeld-leeg); }
.blokkenpagina .beeld { width: 100%; height: 100%; object-fit: cover; display: block; }
.blokkenpagina .band__vak .beeld, .blokkenpagina .kaart__beeld .beeld, .blokkenpagina .hero__beeld .beeld,
.blokkenpagina .aanbodrij__beeld .beeld { position: absolute; inset: 0; }
.blokkenpagina .plaatshouder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 12px; text-align: center; font-size: 13px; color: var(--label); }
.blokkenpagina .kop-rij { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 20px; }
.blokkenpagina .kop-rij__onder { margin: 0; font-size: 16px; color: var(--tekst-intro); }
.blokkenpagina .rooster { display: grid; gap: 20px; }
.blokkenpagina .rooster--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.blokkenpagina .rooster--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.blokkenpagina .streepkaart { border: 1px solid var(--lijn); border-radius: 18px; padding: 20px 22px; min-width: 0; }

/* Kaarten: beeld van vaste hoogte met de naam erover, zoals `.regiotegel`. */
.blokkenpagina .kaart { display: block; color: var(--inkt); min-width: 0; }
.blokkenpagina .kaart__beeld { position: relative; overflow: hidden; height: 220px; border-radius: 18px; background: var(--beeld-leeg); }
.blokkenpagina .kaart--beeldnaam .kaart__beeld::after {
  content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 32, 32, 0) 40%, rgba(8, 32, 32, 0.72));
}
.blokkenpagina .kaart__naam { position: absolute; left: 18px; right: 18px; bottom: 16px; z-index: 1; margin: 0; font-size: 20px; font-weight: 800; color: #fff; }
.blokkenpagina .beeldcredit { position: absolute; top: 8px; right: 10px; z-index: 1; font-size: 10.5px; color: rgba(255, 255, 255, 0.85); }
.blokkenpagina .kaart__vlag { position: absolute; top: 12px; left: 12px; background: #fff; border-radius: 999px; padding: 4px 10px; font-size: 12px; font-weight: 700; }
.blokkenpagina .kaart__naam--titel { margin: 12px 0 6px; font-size: 18px; font-weight: 700; }
.blokkenpagina .kaart__blurb { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--tekst-zacht); }

/* Kopblok met achtergrondbeeld. */
.blokkenpagina .hero { position: relative; height: 420px; overflow: hidden; background: var(--groen); }
.blokkenpagina .hero__beeld { position: absolute; inset: 0; }
.blokkenpagina .hero__waas { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 32, 32, 0.2), rgba(8, 32, 32, 0.76)); }
.blokkenpagina .hero__tekst { position: absolute; left: 0; right: 0; bottom: 34px; max-width: var(--breed); margin: 0 auto; padding: 0 var(--marge); }
.blokkenpagina .hero__kicker { margin: 0 0 10px; font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #f5b544; }
.blokkenpagina .hero__titel { color: #fff; }
.blokkenpagina .hero__onder { max-width: 760px; font-size: 17px; line-height: 1.6; color: rgba(255, 255, 255, 0.9); }
.blokkenpagina .sectie .hero { border-radius: 22px; }

/* Reisaanbod in een blok. */
.blokkenpagina .aanbodraster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.blokkenpagina .aanbodrij {
  position: relative; display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 18px;
  border: 1px solid var(--lijn); border-radius: 18px; overflow: hidden;
}
.blokkenpagina .aanbodrij__beeld { position: relative; min-height: 160px; background: var(--beeld-leeg); }
.blokkenpagina .aanbodrij__body { padding: 16px 18px 16px 0; min-width: 0; }
.blokkenpagina .aanbodrij__meta { display: flex; gap: 10px; flex-wrap: wrap; font-size: 13px; color: var(--label); }
.blokkenpagina .aanbodrij__naam { margin: 4px 0 6px; font-size: 17px; font-weight: 700; }
.blokkenpagina .aanbodrij__naam .strekt { color: var(--inkt); }
.blokkenpagina .aanbodrij__naam .strekt::after { content: ""; position: absolute; inset: 0; }
.blokkenpagina .aanbodrij__tekst { margin: 0 0 8px; font-size: 14px; line-height: 1.55; color: var(--tekst-zacht); }
.blokkenpagina .aanbodrij__chips { display: flex; gap: 6px; flex-wrap: wrap; font-size: 12.5px; color: var(--label); }
.blokkenpagina .aanbodrij__slotbalk { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--lijn-rij); }
.blokkenpagina .aanbodrij__bedrag em { font-style: normal; font-size: 12.5px; color: var(--label); }
.blokkenpagina .aanbodrij__bedrag b { font-size: 17px; font-weight: 800; color: var(--groen); }
.blokkenpagina .aanbodrij__bedrag small { font-size: 12.5px; color: var(--label); }
.blokkenpagina .aanbodrij__ga { font-size: 14px; font-weight: 700; color: var(--groen); }

/* Een tekstpagina zonder eigen tekst toont haar blokken in de leeskolom. */
.blokkenpagina--ingebed .sectie { padding-left: 0; padding-right: 0; padding-top: 0; margin-bottom: 30px; }

/* ------------------------------------------------ smalle schermen */

@media (max-width: 900px) {
  .feestdagtabel { display: none; }
  .feestdagkaarten { display: grid; }
  .zoekraster, .tekstpagina, .contactduo, .samenwerkvlak { grid-template-columns: minmax(0, 1fr); }
  .zoekfilters, .tekstpagina__zij { position: static; }
  .blokkenpagina .duo, .blokkenpagina .aanbodraster { grid-template-columns: minmax(0, 1fr); }
  .blokkenpagina .rooster--3, .blokkenpagina .rooster--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .paginakop__titel, .paginakop--ruim .paginakop__titel { font-size: 30px; }
  .paginakop--zoek .paginakop__titel { font-size: 28px; }
  /* Het zoekvak en de knop blijven op één regel; anders staat de knop los. */
  .zoekvak__invoer { flex-basis: 140px; }
  .zoekkaart { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .zoekkaart__beeld { min-height: 170px; }
  .zoekkaart__body { padding: 16px 18px 18px; }
  .contactvorm { grid-template-columns: minmax(0, 1fr); }
  .samenwerkvlak { padding: 24px; }
  .samenwerkvlak__cijfers { grid-template-columns: minmax(0, 1fr); }
  .contactkaart__rij { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .ingangen { grid-template-columns: minmax(0, 1fr); }
  .blokkenpagina .titel-l { font-size: 32px; }
  .blokkenpagina .titel-m { font-size: 26px; }
  .blokkenpagina .rooster--3, .blokkenpagina .rooster--4 { grid-template-columns: minmax(0, 1fr); }
  .blokkenpagina .aanbodrij { grid-template-columns: minmax(0, 1fr); }
  .blokkenpagina .aanbodrij__body { padding: 0 18px 16px; }
  .blokkenpagina .hero { height: 360px; }
}