/* ═══════════════════════════════════════════════
   CHALETDROOM — DESIGN SYSTEM
   Premium chalet showroom
   ═══════════════════════════════════════════════ */

/* ─── TOKENS ─────────────────────────────────── */
:root {
  --slate:     #1c2e4a;
  --slate-2:   #27405f;
  --slate-3:   #081120;
  --warm:      #dbcaa4;
  --warm-2:    #ecdfc2;
  --warm-pale: #17243a;

  /* Hoogte van de vaste #header: logo 150px + 2x8px padding + 1px rand.
     #header staat position:fixed en duwt dus niets opzij; alles wat bovenaan
     een pagina begint moet hier zelf onderuit blijven. Verandert .logo-img,
     dan verandert dit mee. */
  --kop-hoogte: 167px;
  --paper:     #0b1524;
  --bone:      #0f1c2e;
  --ash:       #22304a;
  --smoke:     #33455f;
  --obs:       #111111;
  --fog:       #8fa4bb;
  --fog-zacht: #7189a6;   /* placeholders: zachter dan --fog, nog wel leesbaar */
  --ink:       #e9eff6;
  --ink-mid:   #c3d2e2;
  --ink-light: #8fa4bb;
  --white:     #ffffff;
  /* Kaart- en formuliervlak: iets lichter dan de pagina, zodat kaarten opkomen. */
  --vlak:      #132033;
  /* Metallic afwerking. Een vlak krijgt een licht verloop van boven naar onder
     plus een haarfijne lichte bovenrand; samen lezen die als geborsteld metaal
     in plaats van een effen kleur. Alleen op grote vlakken (kaarten, formulier,
     balken) plus de knop in de huurkaart. Chips en invulvelden blijven effen,
     anders wordt het druk. */
  --vlak-glans: linear-gradient(180deg,#18273d 0%,#132033 100%);
  --rand:       rgba(255,255,255,.07);
  --rand-top:   rgba(255,255,255,.13);

  --r-sm:  8px;
  --r-md:  14px;
  --r-lg:  20px;
  --r-xl:  28px;
  --r-pill: 100px;

  /* Getinte schaduwen (slate-hue i.p.v. puur zwart) — laagsgewijs voor diepte */
  --sh-sm: 0 1px 2px rgba(0,0,0,.26), 0 2px 6px rgba(0,0,0,.20);
  --sh-md: 0 2px 6px rgba(0,0,0,.26), 0 8px 24px rgba(0,0,0,.30);
  --sh-lg: 0 4px 12px rgba(0,0,0,.28), 0 18px 48px rgba(0,0,0,.38);
  --sh-xl: 0 8px 22px rgba(0,0,0,.32), 0 34px 70px rgba(0,0,0,.44);
  --sh-warm: 0 6px 16px rgba(219,202,164,.13), 0 18px 44px rgba(219,202,164,.11);

  --ease: cubic-bezier(.25,.46,.45,.94);
  --ease-out: cubic-bezier(0.23,1,0.32,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);

  /* Subtiele grain-overlay als data-URI (breekt digitale vlakheid) */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");

  --max-w: 1280px;
}

/* ─── RESET ──────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Inter',sans-serif;
  font-size:15px;
  font-weight:300;
  line-height:1.65;
  color:var(--ink);
  background:var(--paper);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font-family:inherit;font-size:inherit}
h1,h2,h3,h4{font-family:'DM Sans',sans-serif;font-weight:300;line-height:1.1;letter-spacing:-.025em;color:var(--ink);text-wrap:balance}
p{text-wrap:pretty}
/* Consistente cijferweergave (uitgelijnde tabelcijfers) */
.hero-stat-num,.trust-num,.chalet-price,.spec,.spec-value,.spec-row span:last-child{font-variant-numeric:tabular-nums}
/* Zichtbare focus voor toetsenbordnavigatie (a11y) */
:focus-visible{outline:2px solid var(--warm);outline-offset:2px;border-radius:2px}
a:focus-visible,button:focus-visible{outline-offset:3px}

/* ─── CONTAINER ──────────────────────────────── */
.container{max-width:var(--max-w);margin:0 auto;padding:0 48px}

/* ─── TYPOGRAPHY ─────────────────────────────── */
.tag{
  display:inline-flex;align-items:center;gap:8px;
  font-size:11px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  color:var(--warm);margin-bottom:12px;
}
.tag::before{content:'';width:16px;height:1px;background:var(--warm);display:block}

/* ─── BUTTONS ────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 26px;border-radius:var(--r-pill);
  font-family:'DM Sans',sans-serif;font-size:14px;font-weight:500;letter-spacing:.01em;
  transition:background .2s,border-color .2s,transform .2s,box-shadow .2s;
  cursor:pointer;border:1.5px solid transparent;white-space:nowrap;
  -webkit-tap-highlight-color:transparent;
}
.btn:active{transform:translateY(1px) scale(.985)}
.btn-primary{background:var(--warm);color:var(--slate-3);border-color:var(--warm)}
.btn-primary:hover{background:var(--warm-2);transform:translateY(-1px);box-shadow:0 8px 24px rgba(0,0,0,.35)}
.btn-outline{background:transparent;color:var(--white);border-color:rgba(255,255,255,.4)}
.btn-outline:hover{border-color:rgba(255,255,255,.85);background:rgba(255,255,255,.08)}
.btn-outline-dark{background:transparent;color:var(--ink);border-color:var(--ash)}
.btn-outline-dark:hover{border-color:var(--smoke);background:var(--bone)}
.btn-warm{background:var(--warm);color:var(--slate-3);border-color:var(--warm)}
.btn-warm:hover{background:var(--warm-2)}
.btn-sm{padding:8px 16px;font-size:12.5px}
.btn-lg{padding:16px 32px;font-size:15px}

/* ─── ANIMATIONS ─────────────────────────────── */
.fade-up{opacity:0;transform:translateY(18px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.fade-up.visible{opacity:1;transform:none}
.fade-up.delay-1{transition-delay:.1s}
.fade-up.delay-2{transition-delay:.2s}
.fade-up.delay-3{transition-delay:.3s}

/* ─── HEADER ─────────────────────────────────── */
#header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  padding:8px 32px;
  transition:padding .3s var(--ease),background .3s,border-color .3s,box-shadow .3s;
}
#header.scrolled{
  padding:8px 32px;
  background:linear-gradient(180deg,rgba(20,34,56,.94),rgba(11,21,36,.94));
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--ash);
  box-shadow:var(--sh-sm);
}
#header.header-light{
  background:linear-gradient(180deg,rgba(20,34,56,.94),rgba(11,21,36,.94));
  backdrop-filter:blur(20px);
  border-bottom:1px solid var(--ash);
  padding:8px 32px;
}
.header-inner{
  position:relative;
  width:100%;
  display:flex;align-items:center;gap:32px;
}
.header-inner .nav-pill{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin:0}
.header-inner .header-cta{margin-left:auto;flex-shrink:0}
.logo-placeholder{
  font-family:'DM Sans',sans-serif;font-size:22px;font-weight:600;
  letter-spacing:-.02em;color:var(--white);
  transition:color .3s;
}
#header.scrolled .logo-placeholder,
#header.header-light .logo-placeholder{color:var(--ink)}
/* Altijd het gouden logo, ook boven de foto op de voorpagina (was daar wit gefilterd). */
.logo-img{
  height:150px;width:auto;display:block;
  transition:filter .3s;
}
/* Boven de foto op de voorpagina een zachter goud: minder verzadigd en iets lichter,
   halverwege het logogoud en het champagne van de hero-titel (#e8d9b8).
   Op een lichte menubalk (andere pagina's, of na scrollen) blijft het gewone goud.
   Dit geldt alleen nog als de browser geen mask-image kan (zie hieronder). */
