/* ============================================================
   DrivOlution — compose.css
   Ronde 7: compositie. De pagina bestond uit steeds hetzelfde
   patroon (tekst links, ding rechts) en rijen gelijke kaarten.
   Hier krijgt elke sectie een eigen blokvorm, met variatie in
   grootte en gewicht. Laadt als laatste.
   ============================================================ */

/* ------------------------------------------------------------
   1. HERO: rechts is één object, niet een foto met een kaart erover
   ------------------------------------------------------------ */
.rd-hero__grid { grid-template-columns: 1fr 1fr; gap: clamp(32px, 4vw, 72px); align-items: center; }
.rd-hero__media {
  background: #fff; border: 1px solid rgba(16,16,48,.07);
  border-radius: var(--radius); overflow: hidden;
  box-shadow: 0 40px 80px -40px rgba(16,16,48,.32);
}
.rd-hero__photo {
  height: 260px; width: 100%; object-fit: cover; display: block;
  border-radius: 0; box-shadow: none;
}
.rd-hero__media .nextdates {
  margin: 0; border: 0; border-radius: 0; box-shadow: none;
  padding: var(--sp-6);
}
.nextdates__head { margin-bottom: var(--sp-1); }
.nd-row { padding-block: var(--sp-4); }

/* Garantieregel als twee gelijke vlakken onder de hero */
.guarantee {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3);
  margin-top: clamp(32px, 4vw, 56px); border-top: 1px solid var(--line); padding-top: var(--sp-5);
}
.guarantee span { align-items: flex-start; }

/* ------------------------------------------------------------
   2. DEADLINE: het cijfer wordt het beeld, tekst ernaast
   ------------------------------------------------------------ */