#header:not(.header-light):not(.scrolled) .logo-img{filter:saturate(.55) brightness(1.18)}
.logo{flex-shrink:0;margin-right:auto}

/* ─── Metallic goud over het logo ────────────────
   Het logobestand is een PNG in één vlakke kleur (#ca9832). Om er hetzelfde
   metallic goud in te krijgen als op de referentie, gebruiken we het PNG als
   masker op de link eromheen en schilderen daar een verloop doorheen: donker
   brons, een lichte champagneband, weer brons. Het beeld zelf blijft ongemoeid,
   dus de vorm van het logo verandert niet.

   Waarom in een @supports: kan de browser geen mask-image, dan blijft alles
   precies zoals het was — vlak goud met het filter hierboven. Zonder die
   vangnetregel zou het logo daar verdwijnen en een gouden blok achterlaten. */
:root{
  --logo-goud: linear-gradient(177deg,
    #a67c32 0%, #d9b264 17%, #f2e3b4 31%, #d2a24f 43%,
    #b8843a 57%, #e8d197 73%, #c08f3e 87%, #8f6b2c 100%);
}
@supports (mask-image: linear-gradient(#000,#000)) or (-webkit-mask-image: linear-gradient(#000,#000)) {
  .logo,
  .footer-logo-link{
    background:var(--logo-goud);
    -webkit-mask-image:url('../images/logo-chaletdroom.png');
    mask-image:url('../images/logo-chaletdroom.png');
    -webkit-mask-repeat:no-repeat;   mask-repeat:no-repeat;
    -webkit-mask-position:center;    mask-position:center;
    -webkit-mask-size:contain;       mask-size:contain;
  }
  /* De afbeelding houdt de maten van de link overeind, maar wordt zelf niet
     meer getekend; wat je ziet is het verloop door het masker. */
  .logo-img,
  .footer-logo-img{visibility:hidden}
}
.nav-pill{
  display:flex;align-items:center;gap:2px;
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.18);
  border-radius:var(--r-pill);padding:5px 6px;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  transition:background .3s,border-color .3s;
}
#header.scrolled .nav-pill,
#header.header-light .nav-pill{background:var(--bone);border-color:var(--ash)}
.nav-pill a{
  font-size:13px;font-weight:400;
  color:rgba(255,255,255,.8);
  padding:8px 16px;border-radius:var(--r-pill);
  transition:color .2s,background .2s;
}
.nav-pill a:hover{color:var(--white);background:rgba(255,255,255,.14)}
#header.scrolled .nav-pill a,
#header.header-light .nav-pill a{color:var(--ink-mid)}
#header.scrolled .nav-pill a:hover,
#header.header-light .nav-pill a:hover{color:var(--ink);background:var(--bone)}

.nav-tile.active-page{font-weight:600}
#header .nav-pill a.active-page{color:var(--warm)}
#header.scrolled .nav-pill a.active-page,
#header.header-light .nav-pill a.active-page{color:var(--warm-2)}
.header-cta{display:inline-flex}
.mobile-menu-btn{
  display:none;flex-direction:column;gap:5px;
  background:none;border:none;cursor:pointer;padding:4px;
  color:var(--white);
}
#header.scrolled .mobile-menu-btn,
#header.header-light .mobile-menu-btn{color:var(--ink)}
.mobile-menu-btn span{display:block;width:22px;height:1.5px;background:currentColor;transition:transform .3s,opacity .3s}
.mobile-nav{
  display:none;position:fixed;inset:0;z-index:99;
  background:rgba(8,17,32,.97);
  flex-direction:column;align-items:center;justify-content:center;gap:20px;
  padding:40px;
}
.mobile-nav a:not(.btn){font-family:'DM Sans',sans-serif;font-size:26px;font-weight:300;color:rgba(255,255,255,.85);letter-spacing:-.02em}
.mobile-nav-close{background:none;border:1px solid rgba(255,255,255,.2);color:rgba(255,255,255,.5);padding:8px 20px;border-radius:var(--r-pill);font-size:13px;cursor:pointer;position:absolute;top:24px;right:24px}

/* ─── HERO ───────────────────────────────────── */
#hero{
  position:relative;height:100vh;min-height:700px;min-height:100dvh;
  display:flex;align-items:center;overflow:hidden;
}
.hero-bg{position:absolute;inset:0;background:var(--slate-3)}
.hero-img-placeholder{
  width:100%;height:100%;
  background:url('../images/hero.webp') center center / cover no-repeat;
}
.hero-overlay{
  position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(to bottom,rgba(14,19,36,.2) 0%,rgba(14,19,36,.05) 25%,rgba(14,19,36,.55) 65%,rgba(14,19,36,.92) 100%),
    linear-gradient(to right,rgba(14,19,36,.65) 0%,transparent 65%);
}
.hero-content{position:relative;z-index:2;max-width:700px;padding-top:90px}
.hero-badge{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(219,202,164,.12);border:1px solid rgba(219,202,164,.2);
  border-radius:var(--r-pill);padding:6px 16px;
  font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;
  color:var(--warm);margin-bottom:24px;
}
.hero-badge-dot{width:5px;height:5px;border-radius:50%;background:var(--warm);animation:pulse 2s infinite;flex-shrink:0}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
.hero-h1{
  font-size:clamp(44px,6.5vw,84px);
  font-weight:300;color:var(--white);
  line-height:1.04;margin-bottom:20px;letter-spacing:-.03em;
}
.hero-h1 em{font-style:italic;color:#e8d9b8}
.hero-sub{
  font-size:17px;font-weight:300;
  /* Stond op rgba(255,255,255,.58): wit op 58% over een foto met een lichte lucht.
     Dat haalt geen enkele contrastnorm — en juist deze regel vertelt wat je verkoopt.
     De schaduw vangt op waar de foto licht is; het overlay-verloop doet dat niet. */
  color:rgba(255,255,255,.94);line-height:1.78;
  text-shadow:0 1px 3px rgba(14,19,36,.55);
  max-width:520px;margin-bottom:40px;
}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:0}
.hero-stats-bar{position:absolute;bottom:44px;left:0;right:0;z-index:2;display:flex;justify-content:center}
.hero-stats{display:flex;align-items:center;gap:0;justify-content:center}
.hero-stat{text-align:center;min-width:120px}
.hero-stat-num{
  display:block;font-family:'DM Sans',sans-serif;font-size:36px;font-weight:300;
  color:var(--warm);letter-spacing:-.02em;line-height:1;
}
.hero-stat-label{display:block;font-size:11.5px;color:rgba(255,255,255,.45);margin-top:6px;letter-spacing:.06em;text-transform:uppercase}
.hero-stat-divider{width:1px;height:44px;background:rgba(255,255,255,.15);margin:0 48px}
.hero-scroll-indicator{
  position:absolute;bottom:28px;left:50%;transform:translateX(-50%);
  z-index:2;display:flex;flex-direction:column;align-items:center;gap:8px;
  color:rgba(255,255,255,.28);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  animation:scrollhint 2.5s ease-in-out infinite;
}
.hero-scroll-line{width:1px;height:32px;background:linear-gradient(to bottom,rgba(255,255,255,.28),transparent)}
@keyframes scrollhint{0%,100%{opacity:.4;transform:translateX(-50%) translateY(0)}50%{opacity:.85;transform:translateX(-50%) translateY(5px)}}

/* ─── FILTER BAR ─────────────────────────────── */
#filterbar{
  background:var(--vlak);
  border-bottom:1px solid var(--ash);
  position:sticky;top:0;z-index:80;
  box-shadow:var(--sh-sm);
}
.filter-wrap{padding:20px 0}
.filter-wrap--compact{padding:12px 0}
.filter-wrap--compact .filter-row{margin-top:0}
.filter-wrap--compact .filter-bottom{padding-top:8px}
.filter-tabs{
  display:flex;gap:4px;margin-bottom:16px;
  border-bottom:1px solid var(--ash);padding-bottom:16px;
}
.filter-tab{
  background:none;border:1.5px solid var(--ash);
  border-radius:var(--r-pill);padding:8px 22px;
  font-family:'DM Sans',sans-serif;font-size:13px;font-weight:500;
  color:var(--fog);cursor:pointer;transition:all .2s;
  -webkit-tap-highlight-color:transparent;
}
.filter-tab:hover{border-color:var(--smoke);color:var(--ink)}
.filter-tab.active{background:var(--warm);border-color:var(--warm);color:var(--slate-3)}
.filter-row{
  display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end;margin-bottom:14px;
}
.filter-field{display:flex;flex-direction:column;gap:5px;flex:1;min-width:140px}
.filter-field label{font-size:11px;font-weight:500;color:var(--fog);letter-spacing:.06em;text-transform:uppercase}
.filter-field select{
  border:1.5px solid var(--ash);border-radius:var(--r-md);
  padding:9px 14px;font-size:13px;font-weight:400;color:var(--ink);
  background:var(--bone);cursor:pointer;appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238fa4bb' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;padding-right:32px;
  transition:border-color .2s;
}
.filter-field select:focus{outline:none;border-color:var(--smoke)}
/* Een uitgeklapte keuzelijst erft in Chrome op Windows en Linux de achtergrond
   van de select, maar houdt zwarte tekst. Op het donkere thema is dat onleesbaar;
   daarom staan de opties hier expliciet licht op donker. */