.dl-card { grid-template-columns: 300px minmax(0,1fr); max-width: 1180px; }
.dl-side {
  order: -1; border-left: 0; border-right: 1px solid #f3e6cf;
  display: flex; flex-direction: column; justify-content: center;
}
.dl-count { display: block; padding-bottom: var(--sp-4); border-bottom: 1px solid #f0e0c4; }
.dl-count__num { display: block; line-height: .9; margin-bottom: var(--sp-2); }
.dl-count__lbl { max-width: none; }
.dl-find { padding-top: var(--sp-4); }
@media (max-width: 980px) {
  .dl-card { grid-template-columns: minmax(0,1fr); }
  .dl-side { order: 0; border-right: 0; }
}

/* ------------------------------------------------------------
   3. HOE HET WERKT: geen gekleurde bollen, maar spookcijfers
   ------------------------------------------------------------ */
.steps--4 { gap: clamp(20px, 2.4vw, 40px); }
.steps--4 .step { border-top: 2px solid var(--ink); padding-top: var(--sp-4); }
.step__num {
  width: auto; height: auto; background: none; border-radius: 0;
  color: #cfcee6; font-size: 40px; font-weight: 700; line-height: 1;
  display: block; margin-bottom: var(--sp-3);
}
.steps--4 .step:first-child { border-top-color: var(--blue); }

/* ------------------------------------------------------------
   4. LOCATIES: vier gelijke tegels plus één brede
   ------------------------------------------------------------ */
.loc-layout { grid-template-columns: .85fr 1.15fr; gap: clamp(28px, 3.4vw, 56px); align-items: center; }
.loc-media img { height: 100%; min-height: 380px; object-fit: cover; }
.loc-list { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.loc-tile--wide { grid-column: 1 / -1; }
.loc-tile { position: relative; }

/* ------------------------------------------------------------
   5. INBEGREPEN: net raster van zes, geen losse pillen
   ------------------------------------------------------------ */
.included__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); }
.included .inc-item {
  justify-content: flex-start; border-radius: var(--radius-sm);
  padding: var(--sp-4) var(--sp-5); background: rgba(255,255,255,.12);
}
@media (max-width: 860px) { .included__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .included__grid { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------
   6. REVIEWS: scorekaart als eerste van vier kolommen
   ------------------------------------------------------------ */
.reviews-layout { display: grid; grid-template-columns: 300px repeat(3, minmax(0,1fr)); gap: var(--sp-4); align-items: stretch; }
.reviews__head {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  gap: var(--sp-3); margin: 0; padding: var(--sp-5);
  background: var(--blue); color: #fff; border-radius: var(--radius-sm);
}
.reviews__score { color: #fff; line-height: 1; }
.reviews__meta { color: rgba(255,255,255,.9); }
.reviews__meta small { color: rgba(255,255,255,.78); }
.reviews__head .gbadge { background: rgba(255,255,255,.14); color: #fff; border: 0; }
.reviews__head .gbadge:hover { background: rgba(255,255,255,.24); }
.reviews__grid { display: contents; }
.review-card { display: flex; flex-direction: column; gap: var(--sp-3); }
.review-card blockquote { flex: 1; margin: 0; }
@media (max-width: 1100px) {
  .reviews-layout { grid-template-columns: 1fr 1fr; }
  .reviews__head { grid-column: 1 / -1; flex-direction: row; align-items: center; }
}
@media (max-width: 700px) {
  .reviews-layout { grid-template-columns: 1fr; }
  .reviews__head { flex-wrap: wrap; }
}

/* ------------------------------------------------------------
   7. ZAKELIJK: beeld krijgt meer gewicht dan de tekst
   ------------------------------------------------------------ */
.inhouse__grid { grid-template-columns: .92fr 1.08fr; gap: clamp(28px, 3.4vw, 56px); align-items: center; }
.inhouse__media img { height: 100%; min-height: 420px; object-fit: cover; border-radius: var(--radius); }

/* ------------------------------------------------------------
   8. CONTACT: twee kaarten van gelijke hoogte
   ------------------------------------------------------------ */
.contact__grid { grid-template-columns: 1fr 1.05fr; align-items: stretch; gap: clamp(24px, 3vw, 48px); }
.contact__grid > div { display: flex; flex-direction: column; }
.contact__card.info-card { margin-top: auto; }
.contact__card.form-card { display: flex; flex-direction: column; justify-content: center; }

/* 2b. Deadlinekaart: kolommen in balans, geen leegte onderaan rechts */
.dl-card { grid-template-columns: 340px minmax(0,1fr); }
.dl-card__main { display: flex; flex-direction: column; justify-content: center; }
.dl-help { display: inline-block; }

/* 4b. Locaties: beeld en tegels exact even hoog */
.loc-layout { align-items: stretch; }
.loc-media { display: flex; }
.loc-media img { width: 100%; height: 100%; min-height: 0; }
.loc-content { display: flex; flex-direction: column; }
.loc-list { margin-top: auto; }

/* 3b. Spookcijfers iets steviger */
.step__num { color: #b6b4dc; }

/* 7b. Zonekop houdt de containerlijn; alleen de tekst wordt begrensd */
.zone__head { text-align: left; }
.zone__head h2 { max-width: 26ch; }
.zone__head p { max-width: 58ch; }

/* 8b. Contact: kop over de volle breedte, kaarten gelijk uitgelijnd */
.contact__grid { grid-template-columns: 1fr 1.05fr; align-items: start; }
.contact__title { grid-column: 1 / -1; margin: 0 0 var(--sp-5); }
.contact__card.info-card { margin-top: 0; }
.contact__grid > div { height: 100%; }
.contact__card { height: 100%; }
@media (max-width: 860px) { .contact__grid { grid-template-columns: 1fr; } .contact__card { height: auto; } }

/* ------------------------------------------------------------
   9. PRIJSVERSCHIL: het blok dat de chauffeur zoekt, als beeld
   ------------------------------------------------------------ */
.pricecut {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--sp-4);
  margin-top: clamp(28px, 3vw, 48px); max-width: 520px;
}
.pricecut__col {
  background: #fff; border: 1px solid rgba(16,16,48,.07); border-radius: var(--radius-sm);
  padding: var(--sp-5); text-align: left;
}
.pricecut__col--to { background: var(--blue); border-color: var(--blue); color: #fff; }
.pricecut__lbl { display: block; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: var(--sp-2); }
.pricecut__col--to .pricecut__lbl { color: rgba(255,255,255,.8); }
.pricecut b { display: block; font-size: var(--fs-2); line-height: 1.05; letter-spacing: -.015em; }
.pricecut__from { color: var(--muted); text-decoration: line-through; text-decoration-thickness: 2px; }
.pricecut__to { color: #fff; }
.pricecut small { display: block; margin-top: var(--sp-2); font-size: var(--fs-xs); color: var(--muted); }
.pricecut__col--to small { color: rgba(255,255,255,.78); }
.pricecut__arrow { color: #c9c8e4; display: flex; }
.pricecut__arrow svg { width: 24px; height: 17px; }
@media (max-width: 560px) {
  .pricecut { grid-template-columns: 1fr; }
  .pricecut__arrow { transform: rotate(90deg); justify-content: center; }
}

/* 9b. Kleine letters onderaan de linkerkolom, kolommen in balans */
.calc__intro { display: flex; flex-direction: column; }
.calc__intro .subsidy__note {
  margin-top: auto; padding-top: var(--sp-5); max-width: 56ch;
  border-top: 1px solid rgba(26,102,77,.16);
}
.subsidy .calc { align-items: stretch; }

/* ============================================================
   10. MOBIEL: alle nieuwe rasters terug naar één kolom
   De regels hierboven staan zonder mediaquery en zouden anders
   de bestaande mobiele varianten overschrijven.
   ============================================================ */
@media (max-width: 1000px) {
  .rd-hero__grid { grid-template-columns: minmax(0,1fr); }
  .loc-layout { grid-template-columns: minmax(0,1fr); }
  .inhouse__grid { grid-template-columns: minmax(0,1fr); }
  .loc-media img { min-height: 260px; }
  .inhouse__media img { min-height: 260px; }
}
@media (max-width: 980px) {
  .dl-card { grid-template-columns: minmax(0,1fr); }
  .dl-side { border-right: 0; border-bottom: 1px solid #f3e6cf; }
}
@media (max-width: 860px) {
  .guarantee { grid-template-columns: minmax(0,1fr); }
  .contact__grid { grid-template-columns: minmax(0,1fr); }
}

/* 10b. Mobiel: foto als slanke kaartkop, datums blijven vlak eronder */
@media (max-width: 760px) {
  .rd-hero__photo { display: block; height: 130px; }
  .rd-hero__media .nextdates { padding: var(--sp-5); }
}

/* ============================================================
   11. FOTOGRAFIE
   Vier plekken erbij, elk met een eigen rol: de hero toont de
   dienst, de beeldband is een hoofdstukovergang, de dagstrip
   laat zien wat je krijgt en de locatiefoto's tonen waar.
   Eén behandeling: dezelfde radius, cover, en captions eronder.
   ============================================================ */

/* 11a. Volle-breedte beeldband tussen twee hoofdstukken */
.imgband { display: block; padding: 0; }
.imgband img {
  display: block; width: 100%; height: clamp(200px, 26vw, 380px);
  object-fit: cover; object-position: center 34%;
}

/* 11b. Fotostrip: drie gelijke kaarten met caption */
.daylook__grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--sp-4); }
.daycard { margin: 0; }
.daycard img {
  display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--radius-sm);
}
.daycard figcaption {
  padding-top: var(--sp-4); font-size: var(--fs-sm); color: var(--muted); line-height: 1.5;
}
.daycard figcaption b { display: block; color: var(--ink); font-size: var(--fs-5); margin-bottom: var(--sp-1); }
@media (max-width: 900px) { .daylook__grid { grid-template-columns: minmax(0,1fr) minmax(0,1fr); } }
@media (max-width: 620px) { .daylook__grid { grid-template-columns: minmax(0,1fr); } }

/* 11c. Locatiefoto's: twee onder elkaar, plaatsnaam eronder */
.loc-media { flex-direction: column; gap: var(--sp-4); }
.locshot { margin: 0; display: flex; flex-direction: column; flex: 1; }
.locshot img {
  display: block; width: 100%; flex: 1; min-height: 0; object-fit: cover;
  border-radius: var(--radius-sm);
}
.locshot figcaption {
  padding-top: var(--sp-3); font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
}
@media (max-width: 1000px) {
  .loc-media { flex-direction: row; }
  .locshot img { aspect-ratio: 4 / 3; min-height: 0; }
}
@media (max-width: 620px) { .loc-media { flex-direction: column; } }

/* 11d. Beeld in het zakelijke blok gelijk behandeld */
.inhouse__media img { border-radius: var(--radius); }

/* 11e. width/height-attributen op img worden presentational hints en
   zetten aspect-ratio buiten spel. Daarom expliciet height auto. */
.daycard img { height: auto; }
.locshot img { height: auto; flex: none; aspect-ratio: 3 / 2; }
.loc-layout { align-items: start; }
.loc-content { justify-content: flex-start; }
.loc-list { margin-top: var(--sp-5); }

/* 11f. Locatieblok: één foto die de tegelkolom volgt in hoogte */
.loc-layout { align-items: stretch; }
.loc-media { flex-direction: column; }
.locshot { flex: 1; }
.loc-media .locshot img { aspect-ratio: auto; height: 100%; min-height: 300px; }
@media (max-width: 1000px) { .loc-media .locshot img { height: auto; aspect-ratio: 3 / 2; min-height: 0; } }
/* caption moet ruimte houden: beeld vult de rest van de kolom */
.loc-media .locshot img { flex: 1 1 auto; height: auto; min-height: 300px; aspect-ratio: auto; }

/* 11g. Mobiel: de dagstrip wordt een swipe-strip in plaats van
   drie foto's onder elkaar (scheelt ruim 900 pixels hoogte) */
@media (max-width: 620px) {
  .daylook__grid {
    display: flex; gap: var(--sp-4); overflow-x: auto; scroll-snap-type: x mandatory;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
    padding-bottom: var(--sp-2);
  }
  .daylook__grid::-webkit-scrollbar { display: none; }
  .daycard { flex: 0 0 82%; scroll-snap-align: start; }
  .daycard img { aspect-ratio: 4 / 3; }
  .imgband img { height: 180px; }
}

/* ============================================================
   12. ÉÉN REKENTOOL
   De planner en de subsidiecalculator deden hetzelfde werk en
   stonden onder elkaar. De situatiekiezer zit nu in de planner,
   de subsidiesectie is uitleg met een prijsvergelijking.
   ============================================================ */

/* 12a. Kostenblok in het plannerpaneel */
.pp-cost { display: block; }
.pp-cost__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); }
.pp-cost__row + .pp-cost__row { margin-top: var(--sp-2); padding-top: var(--sp-2); border-top: 1px solid rgba(16,16,48,.08); }
.pp-cost__row b { font-size: var(--fs-4); color: var(--ink); }
.pp-cost__row.is-net b { color: var(--blue); font-size: var(--fs-3); }

/* 12b. Situatiekiezer */
.pp-sit { display: block; margin: var(--sp-4) 0 0; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.pp-sit select {
  display: block; width: 100%; margin-top: var(--sp-2); padding: 12px 40px 12px 14px;
  font: inherit; font-size: var(--fs-sm); font-weight: 600; letter-spacing: normal; text-transform: none;
  color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 12px;
  appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%236a6a78' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 12px 8px;
}
.pp-sit select:hover { border-color: #cfcdf6; }

/* 12c. Subsidiesectie: uitleg links, prijsvergelijking rechts */
.subsidy .calc { grid-template-columns: minmax(0,1fr) 380px; align-items: start; }
.subsidy .pricecut {
  grid-template-columns: minmax(0,1fr); gap: var(--sp-3); margin-top: 0; max-width: none;
}
.subsidy .pricecut__arrow { transform: rotate(90deg); justify-self: center; }
.subsidy .pricecut b { font-size: var(--fs-1); }
@media (max-width: 1040px) {
  .subsidy .calc { grid-template-columns: minmax(0,1fr); }
  .subsidy .pricecut { grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); max-width: 520px; }
  .subsidy .pricecut__arrow { transform: none; }
}
@media (max-width: 560px) {
  .subsidy .pricecut { grid-template-columns: minmax(0,1fr); }
  .subsidy .pricecut__arrow { transform: rotate(90deg); }
}

/* 12d. Uitleg en prijsvergelijking staan naast elkaar, met de rust
   rechts in plaats van een gat in het midden */
.subsidy .calc { grid-template-columns: minmax(0,600px) 360px; justify-content: start; gap: clamp(32px, 5vw, 80px); }
@media (max-width: 1040px) { .subsidy .calc { grid-template-columns: minmax(0,1fr); } }

/* ============================================================
   13. DEADLINESECTIE: van uitleg naar datumcheck
   De vraag van de chauffeur is niet "wat zegt de wet" maar
   "geldt dit voor mij". Daarom staat de achterkant van het
   rijbewijs als beeld naast een korte tekst.
   ============================================================ */
.deadline .dl-card {
  grid-template-columns: minmax(0,1fr) 420px; max-width: 1240px;
  background: #fff; overflow: visible; box-shadow: none; border: 0;
  gap: clamp(32px, 4vw, 72px); align-items: center;
}
.deadline .dl-card__main { padding: 0; }
.deadline .dl-card__main h2 { max-width: 24ch; margin-bottom: var(--sp-3); }
.deadline .dl-card__main p { max-width: 52ch; margin: 0; }

/* Countdown als rustige chip in plaats van een gekleurd blok */
.dl-chip {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  margin-bottom: var(--sp-4); padding: 7px 14px 7px 12px;
  border-radius: var(--pill); background: var(--amber-bg); color: var(--amber-ink);
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
.dl-chip b { font-weight: 800; }
.dl-chip__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--amber); flex: none; }

/* Drie feiten als hairline-lijst, geen iconen */
.dl-facts { list-style: none; margin: var(--sp-5) 0 0; padding: 0; display: grid; gap: 0; max-width: 52ch; }
.dl-facts li {
  display: grid; grid-template-columns: 110px minmax(0,1fr); gap: var(--sp-4);
  padding: var(--sp-3) 0; border-top: 1px solid var(--line);
  font-size: var(--fs-sm); color: var(--muted);
}
.dl-facts li:last-child { border-bottom: 1px solid var(--line); }
.dl-facts b { color: var(--ink); font-weight: 700; }

/* Rijbewijsbeeld */
.dl-visual { padding: 0; background: none; border: 0; }
.licence { margin: 0; }
.licence__svg {
  display: block; width: 100%; height: auto;
  border-radius: var(--radius-sm);
  box-shadow: 0 30px 60px -34px rgba(16,16,48,.36);
}
.licence figcaption {
  margin-top: var(--sp-4); font-size: var(--fs-sm); color: var(--muted); line-height: 1.5;
}
.licence figcaption b {
  display: block; color: var(--amber-ink); font-size: var(--fs-4);
  letter-spacing: .02em; margin-bottom: var(--sp-1);
}
.dl-visual .dl-help { display: inline-block; margin-top: var(--sp-4); }

@media (max-width: 980px) {
  .deadline .dl-card { grid-template-columns: minmax(0,1fr); gap: var(--sp-6); }
  .dl-visual { order: -1; }
  .dl-facts li { grid-template-columns: 96px minmax(0,1fr); gap: var(--sp-3); }
}

/* 13b. Kolommen dichter bij elkaar en de chip op zijn eigen breedte */
.deadline .dl-card { grid-template-columns: minmax(0,540px) 400px; justify-content: start; }
.deadline .dl-card__main { align-items: flex-start; }
.dl-chip { align-self: flex-start; letter-spacing: .02em; }
.dl-chip b { margin-inline: 2px; }
@media (max-width: 980px) { .deadline .dl-card { grid-template-columns: minmax(0,1fr); } }

/* 13c. Datumcheck: twee keuzelijsten en een antwoordregel */
.datecheck { margin-top: var(--sp-5); }
.datecheck__fields { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.datecheck label {
  display: flex; flex-direction: column; gap: var(--sp-2);
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted);
}
.datecheck select {
  min-width: 168px; padding: 13px 40px 13px 15px;
  font: inherit; font-size: var(--fs-sm); font-weight: 600; letter-spacing: normal; text-transform: none;
  color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 12px;
  appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%236a6a78' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 12px 8px;
}
.datecheck select:hover { border-color: #cfcdf6; }
.datecheck__out {
  margin: var(--sp-4) 0 0; padding: var(--sp-4) var(--sp-5);
  border-radius: var(--radius-sm); background: var(--grey);
  font-size: var(--fs-sm); line-height: 1.55; color: var(--text); max-width: 52ch;
}
.datecheck__out b { display: block; font-size: var(--fs-5); color: var(--ink); margin-bottom: 2px; }
.datecheck__out.is-ok { background: #eafaf3; }
.datecheck__out.is-ok b { color: var(--green-dark); }
.datecheck__out.is-urgent { background: var(--amber-bg); }
.datecheck__out.is-urgent b { color: var(--amber-ink); }
.datecheck__out.is-late { background: #fdeeee; }
.datecheck__out.is-late b { color: #9c2b2b; }
.dl-chip { text-transform: uppercase; }

/* ============================================================
   14. DATUMCHECK ALS VOLLE-BREEDTE BAND
   Foto links tot de schermrand, de check rechts, en het
   rijbewijs als kaart die over de naad heen valt.
   ============================================================ */
.deadline { padding: 0; background: #fff; }
.dl-band {
  display: grid; grid-template-columns: 46% 54%;
  align-items: stretch; min-height: 620px;
}

/* Beeld */
.dl-band__media { position: relative; background: #101018; }
.dl-band__media > img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  object-position: center 30%;
}

/* Rijbewijskaart over de naad */
.licence--float {
  position: absolute; right: -72px; bottom: clamp(40px, 6vw, 88px);
  width: min(420px, 78%); margin: 0;
  background: #fff; border-radius: var(--radius-sm);
  padding: var(--sp-5); box-shadow: 0 40px 80px -34px rgba(16,16,48,.5);
}
.licence--float .licence__svg { box-shadow: none; border-radius: 10px; }
.licence--float figcaption { margin-top: var(--sp-3); }

/* Inhoud rechts */
.dl-band__body {
  display: flex; flex-direction: column; justify-content: center;
  padding-block: clamp(56px, 6vw, 96px);
  padding-left: clamp(124px, 10vw, 168px);
  padding-right: max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter)));
  background: #f7f7fc;
}
.dl-band__body > * { max-width: 50ch; }
.dl-band__body h2 { font-size: var(--fs-1); letter-spacing: -.015em; line-height: 1.1; margin: 0 0 var(--sp-3); max-width: 20ch; }
.dl-band__body h2 .accent { color: var(--blue); }
.dl-band__body p { margin: 0; color: var(--text); }
.dl-band__body .dl-facts { margin-top: var(--sp-5); max-width: 46ch; }
.dl-band__body .dl-actions { margin-top: var(--sp-6); max-width: none; }
.dl-band__body .datecheck__out { max-width: 46ch; background: #fff; }

@media (max-width: 1100px) {
  .dl-band { grid-template-columns: minmax(0,1fr); min-height: 0; }
  .dl-band__media { min-height: 0; height: clamp(240px, 42vw, 360px); }
  .dl-band__media > img { object-position: center 34%; }
  .licence--float {
    position: static; right: auto; bottom: auto; width: auto;
    margin: 0 var(--gutter) calc(-1 * var(--sp-7)); padding: var(--sp-5);
    transform: translateY(calc(-1 * var(--sp-6)));
  }
  .dl-band__body {
    padding: clamp(40px, 8vw, 72px) var(--gutter);
  }
  .dl-band__body > * { max-width: none; }
}
@media (max-width: 620px) {
  .dl-band__media { height: 240px; }
  .licence--float { margin-inline: 18px; }
}

/* ============================================================
   15. HEADER
   Eén rij, drie zones: merk, navigatie, acties. Het telefoon-
   nummer staat naast de knop in plaats van in een topbalk, met
   de bereikbaarheid eronder zodat niemand tevergeefs belt.
   ============================================================ */
.site-header { border-bottom: 1px solid var(--line); }
.site-header .container { min-height: 88px; gap: clamp(14px, 1.8vw, 28px); }
.site-header .nav { flex: 1; justify-content: center; gap: 0; }
.nav__links { gap: clamp(16px, 1.6vw, 24px); }
.nav__links a { font-size: var(--fs-body); }

.hdr-actions { display: flex; align-items: center; gap: clamp(12px, 1.6vw, 22px); flex: none; }

/* Telefoon als tweede actie: leesbaar, maar niet in strijd met de knop */
.hdr-phone { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); }
.hdr-phone__ic {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: rgba(56,56,223,.08); color: var(--blue);
  transition: background-color .18s ease;
}
.hdr-phone__ic svg { width: 16px; height: 16px; }
.hdr-phone__txt { display: block; line-height: 1.15; }
.hdr-phone__txt b { display: block; font-size: var(--fs-sm); font-weight: 700; letter-spacing: .01em; }
.hdr-phone__txt small { display: block; font-size: var(--fs-xs); color: var(--muted); font-weight: 500; }
.hdr-phone:hover .hdr-phone__ic { background: rgba(56,56,223,.16); }
.hdr-phone:hover .hdr-phone__txt b { color: var(--blue); }

/* Taal als compacte schakelaar */
.hdr-lang {
  display: inline-flex; align-items: center; gap: 2px; flex: none;
  padding: 3px; border-radius: var(--pill); background: var(--grey);
}
.hdr-lang a {
  padding: 5px 11px; border-radius: var(--pill);
  font-size: var(--fs-xs); font-weight: 700; color: var(--muted);
}
.hdr-lang a.is-active { background: #fff; color: var(--blue); box-shadow: 0 1px 3px rgba(16,16,48,.12); }

/* Scheiding tussen de zones, subtiel */
.hdr-actions::before {
  content: ""; width: 1px; height: 34px; background: var(--line); flex: none;
  margin-right: clamp(4px, 1vw, 12px);
}

@media (max-width: 1499px) {
  .hdr-phone__txt small { display: none; }
  .header-cta .cta-extra { display: none !important; }
  .site-header .container { min-height: 80px; }
}
@media (max-width: 900px) {
  /* logo, taal, bellen, menu */
  .site-header .container { min-height: 72px; justify-content: space-between; }
  .site-header .nav { flex: none; order: 3; }
  .hdr-actions { order: 2; gap: 10px; }
  .hdr-actions::before { display: none; }
  .hdr-actions .header-cta { display: none; }
  .hdr-phone__txt { display: none; }
  .hdr-phone__ic { width: 42px; height: 42px; background: var(--blue); color: #fff; }
  .hdr-phone__ic svg { width: 18px; height: 18px; }
  .nav-toggle:checked ~ .nav .nav__links { padding: var(--sp-4) var(--gutter) var(--sp-5); gap: var(--sp-2); }
  .nav-toggle:checked ~ .nav .nav__links a { padding: 10px 0; font-size: var(--fs-5); }
}
/* 15b. Navigatie mag niet afbreken */
.nav__links > a, .nav__links .has-dropdown > a { white-space: nowrap; }
.nav__links { flex-wrap: nowrap; }

/* 15c. Mobiele volgorde: merk links, taal en bellen, menu uiterst rechts */
@media (max-width: 900px) {
  .site-header .logo { order: 0; margin-right: auto; }
  .hdr-actions { order: 1; }
  .hamburger { order: 2; }
  .site-header .nav { order: 3; }
  /* bellen staat ook in de vaste balk onderaan, dus hier rustiger */
  .hdr-phone__ic { background: rgba(56,56,223,.08); color: var(--blue); width: 40px; height: 40px; }
}

/* 15d. Menu klapt al bij 1100 in: zes links plus het actiecluster
   passen niet op een tablet, en een geknelde balk is erger dan een menu */
@media (max-width: 1319px) {
  .site-header .container { position: relative; min-height: 76px; justify-content: space-between; }
  .site-header .nav { flex: none; order: 3; }
  .nav__links { display: none; }
  .hamburger {
    display: inline-flex; flex-direction: column; gap: 5px; order: 2;
    background: none; border: 0; padding: 8px; cursor: pointer;
  }
  .hamburger span { width: 26px; height: 3px; background: var(--ink); border-radius: 2px; }
  .nav-toggle:checked ~ .nav .nav__links {
    display: flex; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: flex-start; gap: var(--sp-2);
    background: #fff; padding: var(--sp-4) var(--gutter) var(--sp-5);
    box-shadow: var(--shadow-soft); border-top: 1px solid var(--line);
  }
  .nav-toggle:checked ~ .nav .nav__links a { padding: 10px 0; font-size: var(--fs-5); }
  .site-header .logo { order: 0; margin-right: auto; }
  .hdr-actions { order: 1; gap: var(--sp-3); }
  .hdr-actions::before { display: none; }
  .hdr-phone__txt { display: none; }
  .hdr-phone__ic { width: 40px; height: 40px; }
}
@media (max-width: 1319px) and (min-width: 641px) {
  /* op tablet is er ruimte voor de knop, op mobiel niet */
  .hdr-actions .header-cta { padding: 13px 20px; }
}
@media (max-width: 640px) { .hdr-actions .header-cta { display: none; } }
.header-cta .cta-label { display: block; white-space: nowrap; }
.header-cta .cta-extra { display: inline; }

/* ============================================================
   16. SUBSIDIEBAND
   Spiegelbeeld van de datumcheck: inhoud links, foto rechts,
   met de prijsvergelijking als kaart over de naad.
   ============================================================ */
.subsidy { padding: 0; background: #fff; }
.sub-band { display: grid; grid-template-columns: 54% 46%; align-items: stretch; min-height: 600px; }

.sub-band__body {
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  padding-block: clamp(56px, 6vw, 96px);
  padding-right: clamp(124px, 10vw, 168px);
  padding-left: max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter)));
  background: #eafaf3;
}
.sub-band__body > * { max-width: 48ch; }
.sub-band__body h2 {
  font-size: var(--fs-1); line-height: 1.1; letter-spacing: -.015em;
  margin: 0 0 var(--sp-3); max-width: 22ch;
}
.sub-band__body h2 .accent { color: var(--green-dark); }
.sub-band__body p { margin: 0; color: #2f4f43; }
.sub-band__body .calc__list { margin-top: var(--sp-5); }
.sub-band__body .calc__list li { font-weight: 600; color: #2f4f43; }
.sub-band__body .calc__list li::before { background: rgba(26,102,77,.28); }
.sub-band__body .subsidy__note {
  margin-top: var(--sp-6); padding-top: var(--sp-4); max-width: 52ch;
  border-top: 1px solid rgba(26,102,77,.18); color: #3d6b58;
}
.dl-chip--green { background: rgba(26,102,77,.1); color: var(--green-dark); }
.dl-chip--green .dl-chip__dot { background: var(--green); }

.sub-band__media { position: relative; background: #101018; }
.sub-band__media > img {
  display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 38%;
}

/* Prijsvergelijking als kaart over de naad, gespiegeld ten opzichte van de datumcheck */
.pricecut--float {
  position: absolute; left: -72px; bottom: clamp(40px, 6vw, 88px);
  width: min(400px, 78%); margin: 0; gap: var(--sp-3);
  grid-template-columns: minmax(0,1fr); max-width: none;
  padding: var(--sp-5); background: #fff; border-radius: var(--radius-sm);
  box-shadow: 0 40px 80px -34px rgba(16,16,48,.5);
}
.pricecut--float .pricecut__arrow { transform: rotate(90deg); justify-self: center; }
.pricecut--float b { font-size: var(--fs-2); }

@media (max-width: 1100px) {
  .sub-band { grid-template-columns: minmax(0,1fr); min-height: 0; }
  .sub-band__media { order: -1; height: clamp(240px, 42vw, 360px); margin-bottom: 64px; }
  .sub-band__body { padding: clamp(40px, 8vw, 72px) var(--gutter); }
  .sub-band__body > * { max-width: none; }
  .pricecut--float {
    position: absolute; left: var(--gutter); right: var(--gutter); bottom: -56px; top: auto; width: auto;
    margin: 0; transform: none;
    grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
  }
  .pricecut--float .pricecut__arrow { transform: none; }
}
@media (max-width: 620px) {
  .sub-band__media { margin-bottom: 104px; }
  .pricecut--float { grid-template-columns: minmax(0,1fr); bottom: -96px; margin-inline: 0; }
  .pricecut--float .pricecut__arrow { transform: rotate(90deg); }
}
@media (max-width: 1100px) {
  .sub-band__body { padding-left: var(--gutter); padding-right: var(--gutter); }
}
@media (max-width: 1000px) {
  .dl-band__body { padding-left: var(--gutter); padding-right: var(--gutter); }
}

/* ============================================================
   17. FOTOSLIDER OPLEIDINGSDAG
   Vijf momenten van de dag, met pijlen, toetsenbordbesturing en
   een voortgangslijn. De volgende kaart piept altijd mee, zodat
   zichtbaar is dat er meer is.
   ============================================================ */
.daylook__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--sp-5); margin-bottom: var(--sp-6);
}
.daylook__head .section-lead { margin-bottom: 0; }

.slider-nav { display: flex; gap: var(--sp-2); flex: none; }
.slider-btn {
  width: 48px; height: 48px; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center;
  background: #fff; border: 1px solid var(--line); color: var(--ink);
  transition: background-color .18s ease, border-color .18s ease, transform .18s ease, opacity .18s ease;
}
.slider-btn svg { width: 20px; height: 14px; }
.slider-btn:hover:not(:disabled) { border-color: var(--blue); color: var(--blue); transform: translateY(-1px); }
.slider-btn:disabled { opacity: .35; cursor: default; }

.daylook__viewport {
  overflow-x: auto; scroll-snap-type: x proximity;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
  margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter);
}
.daylook__viewport::-webkit-scrollbar { display: none; }
.daylook__viewport:focus-visible { outline: 3px solid rgba(56,56,223,.4); outline-offset: 4px; border-radius: var(--radius-sm); }

.daylook__track { display: flex; gap: var(--sp-4); }
.daylook .daycard {
  flex: 0 0 clamp(260px, 31%, 420px); scroll-snap-align: start; margin: 0;
  transition: transform .2s ease;
}
.daylook .daycard:hover { transform: translateY(-3px); }
.daylook .daycard img { aspect-ratio: 4 / 3; height: auto; width: 100%; object-fit: cover; border-radius: var(--radius-sm); }
.daycard__n {
  display: inline-block; margin-bottom: var(--sp-2);
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .12em; color: #b6b4dc;
}
.daylook .daycard figcaption b { display: block; }

.slider-progress {
  height: 3px; border-radius: var(--pill); background: var(--line);
  margin-top: var(--sp-6); overflow: hidden;
}
.slider-progress span {
  display: block; height: 100%; width: 30%; border-radius: var(--pill);
  background: var(--blue); transition: width .2s ease;
}

@media (max-width: 900px) {
  .daylook__head { flex-direction: column; align-items: flex-start; }
  .slider-nav { display: none; }
  .daylook .daycard { flex-basis: clamp(240px, 62%, 380px); }
}
@media (max-width: 620px) {
  .daylook .daycard { flex-basis: 82%; }
}

/* ============================================================
   18. TOPBALK MET USP'S
   Slanke strook boven de header: drie bewijspunten links, de
   score en de taalkeuze rechts. De donkere deadlinebalk is
   vervallen, want die urgentie zit nu in de sectie zelf.
   ============================================================ */
.topstrip { background: #f4f4fb; border-bottom: 1px solid var(--line); }
.topstrip > .container {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-5); min-height: 44px;
}
.usps {
  list-style: none; margin: 0; padding: 0;
  display: flex; align-items: center; gap: clamp(16px, 2.4vw, 34px); flex-wrap: nowrap;
}
.usps li {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  font-size: var(--fs-xs); font-weight: 600; color: #4b4b5c;
}
.usps svg { width: 15px; height: 15px; flex: none; color: var(--green-dark); }

.topstrip__right { display: flex; align-items: center; gap: var(--sp-4); flex: none; }
.topstrip__rating {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  font-size: var(--fs-xs); font-weight: 700; color: var(--ink);
}
.topstrip__rating .stars { color: #ffb300; letter-spacing: .5px; font-size: 12px; }
.topstrip__rating:hover { color: var(--blue); }

.topstrip .hdr-lang { background: #fff; border: 1px solid var(--line); padding: 2px; }
.topstrip .hdr-lang a { padding: 4px 10px; }

@media (max-width: 1180px) { .usps li:nth-child(3) { display: none; } }
@media (max-width: 900px) {
  .usps li:nth-child(2) { display: none; }
  .topstrip__rating { display: none; }
}
@media (max-width: 620px) {
  .topstrip > .container { min-height: 40px; gap: var(--sp-3); }
  .usps li { font-size: 11.5px; }
  .usps svg { width: 13px; height: 13px; }
}
@media (max-width: 700px) { .usp-extra { display: none; } }

/* ============================================================
   19. AFSLUITER
   De oude contactsectie was een adreskaart plus een formulier met
   alleen placeholders. Nu drie duidelijke routes: boeken, bellen
   of een vraag stellen, met een formulier dat echte labels heeft.
   ============================================================ */
.closing {
  position: relative; color: #fff;
  padding: clamp(64px, 7vw, 112px) 0;
  background: #14141c center 30%/cover no-repeat;
}
.closing::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(16,16,26,.88) 0%, rgba(16,16,26,.7) 44%, rgba(16,16,26,.38) 100%);
}
.closing > .container { position: relative; z-index: 2; }
.closing__grid {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(480px, 600px);
  gap: clamp(32px, 4vw, 80px); align-items: start;
}

/* Linkerkolom: boeken of bellen */
.closing__eyebrow { color: #fff; }
.closing__eyebrow::before { background: var(--green); }
.closing__body h2 {
  font-size: var(--fs-1); line-height: 1.08; letter-spacing: -.015em;
  color: #fff; margin: 0 0 var(--sp-3); max-width: 18ch;
}
.closing__body > p { margin: 0 0 var(--sp-6); color: rgba(255,255,255,.82); max-width: 42ch; }
.btn--lg { padding: 18px 30px; font-size: var(--fs-5); }

.closing__or { display: flex; align-items: center; gap: var(--sp-4); margin: var(--sp-6) 0 var(--sp-4); max-width: 420px; }
.closing__or span { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.closing__or::after { content: ""; flex: 1; height: 1px; background: rgba(255,255,255,.2); }

.callbox {
  display: flex; align-items: center; gap: var(--sp-4); max-width: 420px;
  padding: var(--sp-4); border-radius: var(--radius-sm);
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16);
  color: #fff; transition: background-color .18s ease, border-color .18s ease, transform .18s ease;
}
.callbox:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.3); transform: translateY(-1px); }
.callbox img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; object-position: top center; flex: none; }
.callbox__txt { flex: 1; }
.callbox__txt b { display: block; font-size: var(--fs-4); letter-spacing: .01em; }
.callbox__txt small { display: block; font-size: var(--fs-xs); color: rgba(255,255,255,.72); }
.callbox__ic { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--green); color: #08281d; flex: none; }
.callbox__ic svg { width: 17px; height: 17px; }

/* Formulier */
.cform {
  background: #fff; border-radius: var(--radius); padding: clamp(26px, 2.6vw, 36px);
  box-shadow: 0 40px 80px -40px rgba(0,0,0,.55); color: var(--text);
}
.cform h3 { font-size: var(--fs-4); color: var(--ink); margin: 0 0 var(--sp-2); }
.cform__lead { margin: 0 0 var(--sp-5); font-size: var(--fs-sm); color: var(--muted); }
.cform__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }

.field2 {
  display: block; margin-bottom: var(--sp-4);
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--muted);
}
.field2 .opt { font-weight: 500; text-transform: none; letter-spacing: normal; opacity: .8; }
.field2 input, .field2 textarea {
  display: block; width: 100%; margin-top: var(--sp-2);
  padding: 14px 16px; font: inherit; font-size: var(--fs-sm); font-weight: 500;
  letter-spacing: normal; text-transform: none; color: var(--ink);
  background: #fbfbfe; border: 1px solid var(--line); border-radius: 14px;
  transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease;
}
.field2 textarea { border-radius: var(--radius-sm); resize: vertical; min-height: 108px; }
.field2 input::placeholder, .field2 textarea::placeholder { color: #a3a3b2; font-weight: 400; }
.field2 input:hover, .field2 textarea:hover { border-color: #cfcdf6; }
.field2 input:focus, .field2 textarea:focus {
  outline: 0; background: #fff; border-color: var(--blue);
  box-shadow: 0 0 0 4px rgba(56,56,223,.12);
}

.cform__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4); margin-top: var(--sp-2); }
.cform__note { font-size: var(--fs-xs); color: var(--muted); max-width: 22ch; line-height: 1.4; }

@media (max-width: 1100px) {
  .closing__grid { grid-template-columns: minmax(0,1fr); }
  .closing__body h2 { max-width: none; }
  .cform { max-width: 620px; }
}
@media (max-width: 560px) {
  .cform__row { grid-template-columns: minmax(0,1fr); gap: 0; }
  .cform__foot .btn { width: 100%; justify-content: center; }
  .cform__note { max-width: none; }
  .callbox { padding: var(--sp-3); gap: var(--sp-3); }
  .callbox img { width: 44px; height: 44px; }
}

/* ============================================================
   20. INBEGREPEN
   Was een zwaar blauw vlak met zes gelijke labels. Nu een rustige
   band met vier punten die elk uitleggen wat je niet zelf hoeft
   te regelen, met een eigen icoon per punt.
   ============================================================ */
.included { background: #fafafb; }
.included > .container { padding-inline: var(--gutter); }
.incl-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0,1fr));
  gap: var(--sp-4); margin-top: var(--sp-6);
}
.incl-item {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: var(--sp-5); transition: border-color .18s ease, transform .18s ease;
}
.incl-item:hover { border-color: #cfcdf6; transform: translateY(-2px); }
.incl-ic {
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px;
  background: rgba(56,56,223,.08); color: var(--blue); margin-bottom: var(--sp-4);
}
.incl-ic svg { width: 21px; height: 21px; }
.incl-item h3 { font-size: var(--fs-5); color: var(--ink); margin: 0 0 var(--sp-2); }
.incl-item p { margin: 0; font-size: var(--fs-sm); color: var(--muted); line-height: 1.5; }

@media (max-width: 1000px) { .incl-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px) { .incl-grid { grid-template-columns: minmax(0,1fr); gap: var(--sp-3); } }
/* 20b. Volle band in plaats van de oude blauwe kaart */
.zone--praktisch .included {
  background: #fafafb; color: var(--text); border-radius: 0; overflow: visible;
  max-width: none; margin: 0; padding-block: clamp(48px, 5vw, 80px);
}
.included h2 { color: var(--ink); }
.included .section-lead { color: var(--muted); }

/* 19b. Formulier breder en luchtiger */
.cform { padding: clamp(28px, 3vw, 44px); }
.cform h3 { font-size: var(--fs-3); }
.cform__lead { margin-bottom: var(--sp-6); }
.cform__row { gap: var(--sp-4); }
.field2 { margin-bottom: var(--sp-5); }
.field2 input, .field2 textarea { padding: 15px 18px; font-size: var(--fs-body); }
.field2 textarea { min-height: 124px; }
.field2__hint {
  display: block; margin-top: var(--sp-2); font-size: var(--fs-xs);
  font-weight: 500; letter-spacing: normal; text-transform: none; color: var(--muted);
}
.cform__foot { margin-top: var(--sp-1); gap: var(--sp-5); }
.cform__foot .btn { padding: 16px 26px; }
.cform__note { max-width: 26ch; }
@media (max-width: 1100px) { .cform { max-width: 680px; } }
/* 19c. Linkerkolom van de afsluiter meeschalen met het bredere formulier */
.closing__body h2 { max-width: 22ch; font-size: clamp(30px, 3.2vw, 46px); }
.closing__body > p { max-width: 46ch; }
.closing__or, .callbox { max-width: 460px; }

/* ============================================================
   21. LOCATIES
   De kaart van Vlaanderen die al in de assets stond, met per
   locatie de eerstvolgende vrije dag ernaast. De bezoeker wil
   niet alleen weten waar, maar vooral wanneer daar.
   ============================================================ */
.loc-picker { background: #fff; }
.loc-layout {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.05fr);
  gap: clamp(28px, 4vw, 64px); align-items: center; margin-top: var(--sp-6);
}

.loc-map { margin: 0; }
.loc-map img {
  display: block; width: 100%; height: auto;
  border-radius: var(--radius); background: #f7f7fc;
}
.loc-map figcaption {
  margin-top: var(--sp-4); font-size: var(--fs-xs); color: var(--muted);
  text-align: center;
}

.loc-list { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.loccard {
  position: relative; display: block; padding: var(--sp-5) var(--sp-5) var(--sp-4);
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm);
  color: var(--text); transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.loccard:hover { border-color: var(--blue); transform: translateY(-2px); box-shadow: 0 16px 32px -22px rgba(16,16,48,.4); }
.loccard__top { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: 2px; }
.loccard__city { font-size: var(--fs-4); font-weight: 700; color: var(--ink); }
.loccard__badge {
  padding: 3px 9px; border-radius: var(--pill); background: rgba(51,204,153,.16);
  color: var(--green-dark); font-size: 11.5px; font-weight: 700;
}
.loccard__sub { display: block; font-size: var(--fs-sm); color: var(--muted); }
.loccard__date {
  display: block; margin-top: var(--sp-4); padding-top: var(--sp-3);
  border-top: 1px solid var(--line); font-size: var(--fs-xs); color: var(--muted);
}
.loccard__date b { display: block; margin-top: 2px; font-size: var(--fs-5); color: var(--blue); }
.loccard__go {
  position: absolute; top: var(--sp-5); right: var(--sp-5);
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: var(--grey); color: var(--ink); transition: background-color .18s ease, color .18s ease;
}
.loccard__go svg { width: 15px; height: 11px; }
.loccard:hover .loccard__go { background: var(--blue); color: #fff; }

.loccard--inhouse {
  grid-column: 1 / -1; background: #f6f5ff; border-color: #e2e0f7;
}
.loccard--inhouse .loccard__sub { max-width: 44ch; }
.loccard--inhouse .loccard__city { color: var(--purple-dark); }

@media (max-width: 1000px) {
  .loc-layout { grid-template-columns: minmax(0,1fr); }
  .loc-map { max-width: 520px; margin-inline: auto; }
}
@media (max-width: 560px) {
  .loc-list { grid-template-columns: minmax(0,1fr); }
  .loccard { padding: var(--sp-4); }
  .loccard__go { top: var(--sp-4); right: var(--sp-4); }
}
/* Bewijsregel in het zakelijke blok */
.inhouse__proof {
  margin: var(--sp-5) 0 var(--sp-5); padding-left: var(--sp-4);
  border-left: 3px solid var(--purple); font-size: var(--fs-sm); color: var(--text);
}
.inhouse__proof b { color: var(--ink); }

/* 21b. Eigen kaart in SVG: eigen typografie, merkkleuren, en
   Antwerpen en Brussel als oriëntatiepunten */
.locmap { display: block; width: 100%; height: auto; border-radius: var(--radius); }
.locmap__link { fill: none; stroke: #cfcdf0; stroke-width: 2; stroke-dasharray: 5 7; stroke-linecap: round; }
.locmap__city {
  font-family: inherit; font-size: 12.5px; font-weight: 600; fill: #9a99b4;
  letter-spacing: .04em; text-anchor: middle;
}
.locmap__pin circle:first-child { fill: rgba(56,56,223,.12); }
.locmap__pin circle:last-of-type { fill: var(--blue); }
.locmap__pin text {
  font-family: inherit; font-size: 16px; font-weight: 700; fill: var(--ink); text-anchor: middle;
}
.locmap__pin.is-hot circle:first-child { fill: rgba(51,204,153,.2); }
.locmap__pin.is-hot circle:last-of-type { fill: var(--green-dark); }
.loc-map figcaption { margin-top: var(--sp-4); }
.locmap__ring { fill: #fff; }
.locmap__pin circle:last-of-type { fill: var(--blue); }
.locmap__pin.is-hot circle:last-of-type { fill: var(--green-dark); }

/* 22. Plannerraster: kop links boven, modules eronder, paneel rechts
   over beide rijen. Zo staat de kop altijd eerst, ook op mobiel. */
@media (min-width: 1101px) {
  .planner__grid {
    grid-template-columns: minmax(0,1fr) 372px;
    grid-template-areas: "head panel" "mods panel";
    align-items: start;
  }
  .planner__grid > .planner__head { grid-area: head; }
  .planner__grid > .planner__modules { grid-area: mods; }
  .planner__grid > .planner__panel { grid-area: panel; }
}