select option{background-color:var(--bone);color:var(--ink)}
.filter-check{flex:0 0 auto;min-width:auto;justify-content:flex-end}
.checkbox-label{
  display:flex;align-items:center;gap:9px;cursor:pointer;
  font-size:13px;font-weight:400;color:var(--ink-mid);user-select:none;
}
.checkbox-label input{display:none}
.checkbox-custom{
  width:18px;height:18px;border-radius:5px;flex-shrink:0;
  border:1.5px solid var(--smoke);background:var(--bone);
  transition:background .2s,border-color .2s;position:relative;
}
.checkbox-label input:checked + .checkbox-custom{background:var(--warm);border-color:var(--warm)}
.checkbox-label input:checked + .checkbox-custom::after{
  content:'✓';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  font-size:11px;color:var(--slate-3);font-weight:600;
}
.filter-bottom{
  display:flex;align-items:center;justify-content:space-between;
  padding-top:10px;border-top:1px solid var(--ash);
}
.filter-result-count{font-size:13px;font-weight:400;color:var(--fog)}
.filter-sort{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--fog)}
.filter-sort select{
  border:1.5px solid var(--ash);border-radius:var(--r-md);
  padding:6px 28px 6px 12px;font-size:13px;
  background:var(--bone);cursor:pointer;appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238fa4bb' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;
}

/* ─── SECTIONS ───────────────────────────────── */
/* Een in het beheerpaneel verborgen sectie krijgt het hidden-attribuut. Dit
   overrulet elke display-regel die er later bij komt. */
[hidden]{display:none !important}

.section{--sectie-pt:104px;--sectie-pb:116px;padding:var(--sectie-pt) 0 var(--sectie-pb)}
.section.bg-bone{background:var(--bone)}
/* ── Witruimte per sectie, ingesteld in het beheerpaneel ───────────────────
   Compact en Ruim SCHALEN de bestaande padding, ze vervangen hem niet: de
   trust-balk (52px) en een gewone sectie (104px) horen niet even hoog te
   worden. Elke regel is één punt specifieker dan de sectie zelf, anders wint
   #koop-huur met zijn id. */
.section.sectie-compact,.trust-bar.sectie-compact,#koop-huur.sectie-compact{
  padding-top:calc(var(--sectie-pt) * .55);padding-bottom:calc(var(--sectie-pb) * .55);
}
.section.sectie-ruim,.trust-bar.sectie-ruim,#koop-huur.sectie-ruim{
  padding-top:calc(var(--sectie-pt) * 1.45);padding-bottom:calc(var(--sectie-pb) * 1.45);
}

section[id]{scroll-margin-top:96px}
.section-header{margin-bottom:56px}
.section-header.centered{text-align:center}
.section-header.centered p{max-width:520px;margin:14px auto 0;font-size:16px;font-weight:300;color:var(--fog);line-height:1.78}
.section-header h2{font-size:clamp(28px,3.5vw,48px);margin-top:6px}
.section-header p{margin-top:14px;font-size:16px;font-weight:300;color:var(--fog);max-width:520px;line-height:1.78}

/* ─── CHALET CARDS ───────────────────────────── */
.chalets-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.chalets-grid-3{grid-template-columns:repeat(3,1fr)}
.chalets-grid--wide{grid-template-columns:repeat(2,1fr);gap:28px}
.chalets-grid--wide .chalet-card-img{aspect-ratio:16/9}
.chalet-card{
  background:var(--vlak-glans);border-radius:var(--r-lg);
  overflow:hidden;border:1px solid var(--rand);border-top-color:var(--rand-top);
  box-shadow:var(--sh-sm);
  transition:transform .3s var(--ease-out),box-shadow .3s var(--ease-out);
  display:flex;flex-direction:column;
}
.chalet-card:hover{transform:translateY(-6px);box-shadow:var(--sh-lg)}
.chalet-card:active{transform:translateY(-2px) scale(.995)}
.chalet-card.hidden{display:none}
.chalet-card-img{
  position:relative;aspect-ratio:4/3;overflow:hidden;flex-shrink:0;
  display:block;text-decoration:none;cursor:pointer;
}
.chalet-img-placeholder{
  width:100%;height:100%;
  background:linear-gradient(145deg,#0a1422 0%,#152740 40%,#254466 70%,#2f5a80 100%);
  transition:transform .5s var(--ease);
}
.chalet-card-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.chalet-card:hover .chalet-img-placeholder,
.chalet-card:hover .chalet-card-img img{transform:scale(1.05)}
.c1{background:linear-gradient(145deg,#0a1422 0%,#152740 35%,#254466 65%,#dbcaa4 120%)}
.c2{background:linear-gradient(135deg,#0c1828 0%,#1a2e49 40%,#2b4d70 68%,#cfc2a2 120%)}
.c3{background:linear-gradient(145deg,#091220 0%,#132339 40%,#213d5c 65%,#aebfd4 120%)}
.c4{background:linear-gradient(135deg,#0d1a2b 0%,#1b3050 40%,#2c5178 70%,#c7cddb 120%)}
.c5{background:linear-gradient(145deg,#0a1626 0%,#162b47 40%,#27496c 68%,#e6d8b8 120%)}
.c6{background:linear-gradient(145deg,#0b1826 0%,#172d45 40%,#284d68 68%,#b6c7c2 120%)}
.chalet-labels{position:absolute;top:12px;left:12px;display:flex;gap:6px;flex-wrap:wrap;z-index:2}
.label-badge{
  font-size:10px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;
  padding:5px 11px;border-radius:7px;
  box-shadow:0 2px 8px rgba(0,0,0,.35);
  backdrop-filter:blur(4px);
}
.label-badge.voorbehoud{background:rgba(255,150,50,.92);color:var(--slate-3)}

/* ─── Diagonale verkocht-banner ──────────────── */
.sold-ribbon{
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;
  overflow:hidden;
}
.sold-ribbon::after{
  content:attr(data-label);
  position:absolute;
  top:50%;left:50%;
  width:160%;
  text-align:center;
  padding:11px 0;
  font-size:15px;
  font-weight:700;
  letter-spacing:.2em;
  text-transform:uppercase;
  transform:translate(-50%,-50%) rotate(-35deg);
  white-space:nowrap;
}
.sold-ribbon.verkocht::after{
  background:linear-gradient(180deg,rgba(190,42,42,.94),rgba(160,32,32,.94));
  color:#fff;
  box-shadow:0 6px 22px rgba(0,0,0,.45);
}
.sold-ribbon.voorbehoud::after{
  background:linear-gradient(180deg,rgba(210,120,40,.94),rgba(190,96,20,.94));
  color:#fff;
  box-shadow:0 6px 22px rgba(0,0,0,.4);
}
/* Was paars; dat vloekte met het marineblauwe thema. Nu diep marine met champagne,
   nog steeds duidelijk anders dan het rood van "verkocht" en het oranje van "onder optie". */
.sold-ribbon.verhuurd::after{
  background:linear-gradient(180deg,rgba(39,64,95,.95),rgba(24,40,63,.95));
  color:var(--warm);
  box-shadow:0 6px 22px rgba(0,0,0,.45);
}
.fav-btn{
  position:absolute;top:12px;right:12px;z-index:2;
  width:32px;height:32px;border-radius:50%;border:none;
  background:rgba(11,21,36,.72);color:var(--ink);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;box-shadow:var(--sh-sm);
  transition:background .2s,transform .15s;
}
.fav-btn:hover{background:rgba(19,32,51,.92);transform:scale(1.1)}
.fav-btn.active svg{fill:var(--warm);stroke:var(--warm)}
.chalet-card-body{padding:20px;display:flex;flex-direction:column;flex:1}
.chalet-card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;margin-bottom:10px}
.chalet-name{font-family:'DM Sans',sans-serif;font-size:17px;font-weight:400;color:var(--ink);letter-spacing:-.01em;line-height:1.2}
.chalet-price{font-family:'DM Sans',sans-serif;font-size:17px;font-weight:500;color:var(--ink);white-space:nowrap;letter-spacing:-.01em;text-align:right}
/* De huurperiode staat onder het bedrag en niet erachter: naast een lange chaletnaam
   duwt "€ 450 per week" op één nowrap-regel de titel weg op een smal scherm. */
.chalet-price-per{display:block;font-size:12px;font-weight:400;color:var(--fog);letter-spacing:0;margin-top:1px}
.chalet-specs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.spec{
  display:inline-flex;align-items:center;gap:5px;
  font-size:12px;font-weight:400;color:var(--fog);
  background:var(--bone);padding:4px 10px;border-radius:var(--r-pill);
}
.spec svg{flex-shrink:0;opacity:.7}
.chalet-card-footer{
  display:flex;align-items:center;justify-content:space-between;
  padding-top:14px;border-top:1px solid var(--ash);margin-top:auto;gap:8px;
}
/* De knop stond rechts naast het staat-label. Nu dat label weg is zou
   space-between hem naar links trekken; margin-left houdt hem waar hij hoorde. */
.chalet-card-footer .btn{margin-left:auto}
.aanbod-cta{
  text-align:center;margin-top:56px;padding:52px 40px;
  background:
    radial-gradient(90% 130% at 50% 0%, rgba(219,202,164,.10), transparent 62%),
    var(--vlak-glans);
  border-radius:var(--r-xl);border:1px solid var(--rand);border-top-color:var(--rand-top);
  box-shadow:var(--sh-sm);
}
.aanbod-cta p{font-size:16px;color:var(--fog);margin-bottom:18px}

/* ─── VERGELIJK NIEUW VS TWEEDEHANDS ─────────── */
.vergelijk-grid{
  display:grid;grid-template-columns:1fr auto 1fr;gap:0;align-items:stretch;
}
.vergelijk-card{
  background:var(--vlak-glans);border-radius:var(--r-xl);
  padding:44px;border:1px solid var(--ash);border-top-color:var(--rand-top);
  display:flex;flex-direction:column;gap:28px;
}
.nieuw-card{border-top:3px solid var(--smoke)}
.tweedehands-card{border-top:3px solid var(--warm)}
.vergelijk-header{display:flex;flex-direction:column;gap:8px}
.vergelijk-icon{font-size:24px;margin-bottom:4px}
.vergelijk-header h3{font-size:26px;font-weight:300;letter-spacing:-.02em}
.vergelijk-intro{font-size:15px;font-weight:300;color:var(--fog);line-height:1.65}
.vergelijk-list{list-style:none;display:flex;flex-direction:column;gap:12px;flex:1}
.vergelijk-list li{display:flex;align-items:flex-start;gap:12px;font-size:14px;font-weight:300;color:var(--ink-mid);line-height:1.5}
.check{color:var(--warm);font-weight:600;flex-shrink:0;margin-top:1px}
.vergelijk-divider{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:0 28px;
}
.vergelijk-divider span{
  width:40px;height:40px;border-radius:50%;
  background:var(--bone);border:1px solid var(--ash);
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:500;color:var(--fog);
}

/* ─── SERVICE ────────────────────────────────── */
#service{
  position:relative;overflow:hidden;
  background:
    radial-gradient(90% 60% at 100% 0%, rgba(219,202,164,.07), transparent 52%),
    radial-gradient(80% 60% at 0% 100%, rgba(30,35,48,.035), transparent 55%),
    var(--paper);
}
#service::before{content:'';position:absolute;inset:0;background:var(--grain);opacity:.022;pointer-events:none;mix-blend-mode:multiply}
#service > .container{position:relative;z-index:1}
.service-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.service-card{
  background:var(--vlak-glans);border-radius:var(--r-lg);
  padding:34px 32px 36px;border:1px solid var(--rand);border-top-color:var(--rand-top);
  box-shadow:var(--sh-sm);
  transition:transform .25s var(--ease-out),box-shadow .25s var(--ease-out),border-color .25s;
}
.service-card:hover{transform:translateY(-4px);box-shadow:var(--sh-md);border-color:rgba(219,202,164,.4)}
.service-card:active{transform:translateY(-1px) scale(.995)}
.service-icon{
  width:52px;height:52px;border-radius:14px;margin-bottom:20px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(150deg, rgba(219,202,164,.18), rgba(219,202,164,.05));
  color:var(--warm-2);
}
.service-icon svg{width:26px;height:26px}
.service-card h4{font-family:'DM Sans',sans-serif;font-size:16.5px;font-weight:600;margin-bottom:9px;letter-spacing:-.01em;color:var(--ink)}
.service-card p{font-size:13.5px;font-weight:300;color:var(--fog);line-height:1.72}

/* ─── TRUST BAR ──────────────────────────────── */
.trust-bar{
  position:relative;overflow:hidden;
  background:
    radial-gradient(90% 130% at 50% 0%, rgba(219,202,164,.14), transparent 55%),
    linear-gradient(180deg, var(--slate-2) 0%, var(--slate) 55%, var(--slate-3) 100%);
  --sectie-pt:52px;--sectie-pb:52px;
  padding:var(--sectie-pt) 0 var(--sectie-pb);
}
.trust-bar::before{content:'';position:absolute;inset:0;background:var(--grain);opacity:.05;pointer-events:none}
.trust-bar > .container{position:relative;z-index:1}
.trust-items{display:flex;align-items:center;justify-content:center;gap:0}
.trust-item{text-align:center;padding:0 44px}
.trust-num{display:block;font-family:'DM Sans',sans-serif;font-size:32px;font-weight:300;color:var(--warm);letter-spacing:-.02em;line-height:1}
.trust-label{display:block;font-size:12px;color:rgba(255,255,255,.56);margin-top:6px;letter-spacing:.06em}
.trust-divider{width:1px;height:48px;background:rgba(255,255,255,.12)}

/* ─── CONTACT ────────────────────────────────── */
#contact{
  position:relative;overflow:hidden;
  background:
    radial-gradient(70% 90% at 100% 0%, rgba(219,202,164,.08), transparent 50%),
    var(--bone);
}
#contact::before{content:'';position:absolute;inset:0;background:var(--grain);opacity:.022;pointer-events:none;mix-blend-mode:multiply}
#contact > .container{position:relative;z-index:1}
.contact-layout{display:grid;grid-template-columns:1fr 1.1fr;gap:64px;align-items:start}
.contact-info .lead{font-size:16px;font-weight:300;color:var(--fog);line-height:1.82;margin-bottom:32px}
.contact-methods{display:flex;flex-direction:column;gap:10px}
.contact-method{
  display:flex;align-items:center;gap:14px;
  background:var(--vlak-glans);border-radius:var(--r-md);border:1px solid var(--rand);border-top-color:var(--rand-top);
  box-shadow:var(--sh-sm);
  padding:14px 18px;transition:transform .2s var(--ease-out),box-shadow .2s,border-color .2s;
  color:var(--ink);cursor:pointer;
}
.contact-method:hover{transform:translateY(-2px);box-shadow:var(--sh-md);border-color:rgba(219,202,164,.4)}
.contact-method:active{transform:scale(.99)}
.contact-method.no-link:hover{transform:none;box-shadow:var(--sh-sm);border-color:var(--rand);cursor:default}
.contact-method-icon{
  width:40px;height:40px;border-radius:11px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(150deg, rgba(219,202,164,.16), rgba(219,202,164,.05));
  color:var(--warm-2);
}
.contact-method-icon svg{width:19px;height:19px}
.contact-method strong{display:block;font-size:13px;font-weight:600;color:var(--ink);margin-bottom:2px}
.contact-method span{font-size:12.5px;font-weight:300;color:var(--fog)}
.contact-form-wrap{background:var(--vlak-glans);border-radius:var(--r-xl);padding:40px;border:1px solid var(--ash);border-top-color:var(--rand-top);box-shadow:var(--sh-md)}
.contact-form h3{font-size:22px;font-weight:300;margin-bottom:24px;letter-spacing:-.02em}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form-field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.form-field label{font-size:12px;font-weight:500;color:var(--fog);letter-spacing:.05em}
.form-field input,
.form-field select,
.form-field textarea{
  border:1.5px solid var(--ash);border-radius:var(--r-md);
  padding:11px 14px;font-size:14px;font-weight:300;
  color:var(--ink);background:var(--bone);
  transition:border-color .2s;resize:vertical;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus{outline:none;border-color:var(--smoke);background:var(--vlak)}
/* --smoke was hier het zachte grijs van het lichte thema; op het donkere veld
   haalt dat nog maar 1,8:1 en verdwijnt de tekst. Dit haalt 4,8:1 op --bone. */
.form-field input::placeholder,
.form-field textarea::placeholder{color:var(--fog-zacht)}
.form-check{margin-bottom:20px}
.form-check a{color:var(--ink);text-decoration:underline;text-underline-offset:2px}
.form-disclaimer{font-size:11.5px;color:var(--fog);text-align:center;margin-top:12px;line-height:1.6}
.form-success{text-align:center;padding:40px 20px}
.form-success-icon{display:flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;background:rgba(122,200,160,.16);color:#8fdcb4;margin:0 auto 16px}
.form-success-icon svg{width:26px;height:26px}
.form-success h3{font-size:22px;font-weight:300;margin-bottom:10px}
.form-success p{font-size:15px;color:var(--fog)}

/* ─── FOOTER ─────────────────────────────────── */
footer{background:var(--slate-3);padding:64px 0 32px}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:48px;margin-bottom:48px}
.footer-logo{font-family:'DM Sans',sans-serif;font-size:24px;font-weight:600;color:var(--white);opacity:.8;margin-bottom:14px;letter-spacing:-.02em}
.footer-logo-link{display:inline-block;margin-bottom:16px}
.footer-logo-img{height:80px;width:auto;filter:brightness(0) invert(1);opacity:.9}
.footer-about{font-size:13px;font-weight:300;color:rgba(255,255,255,.52);line-height:1.78;margin-bottom:20px}
.footer-socials{display:flex;gap:8px}
.footer-social{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.07);display:flex;align-items:center;justify-content:center;font-size:14px;color:rgba(255,255,255,.55);transition:background .15s,color .15s}
.footer-social:hover{background:var(--warm);color:var(--slate-3)}
.footer-col h4{font-size:11px;font-weight:500;color:rgba(255,255,255,.52);margin-bottom:16px;letter-spacing:.1em;text-transform:uppercase}
.footer-links{display:flex;flex-direction:column;gap:11px}
.footer-links a{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:300;color:rgba(255,255,255,.55);transition:color .15s}
.footer-links a:hover{color:rgba(255,255,255,.9)}
.footer-links a svg{width:15px;height:15px;opacity:.55;flex-shrink:0;color:var(--warm)}
.footer-hours{display:flex;flex-direction:column;gap:4px;margin-top:16px}
.footer-hours span{font-size:12px;font-weight:300;color:rgba(255,255,255,.52)}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;padding-top:24px;border-top:1px solid rgba(255,255,255,.07)}
.footer-bottom span{font-size:12px;font-weight:300;color:rgba(255,255,255,.5)}
.footer-bottom-links{display:flex;gap:20px}
.footer-bottom-links a{font-size:12px;color:rgba(255,255,255,.5);transition:color .15s}
.footer-bottom-links a:hover{color:rgba(255,255,255,.8)}

/* ─── STICKY CTA ─────────────────────────────── */
.sticky-cta{
  display:none;
  position:fixed;bottom:0;left:0;right:0;z-index:90;
  background:var(--vlak);border-top:1px solid var(--ash);
  padding:12px 20px;gap:10px;box-shadow:0 -4px 20px rgba(0,0,0,.1);
}

/* ─── RESPONSIVE ─────────────────────────────── */
@media(max-width:1024px){
  .container{padding:0 32px}
  .chalets-grid{grid-template-columns:repeat(2,1fr)}
  .chalets-grid--wide{grid-template-columns:repeat(2,1fr)}
  .service-grid{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
  .vergelijk-grid{grid-template-columns:1fr;gap:0}
  .vergelijk-divider{flex-direction:row;padding:16px 0;justify-content:center}
  .vergelijk-divider span{width:32px;height:32px;font-size:11px}
  .contact-layout{grid-template-columns:1fr;gap:40px}
}
@media(max-width:768px){
  .logo-img{height:110px}
  .footer-logo-img{height:120px}
  .logo{margin-left:-16px}
  .container{padding:0 20px}
  :root{--kop-hoogte:135px} /* logo 110px + 2x12px padding + 1px rand */
  #header{padding:12px 8px}
  #header.header-light{padding:12px 8px}
  #header.scrolled{padding:12px 8px}
  .tag{font-size:13px;font-weight:700;letter-spacing:.06em}
  .page-hero .container{padding:0 24px}
  .page-hero-title{font-size:clamp(26px,7vw,40px);word-break:break-word}
  #header.scrolled{padding:12px 20px}
  .nav-pill{display:none}
  .header-cta{display:none}
  .mobile-menu-btn{display:flex}
  .section{padding:64px 0}
  .hero-h1{font-size:clamp(36px,10vw,54px)}
  .hero-sub{font-size:15px}
  .hero-actions{flex-direction:column}
  .hero-actions .btn{text-align:center;width:100%;justify-content:center}
  .hero-stats{flex-direction:row;gap:0;align-items:center;justify-content:center}
  .hero-stat{min-width:0;flex:1}
  .hero-stat-divider{display:block;margin:0 16px;height:32px}
  .hero-stat-num{font-size:28px}
  .hero-scroll-indicator{display:none}
  .chalets-grid{grid-template-columns:1fr}
  .chalets-grid--wide{grid-template-columns:1fr}
  .service-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .trust-items{flex-wrap:wrap;gap:24px}
  .trust-item{padding:0 20px}
  .trust-divider{display:none}
  .form-row{grid-template-columns:1fr}
  .filter-row{flex-direction:row;flex-wrap:wrap;gap:8px}
  .filter-field{flex:1;min-width:120px}
  .filter-field label{font-size:10px}
  .filter-field select{padding:8px 10px;font-size:13px}
  .filter-check{flex:0 0 auto;min-width:auto;flex-direction:row;align-self:flex-end;padding-bottom:6px}
  .checkbox-label{font-size:12px}
  .sticky-cta{display:flex}
  #filterbar{top:0}
}
@media(max-width:480px){
  .hero-h1{font-size:clamp(32px,11vw,48px)}
  .vergelijk-card{padding:28px}
  .contact-form-wrap{padding:28px 20px}
  .footer-bottom{flex-direction:column;text-align:center}
  .footer-bottom-links{justify-content:center}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
}

/* ─── PAGE HERO (koop/huur subpagina's) ──────── */
.page-hero{
  position:relative;overflow:hidden;
  /* De menubalk ligt over de bovenkant heen; daaronder evenveel lucht boven het
     label als onder de titel (+40 boven: de regel van het label geeft zelf al ~8px).
     Via --kop-hoogte klopt dat ook op de telefoon. */
  padding:calc(var(--kop-hoogte) + 40px) 0 48px;
  background:
    radial-gradient(80% 120% at 100% 0%, rgba(219,202,164,.10), transparent 55%),
    var(--paper);
  border-bottom:1px solid var(--ash);
}
.page-hero::before{content:'';position:absolute;inset:0;background:var(--grain);opacity:.022;pointer-events:none;mix-blend-mode:multiply}
.page-hero > .container{position:relative;z-index:1;text-align:center}
.page-hero--huur{
  background:
    radial-gradient(90% 130% at 15% 0%, rgba(219,202,164,.20), transparent 55%),
    linear-gradient(135deg,var(--warm-pale) 0%,var(--paper) 62%);
}
.page-hero .tag{margin-bottom:16px}
.page-hero-title{
  font-size:clamp(32px,5vw,52px);
  font-weight:300;
  color:var(--ink);
  margin-bottom:0;
  letter-spacing:-.03em;
}

/* ─── HUUR LEEG / COMING SOON ────────────────── */
.huur-empty{
  grid-column:1/-1;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:80px 24px;
  background:var(--warm-pale);
  border-radius:var(--r-xl);
  border:1px solid var(--ash);
}
.huur-empty-icon{
  width:88px;height:88px;
  display:flex;align-items:center;justify-content:center;
  background:var(--vlak);
  border-radius:50%;
  border:1px solid var(--ash);
  margin-bottom:28px;
}
.huur-empty-title{
  font-size:clamp(22px,3vw,30px);
  font-weight:300;
  color:var(--ink);
  margin-bottom:14px;
}
.huur-empty-desc{
  font-size:15px;
  color:var(--fog);
  max-width:480px;
  line-height:1.65;
  margin-bottom:32px;
}

/* ─── KOOP / HUUR SECTIE ─────────────────────── */
#koop-huur{
  position:relative;
  background:
    radial-gradient(130% 90% at 50% -10%, rgba(219,202,164,.13), transparent 55%),
    var(--warm-pale);
  --sectie-pt:84px;--sectie-pb:92px;
  padding:var(--sectie-pt) 0 var(--sectie-pb);
  border-bottom:1px solid var(--ash);
  overflow:hidden;
}
#koop-huur::before{content:'';position:absolute;inset:0;background:var(--grain);opacity:.028;pointer-events:none;mix-blend-mode:multiply}
#koop-huur > .container{position:relative;z-index:1}
.kh-header{
  text-align:center;
  margin-bottom:48px;
}
.kh-title{
  font-size:clamp(26px,3.5vw,38px);
  font-weight:300;
  color:var(--ink);
  margin-bottom:12px;
}
.kh-intro{
  font-size:16px;
  color:var(--fog);
  max-width:520px;
  margin:0 auto;
  line-height:1.6;
}
.kh-cards{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
  max-width:860px;
  margin:0 auto;
}

/* ─── Card basis ─────────────────────────────── */
.kh-card{
  display:flex;
  flex-direction:column;
  padding:44px 40px;
  border-radius:var(--r-xl);
  text-decoration:none;
  transition:transform .25s var(--ease-out), box-shadow .25s var(--ease-out);
  position:relative;
  overflow:hidden;
}
.kh-card:hover{
  transform:translateY(-6px);
  box-shadow:var(--sh-xl);
}
.kh-card:active{transform:translateY(-2px) scale(.995)}

/* ─── Koop: donkerblauw + goud ───────────────── */
.kh-card--koop{
  background:linear-gradient(180deg,#24395b 0%,#1c2e4a 100%);
  border:1px solid var(--rand);border-top-color:var(--rand-top);
  color:var(--white);
  box-shadow:var(--sh-lg);
}
.kh-card--koop .kh-card-label{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:11px;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--warm);
  border:1px solid var(--warm-2);
  border-radius:var(--r-pill);
  padding:4px 12px;
  width:fit-content;
  margin-bottom:28px;
}
.kh-card--koop .kh-card-icon{
  color:var(--warm);
  margin-bottom:20px;
}
.kh-card--koop .kh-card-title{
  font-size:22px;
  font-weight:400;
  color:var(--white);
  margin-bottom:12px;
  line-height:1.2;
}
.kh-card--koop .kh-card-desc{
  font-size:14px;
  color:rgba(255,255,255,.65);
  line-height:1.65;
  flex:1;
  margin-bottom:32px;
}
.kh-card--koop .kh-card-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:var(--warm);
  color:var(--slate-3);
  font-size:13px;
  font-weight:600;
  padding:12px 22px;
  border-radius:var(--r-md);
  width:fit-content;
  transition:background .2s;
}
.kh-card--koop:hover .kh-card-btn{
  background:var(--warm-2);
}

/* ─── Huur: wit + donkerblauw accenten ───────── */
.kh-card--huur{
  background:var(--vlak-glans);
  color:var(--ink);
  border:1px solid var(--ash);border-top-color:var(--rand-top);
  box-shadow:var(--sh-md);
}
.kh-card--huur .kh-card-label{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:11px;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink);
  border:1px solid var(--ash);
  border-radius:var(--r-pill);
  padding:4px 12px;
  width:fit-content;
  margin-bottom:28px;
}
.kh-card--huur .kh-card-icon{
  color:var(--warm-2);
  margin-bottom:20px;
}
.kh-card--huur .kh-card-title{
  font-size:22px;
  font-weight:400;
  color:var(--ink);
  margin-bottom:12px;
  line-height:1.2;
}
.kh-card--huur .kh-card-desc{
  font-size:14px;
  color:var(--fog);
  line-height:1.65;
  flex:1;
  margin-bottom:32px;
}
.kh-card--huur .kh-card-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:var(--slate-2);
  border-top:1px solid var(--rand-top);
  color:var(--white);
  font-size:13px;
  font-weight:600;
  padding:12px 22px;
  border-radius:var(--r-md);
  width:fit-content;
  transition:background .2s;
}
.kh-card--huur:hover .kh-card-btn{
  background:#2f4d70;
}

/* ─── Mobiel ─────────────────────────────────── */
@media(max-width:720px){
  .kh-cards{grid-template-columns:1fr}
  #koop-huur{padding:52px 0}
  .kh-card{padding:36px 28px}
}