/* =========================================================
   Glaslook Panelen Midden Nederland
   Design system + site styles
   ========================================================= */

/* ---------- Tokens ----------
   Elke kleurstijl zet alleen de blokken "Surfaces", "Text" en "Accent" opnieuw.
   Al het andere in dit bestand rekent met die variabelen, dus een stijl wisselen
   is één regel. De acht stijlen staan onderaan dit bestand.
   ------------------------------------------------------------------------- */
:root {
  /* Surfaces: licht en rustig, prettig leesbaar op elk scherm */
  --ink:        #ffffff;
  --ink-2:      #f1f5f9;
  --panel:      #ffffff;
  --panel-2:    #e9eef5;
  --line:       rgba(16, 24, 40, .13);
  --line-strong:rgba(16, 24, 40, .26);
  --shade:      255 255 255;     /* basis voor overlays boven foto's */
  --wash:       rgba(16, 24, 40, .035);  /* subtiele vulling in velden en knoppen */
  --wash-2:     rgba(16, 24, 40, .07);

  /* Text */
  --text:       #101828;
  --muted:      #45526a;
  --muted-2:    #667389;

  /* Accent: glashelder blauw */
  --accent-rgb:  31 111 184;
  --accent2-rgb: 20 78 138;
  --on-accent:   #ffffff;        /* tekst op een accentvlak */
  --danger-rgb:  183 46 46;

  /* Afgeleid, nooit per stijl instellen */
  --glass:      rgb(var(--accent-rgb));
  --glass-2:    rgb(var(--accent2-rgb));
  --glass-dim:  rgb(var(--accent-rgb) / .14);
  --glass-line: rgb(var(--accent-rgb) / .32);
  --danger:     rgb(var(--danger-rgb));

  /* Layout */
  --maxw:       1180px;
  --gutter:     clamp(1.1rem, 4vw, 2.5rem);
  --radius:     18px;
  --radius-sm:  12px;
  --radius-lg:  28px;

  /* Type */
  --font-display: "Sora", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Effects */
  --shadow:     0 24px 60px rgba(16, 24, 40, .14);
  --shadow-sm:  0 10px 28px rgba(16, 24, 40, .10);
  --ease:       cubic-bezier(.22, .61, .36, 1);
  --photo-filter: grayscale(.12) contrast(1.02) brightness(1.02);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg, video { max-width: 100%; display: block; }
/* De width- en height-attributen op afbeeldingen zijn er tegen verspringende
   layout. Zonder height:auto zouden ze de beeldverhouding uit de CSS overrulen. */
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.02em;
  margin: 0 0 .6em;
  text-wrap: balance;             /* koppen breken op een logisch punt */
}
/* Grote koppen mogen strakker staan, kleine juist iets ruimer:
   optisch leest dat rustiger dan één vaste waarde. */
h1 { font-size: clamp(2.4rem, 5.4vw, 4rem); line-height: 1.05; letter-spacing: -.032em; }
h2 { font-size: clamp(1.85rem, 3.6vw, 2.75rem); line-height: 1.1; letter-spacing: -.025em; }
h3 { font-size: clamp(1.12rem, 1.8vw, 1.35rem); line-height: 1.25; letter-spacing: -.012em; }
h4 { font-size: 1rem; letter-spacing: -.005em; }
p  { margin: 0 0 1.1em; color: var(--muted); text-wrap: pretty; }
strong { font-weight: 600; }
::selection { background: var(--glass); color: var(--on-accent); }

:focus-visible {
  outline: 2px solid var(--glass);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ---------- Helpers ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding: clamp(4.5rem, 9vw, 8rem) 0; position: relative; }
.section--tight { padding: clamp(3rem, 6vw, 5rem) 0; }
.section--alt { background: linear-gradient(180deg, var(--ink) 0%, var(--ink-2) 40%, var(--ink) 100%); }
.center { text-align: center; }
.lead { font-size: clamp(1.05rem, 1.6vw, 1.22rem); color: var(--muted); max-width: 62ch; }
.center .lead { margin-inline: auto; }
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--glass); color: var(--on-accent); padding: .8rem 1.2rem; border-radius: 0 0 10px 0;
}
.skip:focus { left: 0; }

.eyebrow {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: .78rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--glass);
  margin-bottom: 1.1rem;
}
.eyebrow::before {
  content: ""; width: 26px; height: 1px; background: var(--glass-line);
}
.center .eyebrow::after {
  content: ""; width: 26px; height: 1px; background: var(--glass-line);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  padding: .95rem 1.5rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font-weight: 600;
  font-size: .96rem;
  letter-spacing: .01em;
  cursor: pointer;
  transition: transform .25s var(--ease), background .25s var(--ease),
              border-color .25s var(--ease), box-shadow .25s var(--ease), color .25s var(--ease);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn--primary {
  /* Eerst het eenvoudige verloop als terugval, daarna de variant waarin het
     donkere eind wordt opgelicht. Puur accent2 gaf in de donkere stijlen te
     weinig contrast met de knoptekst. */
  background: linear-gradient(135deg, var(--glass) 0%, var(--glass-2) 100%);
  background: linear-gradient(135deg, var(--glass) 0%,
              color-mix(in srgb, var(--glass-2) 30%, var(--glass)) 100%);
  color: var(--on-accent);
  box-shadow: 0 10px 30px rgb(var(--accent2-rgb) / .28);
}
.btn--primary:hover { box-shadow: 0 16px 40px rgb(var(--accent2-rgb) / .42); }
.btn--ghost {
  border-color: var(--line-strong);
  background: var(--wash);
  color: var(--text);
}
.btn--ghost:hover { border-color: var(--glass-line); background: var(--glass-dim); }
.btn--wa { background: #25d366; color: #04210f; }
.btn--wa:hover { box-shadow: 0 14px 34px rgba(37, 211, 102, .3); }
.btn--lg { padding: 1.1rem 1.9rem; font-size: 1.02rem; }
.btn--block { width: 100%; }
.btn svg { width: 18px; height: 18px; flex: none; }

/* ---------- Header ---------- */
.header {
  position: sticky; top: 0; z-index: 100;
  background: rgb(var(--shade) / .72);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.header.is-stuck { border-bottom-color: var(--line); background: rgb(var(--shade) / .9); }
.header__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 1.2rem;
  height: 78px;
}
.brand { display: flex; align-items: center; gap: .8rem; flex: none; }
.brand img { height: 46px; width: auto; }
.brand__txt { display: none; }
@media (min-width: 1080px) {
  .brand__txt { display: block; line-height: 1.15; }
  .brand__txt strong { display: block; font-family: var(--font-display); font-size: .95rem; letter-spacing: -.01em; }
  .brand__txt span { font-size: .74rem; color: var(--muted-2); letter-spacing: .08em; text-transform: uppercase; }
}

.nav { display: flex; align-items: center; gap: .3rem; }
.nav a {
  padding: .6rem .9rem; border-radius: 999px;
  font-size: .95rem; color: var(--muted);
  white-space: nowrap;
  transition: color .2s var(--ease), background .2s var(--ease);
}
/* De knop in de nav is bedoeld voor het mobiele uitklapmenu */
@media (min-width: 1000px) { .nav > .btn { display: none; } }
@media (min-width: 1000px) and (max-width: 1199px) {
  .nav a { padding: .6rem .62rem; font-size: .9rem; }
}
.nav a:hover { color: var(--text); background: var(--wash-2); }
.nav a.is-active { color: var(--text); }
.nav a.is-active::after {
  content: ""; display: block; height: 2px; width: 18px; margin: .25rem auto 0;
  background: var(--glass); border-radius: 2px;
}
.header__cta { display: flex; align-items: center; gap: .6rem; flex: none; }
.header__tel {
  display: none; align-items: center; gap: .5rem;
  font-weight: 600; font-size: .95rem; color: var(--text);
  padding: .6rem .9rem; border-radius: 999px; border: 1px solid var(--line);
}
.header__tel:hover { border-color: var(--glass-line); color: var(--glass); }
.header__tel svg { width: 16px; height: 16px; }
@media (min-width: 1240px) { .header__tel { display: inline-flex; } }

/* Op smalle schermen doet de vaste actiebalk onderin dit werk al */
@media (max-width: 759px) { .header__cta > .btn { display: none; } }

.burger {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 44px; height: 44px; padding: 0 11px;
  background: var(--wash); border: 1px solid var(--line);
  border-radius: 12px; cursor: pointer;
}
.burger span { display: block; height: 2px; background: var(--text); border-radius: 2px; transition: transform .3s var(--ease), opacity .2s; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (min-width: 1000px) { .burger { display: none; } }

@media (max-width: 999px) {
  .nav {
    position: fixed; inset: 78px 0 auto 0;
    flex-direction: column; align-items: stretch; gap: .2rem;
    background: var(--ink); /* dekkend: het menu mag nooit doorschijnen */
    padding: 1rem var(--gutter) 2rem;
    border-bottom: 1px solid var(--line);
    transform: translateY(-12px); opacity: 0; pointer-events: none;
    transition: opacity .25s var(--ease), transform .25s var(--ease);
  }
  .nav.is-open { transform: translateY(0); opacity: 1; pointer-events: auto; }
  .nav a { padding: .95rem .6rem; font-size: 1.05rem; border-bottom: 1px solid var(--line); border-radius: 0; }
  .nav a.btn--primary { color: var(--on-accent); border-bottom: 0; border-radius: 999px; padding: 1rem 1.5rem; }
  .nav a.is-active::after { margin-left: 0; }
  .nav .btn { margin-top: 1rem; }
}

/* ---------- Hero ----------
   De hero houdt in élke kleurstijl een donkere waas over de foto. Dat geeft
   de kop het meeste contrast en laat de bus eruit springen, ook wanneer de
   rest van de site licht is. De tekst in de hero is daarom altijd licht.
   ------------------------------------------------------------------------ */
.hero {
  position: relative;
  min-height: min(92vh, 820px);
  display: grid; align-items: center;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  --hero-shade: 8 9 11;
  --hero-text: #f4f7fb;
  --hero-muted: rgba(255, 255, 255, .84);
  --hero-accent: #cfe4f7;          /* terugval voor oudere browsers */
  --hero-accent: color-mix(in srgb, rgb(var(--accent-rgb)) 55%, #ffffff);
}
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media img {
  width: 100%; height: 100%; object-fit: cover; object-position: 60% 55%;
  filter: grayscale(.18) contrast(1.03) brightness(.92);
  transform: scale(1.04);
}
.hero__media::after {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(92% 72% at 20% 45%, rgb(var(--hero-shade) / .86) 0%, rgb(var(--hero-shade) / .6) 48%, rgb(var(--hero-shade) / .16) 80%),
    linear-gradient(180deg, rgb(var(--hero-shade) / .7) 0%, rgb(var(--hero-shade) / .18) 35%, rgb(var(--hero-shade) / .82) 100%);
}
/* padding-block, niet de shorthand: anders vervalt de zijmarge van .wrap */
.hero__inner { position: relative; z-index: 1; padding-block: clamp(5rem, 12vw, 8rem) clamp(3.5rem, 8vw, 6rem); }
.hero__content { max-width: 47rem; }
.hero h1 { text-wrap: balance; color: var(--hero-text); }
.hero h1 em {
  font-style: normal;
  white-space: nowrap;              /* "multivan-look" nooit afbreken */
  color: var(--hero-accent);
}
.hero .eyebrow { color: var(--hero-accent); }
.hero .eyebrow::before, .hero .eyebrow::after { background: rgba(255, 255, 255, .35); }
.hero__sub { font-size: clamp(1.05rem, 1.8vw, 1.25rem); color: var(--hero-muted); max-width: 52ch; }
.hero .btn--ghost {
  color: #ffffff;
  border-color: rgba(255, 255, 255, .38);
  background: rgba(255, 255, 255, .08);
}
.hero .btn--ghost:hover { border-color: #ffffff; background: rgba(255, 255, 255, .16); }
.hero__actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }
.hero__badges {
  display: flex; flex-wrap: wrap; gap: .6rem 1.6rem;
  margin-top: 2.6rem; padding-top: 1.6rem;
  border-top: 1px solid rgba(255, 255, 255, .22);
  list-style: none; padding-left: 0;
}
.hero__badges li {
  display: flex; align-items: center; gap: .55rem;
  font-size: .9rem; color: var(--hero-muted); font-weight: 500;
}
.hero__badges svg { width: 17px; height: 17px; color: var(--hero-accent); flex: none; }

.hero__scroll {
  position: absolute; left: 50%; bottom: 1.6rem; transform: translateX(-50%);
  z-index: 2; font-size: .72rem; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(255, 255, 255, .6);
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
}
.hero__scroll::after {
  content: ""; width: 1px; height: 34px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .5), transparent);
  animation: drip 2.4s var(--ease) infinite;
}
@keyframes drip { 0%, 100% { opacity: .3; transform: scaleY(.6); } 50% { opacity: 1; transform: scaleY(1); } }

/* Page hero (subpages) */
.pagehero {
  position: relative;
  padding: clamp(3.5rem, 8vw, 6rem) 0 clamp(2.5rem, 5vw, 4rem);
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(70% 120% at 12% 0%, rgb(var(--accent2-rgb) / .16) 0%, transparent 60%),
    linear-gradient(180deg, var(--ink-2), var(--ink));
}
.pagehero h1 { font-size: clamp(2.1rem, 5vw, 3.3rem); }
.pagehero .lead { margin-bottom: 0; }
.crumbs { font-size: .85rem; color: var(--muted-2); margin-bottom: 1.2rem; }
.crumbs a:hover { color: var(--glass); }
.crumbs span { opacity: .5; margin: 0 .45rem; }

/* ---------- Marquee / logo strip ---------- */
.strip {
  border-block: 1px solid var(--line);
  background: var(--wash);
  padding: 1.1rem 0;
  overflow: hidden;
}
.strip__track {
  display: flex; gap: 3.2rem; align-items: center; width: max-content;
  animation: slide 34s linear infinite;
}
.strip__track span {
  display: inline-flex; align-items: center; gap: .6rem;
  font-size: .86rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted-2); white-space: nowrap;
}
.strip__track span::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--glass); opacity: .7; }
@keyframes slide { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .strip__track { animation: none; } }

/* ---------- Grids & cards ---------- */
.grid { display: grid; gap: 1.2rem; }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(275px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.card {
  position: relative;
  background: linear-gradient(160deg, var(--panel) 0%, var(--ink-2) 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 2.5vw, 2rem);
  transition: transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
  overflow: hidden;
}
.card::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 0% 0%, rgb(var(--accent-rgb) / .1), transparent 55%);
  opacity: 0; transition: opacity .35s var(--ease);
  pointer-events: none;
}
.card:hover { transform: translateY(-5px); border-color: var(--glass-line); box-shadow: var(--shadow-sm); }
.card:hover::before { opacity: 1; }
.card h3 { margin-bottom: .5rem; }
.card p { margin-bottom: 0; font-size: .97rem; }
.card__icon {
  width: 46px; height: 46px; border-radius: 13px;
  display: grid; place-items: center;
  background: var(--glass-dim); border: 1px solid var(--glass-line);
  color: var(--glass); margin-bottom: 1.1rem;
}
.card__icon svg { width: 22px; height: 22px; }

/* Split section */
.split {
  display: grid; gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 900px) {
  .split { grid-template-columns: 1.05fr 1fr; }
  .split--flip .split__media { order: -1; }
}
.split__media {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--line); box-shadow: var(--shadow);
}
.split__media img { width: 100%; height: auto; object-fit: cover; aspect-ratio: 4 / 3; }
.split__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(200deg, rgb(var(--accent-rgb) / .12), transparent 45%);
}
.split__tag {
  position: absolute; left: 1rem; bottom: 1rem; z-index: 2;
  background: rgb(var(--shade) / .82); backdrop-filter: blur(8px);
  border: 1px solid var(--line-strong); border-radius: 999px;
  padding: .5rem 1rem; font-size: .82rem; font-weight: 600;
}

.checklist { list-style: none; padding: 0; margin: 0 0 1.8rem; display: grid; gap: .75rem; }
.checklist li { display: flex; gap: .8rem; align-items: flex-start; color: var(--muted); }
.checklist svg { width: 20px; height: 20px; flex: none; margin-top: 2px; color: var(--glass); }
.checklist strong { color: var(--text); font-weight: 600; }

/* ---------- Stats ---------- */
.stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
}
.stats div { background: var(--ink-2); padding: 1.6rem 1.2rem; text-align: center; }
.stats b {
  display: block; font-family: var(--font-display); font-size: clamp(1.7rem, 3vw, 2.3rem);
  letter-spacing: -.02em; margin-bottom: .2rem;
}
.stats span { font-size: .85rem; color: var(--muted-2); }

/* ---------- Compare table ---------- */
.compare { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); }
.compare table { width: 100%; min-width: 560px; border-collapse: collapse; }
.compare th, .compare td { padding: 1rem 1.2rem; text-align: left; border-bottom: 1px solid var(--line); font-size: .96rem; }
.compare thead th { background: var(--panel-2); font-family: var(--font-display); font-size: .9rem; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.compare thead th:nth-child(2) { color: var(--glass); }
.compare tbody tr:last-child td { border-bottom: 0; }
.compare td:first-child { color: var(--text); font-weight: 500; }
.compare td { color: var(--muted); }
.compare .yes { color: var(--glass); font-weight: 600; }
.compare .no { color: var(--danger); }

/* ---------- Steps ---------- */
.steps { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); counter-reset: step; }
.step {
  position: relative; padding: 1.8rem 1.5rem 1.6rem;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: linear-gradient(160deg, var(--panel), var(--ink-2));
}
.step::before {
  counter-increment: step; content: "0" counter(step);
  font-family: var(--font-display); font-size: 2.4rem; font-weight: 700;
  color: transparent; -webkit-text-stroke: 1.5px rgb(var(--accent-rgb) / .5);
  display: block; margin-bottom: .7rem; line-height: 1;
}
.step h3 { font-size: 1.1rem; margin-bottom: .4rem; }
.step p { font-size: .93rem; margin: 0; }

/* ---------- Van picker (SVG) ---------- */
.vanpick {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: linear-gradient(160deg, var(--panel), var(--ink-2));
  padding: clamp(1.2rem, 3vw, 2rem);
}
.vanpick__head { display: flex; flex-wrap: wrap; gap: .6rem 1.2rem; justify-content: space-between; align-items: baseline; margin-bottom: 1.2rem; }
.vanpick__head h3 { margin: 0; }
.vanpick__count { font-size: .88rem; color: var(--muted-2); }
.vanpick__count b { color: var(--glass); }
.van { width: 100%; height: auto; }
.van .body { fill: var(--panel-2); stroke: var(--line-strong); stroke-width: 2; }
.van .detail { fill: none; stroke: var(--line-strong); stroke-width: 2; }
.van .wheel { fill: var(--panel-2); stroke: var(--line-strong); stroke-width: 2; }
.van .rim { fill: var(--line-strong); }
.van .zone {
  fill: rgb(var(--accent-rgb) / .08);
  stroke: var(--glass-line); stroke-width: 2; stroke-dasharray: 6 5;
  cursor: pointer; transition: fill .25s var(--ease), stroke .25s var(--ease);
}
.van .zone:hover { fill: rgb(var(--accent-rgb) / .22); }
.van .zone.is-on {
  fill: rgb(var(--accent-rgb) / .55);
  stroke: var(--glass); stroke-dasharray: none;
}
.van .zlabel { fill: var(--muted); font-size: 13px; font-family: var(--font-body); pointer-events: none; }
.van .zone.is-on + .zlabel { fill: var(--on-accent); font-weight: 700; }
.vanpick__legend { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.2rem; }
.chip {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .45rem .85rem; border-radius: 999px;
  border: 1px solid var(--line); background: var(--wash);
  font-size: .85rem; color: var(--muted); cursor: pointer;
  transition: all .2s var(--ease);
}
.chip:hover { border-color: var(--glass-line); color: var(--text); }
.chip.is-on { background: var(--glass-dim); border-color: var(--glass); color: var(--text); }
.chip__dot { width: 8px; height: 8px; border-radius: 50%; border: 1px solid var(--glass-line); }
.chip.is-on .chip__dot { background: var(--glass); border-color: var(--glass); }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: .7rem; }
.faq details {
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--ink-2); overflow: hidden;
  transition: border-color .25s var(--ease);
}
.faq details[open] { border-color: var(--glass-line); }
.faq summary {
  cursor: pointer; list-style: none;
  padding: 1.15rem 1.3rem; font-weight: 600;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; width: 11px; height: 11px; flex: none;
  border-right: 2px solid var(--glass); border-bottom: 2px solid var(--glass);
  transform: rotate(45deg) translateY(-2px); transition: transform .3s var(--ease);
}
.faq details[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.faq .faq__body { padding: 0 1.3rem 1.3rem; }
.faq .faq__body p:last-child { margin-bottom: 0; }

/* ---------- CTA band ---------- */
.cta {
  position: relative; overflow: hidden;
  border: 1px solid var(--glass-line); border-radius: var(--radius-lg);
  background:
    radial-gradient(80% 140% at 85% 20%, rgb(var(--accent2-rgb) / .28), transparent 60%),
    linear-gradient(150deg, var(--panel), var(--ink-2));
  padding: clamp(2.2rem, 5vw, 3.6rem);
  display: grid; gap: 1.6rem; align-items: center;
}
@media (min-width: 860px) { .cta { grid-template-columns: 1.4fr auto; } }
.cta h2 { margin-bottom: .5rem; }
.cta p { margin-bottom: 0; max-width: 52ch; }
.cta__actions { display: flex; flex-wrap: wrap; gap: .8rem; }

/* ---------- Forms ---------- */
.formwrap {
  display: grid; gap: clamp(1.6rem, 4vw, 3rem);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 980px) { .formwrap { grid-template-columns: 1.55fr .95fr; } }

.form {
  background: linear-gradient(165deg, var(--panel), var(--ink-2));
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: clamp(1.4rem, 3.5vw, 2.6rem);
  box-shadow: var(--shadow);
}
.fieldset { border: 0; padding: 0; margin: 0 0 2rem; }
.fieldset:last-of-type { margin-bottom: 1.4rem; }
.fieldset > legend {
  font-family: var(--font-display); font-weight: 700; font-size: 1.05rem;
  padding: 0; margin-bottom: .3rem;
  display: flex; align-items: center; gap: .6rem;
}
.fieldset > legend::before {
  content: attr(data-step);
  width: 26px; height: 26px; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--glass-dim); border: 1px solid var(--glass-line);
  color: var(--glass); font-size: .8rem; font-family: var(--font-body);
}
.fieldset > .hint { margin: 0 0 1.2rem 2.15rem; font-size: .9rem; color: var(--muted-2); }

.row { display: grid; gap: 1rem; }
.row--2 { grid-template-columns: 1fr; }
.row--3 { grid-template-columns: 1fr; }
@media (min-width: 620px) {
  .row--2 { grid-template-columns: 1fr 1fr; }
  .row--3 { grid-template-columns: .8fr .5fr 1fr; }
}
.field { display: flex; flex-direction: column; gap: .4rem; margin-bottom: 1rem; }
.field label { font-size: .87rem; font-weight: 600; color: var(--muted); letter-spacing: .01em; }
.field .req { color: var(--glass); }
.field input, .field select, .field textarea {
  background: var(--wash);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: .85rem 1rem;
  color: var(--text);
  transition: border-color .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease);
  width: 100%;
}
.field textarea { min-height: 130px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--muted-2); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--glass);
  background: rgb(var(--accent-rgb) / .06);
  box-shadow: 0 0 0 4px rgb(var(--accent-rgb) / .12);
}
.field select { appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236fc0f2' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .9rem center; background-size: 17px;
  padding-right: 2.6rem;
}
.field select option { background: var(--panel); }
.err { font-size: .82rem; color: var(--danger); display: none; }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--danger); }
.field.has-error .err,
.options.has-error .err { display: block; }

/* Radio / checkbox cards */
.options { display: grid; gap: .7rem; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); margin-bottom: 1rem; }
.opt { position: relative; }
.opt input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.opt span {
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: .1rem .7rem;
  padding: .95rem 1.1rem;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--wash);
  font-size: .95rem; font-weight: 500;
  transition: all .22s var(--ease);
  height: 100%;
}
.opt span::before {
  content: ""; width: 18px; height: 18px; flex: none;
  border: 1.5px solid var(--line-strong); border-radius: 50%;
  transition: all .22s var(--ease);
  grid-column: 1; grid-row: 1 / 3; align-self: center;
}
.opt input[type="checkbox"] + span::before { border-radius: 6px; }
.opt input:checked + span {
  border-color: var(--glass); background: var(--glass-dim); color: var(--text);
}
.opt input:checked + span::before {
  border-color: var(--glass); background: var(--glass);
  box-shadow: inset 0 0 0 3px var(--panel);
}
.opt input:focus-visible + span { outline: 2px solid var(--glass); outline-offset: 3px; }
.opt small { grid-column: 2; color: var(--muted-2); font-weight: 400; font-size: .82rem; line-height: 1.35; }
.timegrid .opt span { grid-template-columns: 1fr; }

.timegrid { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
.timegrid .opt span { justify-content: center; padding: .75rem .6rem; font-variant-numeric: tabular-nums; }
.timegrid .opt span::before { display: none; }

.form__foot { border-top: 1px solid var(--line); padding-top: 1.5rem; margin-top: .5rem; }
.form__foot .btn { margin-bottom: .9rem; }
.form__note { font-size: .85rem; color: var(--muted-2); margin: 0; }
.form__note a { color: var(--glass); }
.hp { position: absolute; left: -9999px; opacity: 0; height: 0; }

.formstatus {
  display: none;
  border-radius: var(--radius-sm); padding: 1rem 1.2rem; margin-bottom: 1.4rem;
  border: 1px solid var(--glass-line); background: var(--glass-dim);
  font-size: .95rem;
}
.formstatus.is-shown { display: block; }
.formstatus.is-error { border-color: var(--danger); background: rgb(var(--danger-rgb) / .12); }

/* Aside panels */
.aside { display: grid; gap: 1rem; position: sticky; top: 100px; }
@media (max-width: 979px) { .aside { position: static; } }
.panel {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: linear-gradient(160deg, var(--panel), var(--ink-2));
  padding: 1.5rem;
}
.panel h3 { font-size: 1.05rem; margin-bottom: .8rem; }
.panel p:last-child { margin-bottom: 0; }
.panel--accent { border-color: var(--glass-line); background: linear-gradient(160deg, rgb(var(--accent2-rgb) / .14), var(--ink-2)); }

.contactlist { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; }
.contactlist li { display: flex; gap: .9rem; align-items: flex-start; }
.contactlist svg { width: 20px; height: 20px; color: var(--glass); flex: none; margin-top: 3px; }
.contactlist b { display: block; font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted-2); font-weight: 600; }
.contactlist a:hover { color: var(--glass); }

/* ---------- Map ---------- */
.mapframe {
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  aspect-ratio: 16 / 9; background: var(--panel);
}
.mapframe iframe { width: 100%; height: 100%; border: 0; }

/* ---------- Footer ---------- */
.footer {
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, var(--ink), var(--ink-2));
  padding: clamp(3rem, 6vw, 4.5rem) 0 2rem;
}
.footer__grid { display: grid; gap: 2.2rem; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.footer__brand img { height: 58px; margin-bottom: 1.1rem; }
.footer__brand p { font-size: .93rem; max-width: 34ch; }
.footer h4 {
  font-family: var(--font-display); font-size: .82rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted-2); margin: 0 0 1rem;
}
.footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.footer a { color: var(--muted); font-size: .95rem; }
.footer a:hover { color: var(--glass); }
.footer__bottom {
  margin-top: 2.6rem; padding-top: 1.4rem; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: .8rem 1.4rem; justify-content: space-between;
  font-size: .85rem; color: var(--muted-2);
}
.socials { display: flex; gap: .6rem; }
.socials a {
  width: 40px; height: 40px; border-radius: 12px;
  display: grid; place-items: center;
  border: 1px solid var(--line); background: var(--wash);
  transition: all .22s var(--ease);
}
.socials a:hover { border-color: var(--glass-line); background: var(--glass-dim); transform: translateY(-2px); }
.socials svg { width: 18px; height: 18px; }

/* ---------- Mobile sticky action bar ---------- */
.actionbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: .6rem; padding: .7rem var(--gutter) calc(.7rem + env(safe-area-inset-bottom));
  background: rgb(var(--shade) / .92); backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
}
.actionbar .btn { padding: .8rem 1rem; font-size: .92rem; }
@media (min-width: 760px) { .actionbar { display: none; } }
@media (max-width: 759px) { body { padding-bottom: 74px; } }

/* ---------- Reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  html { scroll-behavior: auto; }
}



/* =========================================================
   Kleurstijlen
   Twaalf paletten: zes lichte en zes donkere. De lichte stijl
   "Helder" is de standaard en staat in :root. Zet een andere
   stijl op <html data-thema="..."> en de hele site kleurt mee.
   Zodra de keuze vast is: die waarden naar :root verplaatsen,
   de rest van dit blok en de kiezer weggooien.
   ========================================================= */

/* ---------------- LICHT ---------------- */

/* Zand: warm crème met terracotta */
[data-thema="zand"] {
  --ink: #fdfaf5; --ink-2: #f4ece1; --panel: #ffffff; --panel-2: #efe5d8;
  --line: rgba(72, 54, 36, .16); --line-strong: rgba(72, 54, 36, .30);
  --shade: 253 250 245;
  --wash: rgba(72, 54, 36, .04); --wash-2: rgba(72, 54, 36, .08);
  --text: #2a221a; --muted: #57493c; --muted-2: #7a6d5e;
  --accent-rgb: 178 88 48; --accent2-rgb: 140 62 30; --on-accent: #ffffff;
  --photo-filter: sepia(.14) contrast(1.02) brightness(1.02);
  --shadow: 0 24px 60px rgba(72, 54, 36, .16);
  --shadow-sm: 0 10px 28px rgba(72, 54, 36, .12);
}

/* Mist: koel lichtgrijs met staalblauw */
[data-thema="mist"] {
  --ink: #f7f9fb; --ink-2: #e9eff6; --panel: #ffffff; --panel-2: #e1e9f2;
  --line: rgba(30, 41, 59, .15); --line-strong: rgba(30, 41, 59, .28);
  --shade: 247 249 251;
  --wash: rgba(30, 41, 59, .04); --wash-2: rgba(30, 41, 59, .08);
  --text: #1b2536; --muted: #47546a; --muted-2: #67748a;
  --accent-rgb: 63 100 148; --accent2-rgb: 40 70 110; --on-accent: #ffffff;
}

/* Salie: zacht groen, rustig en natuurlijk */
[data-thema="salie"] {
  --ink: #f8faf7; --ink-2: #e9f1ea; --panel: #ffffff; --panel-2: #e1ebe2;
  --line: rgba(28, 50, 38, .15); --line-strong: rgba(28, 50, 38, .28);
  --shade: 248 250 247;
  --wash: rgba(28, 50, 38, .04); --wash-2: rgba(28, 50, 38, .08);
  --text: #17251d; --muted: #44554a; --muted-2: #64756a;
  --accent-rgb: 47 118 84; --accent2-rgb: 30 88 60; --on-accent: #ffffff;
}

/* Perkament: ivoor met bordeaux, klassiek */
[data-thema="perkament"] {
  --ink: #fdfbf7; --ink-2: #f3ece2; --panel: #ffffff; --panel-2: #ece2d5;
  --line: rgba(60, 40, 40, .16); --line-strong: rgba(60, 40, 40, .30);
  --shade: 253 251 247;
  --wash: rgba(60, 40, 40, .04); --wash-2: rgba(60, 40, 40, .08);
  --text: #2b1f1f; --muted: #574646; --muted-2: #7a6868;
  --accent-rgb: 150 46 62; --accent2-rgb: 112 28 44; --on-accent: #ffffff;
  --photo-filter: sepia(.10) contrast(1.02) brightness(1.02);
}

/* Hemel: fris wit met diep turkoois */
[data-thema="hemel"] {
  --ink: #f9fcfd; --ink-2: #e7f2f5; --panel: #ffffff; --panel-2: #dcecf0;
  --line: rgba(12, 50, 60, .15); --line-strong: rgba(12, 50, 60, .28);
  --shade: 249 252 253;
  --wash: rgba(12, 50, 60, .04); --wash-2: rgba(12, 50, 60, .08);
  --text: #0e2830; --muted: #3d5960; --muted-2: #5d7780;
  --accent-rgb: 13 126 145; --accent2-rgb: 8 92 107; --on-accent: #ffffff;
}

/* Krijt: lichtgrijs met bijna zwart accent, strak en zakelijk */
[data-thema="krijt"] {
  --ink: #fafafa; --ink-2: #eeeeef; --panel: #ffffff; --panel-2: #e6e6e8;
  --line: rgba(20, 20, 24, .15); --line-strong: rgba(20, 20, 24, .30);
  --shade: 250 250 250;
  --wash: rgba(20, 20, 24, .04); --wash-2: rgba(20, 20, 24, .08);
  --text: #141418; --muted: #4a4a52; --muted-2: #6b6b74;
  --accent-rgb: 45 45 52; --accent2-rgb: 22 22 26; --on-accent: #ffffff;
  --photo-filter: grayscale(.35) contrast(1.04) brightness(1.02);
}

/* ---------------- DONKER ---------------- */

/* Nacht: diepblauw met ijsblauw */
[data-thema="nacht"] {
  --ink: #070a12; --ink-2: #0b1020; --panel: #101627; --panel-2: #151d33;
  --line: rgba(255, 255, 255, .10); --line-strong: rgba(255, 255, 255, .20);
  --shade: 7 10 18;
  --wash: rgba(255, 255, 255, .04); --wash-2: rgba(255, 255, 255, .07);
  --text: #eef1f8; --muted: #a7b0c6; --muted-2: #7b849c;
  --accent-rgb: 122 170 255; --accent2-rgb: 62 108 214; --on-accent: #04101f;
  --photo-filter: grayscale(.25) contrast(1.05) brightness(.8);
  --shadow: 0 24px 60px rgba(0, 0, 0, .45);
  --shadow-sm: 0 10px 30px rgba(0, 0, 0, .35);
}

/* Antraciet: zwart met champagnegoud */
[data-thema="antraciet"] {
  --ink: #0a0a09; --ink-2: #101010; --panel: #161614; --panel-2: #1d1c19;
  --line: rgba(255, 255, 255, .10); --line-strong: rgba(255, 255, 255, .20);
  --shade: 10 10 9;
  --wash: rgba(255, 255, 255, .04); --wash-2: rgba(255, 255, 255, .07);
  --text: #f6f3ec; --muted: #b6af9f; --muted-2: #877f70;
  --accent-rgb: 216 181 107; --accent2-rgb: 168 132 62; --on-accent: #1a1405;
  --photo-filter: grayscale(.2) contrast(1.05) brightness(.82);
  --shadow: 0 24px 60px rgba(0, 0, 0, .5);
  --shadow-sm: 0 10px 30px rgba(0, 0, 0, .4);
}

/* Grafiet: neutraal donkergrijs met zilverblauw */
[data-thema="grafiet"] {
  --ink: #0c0d0f; --ink-2: #131519; --panel: #191c21; --panel-2: #20242a;
  --line: rgba(255, 255, 255, .10); --line-strong: rgba(255, 255, 255, .20);
  --shade: 12 13 15;
  --wash: rgba(255, 255, 255, .04); --wash-2: rgba(255, 255, 255, .07);
  --text: #f0f2f5; --muted: #aab2bd; --muted-2: #7e8794;
  --accent-rgb: 198 209 222; --accent2-rgb: 138 152 168; --on-accent: #0d1116;
  --photo-filter: grayscale(.4) contrast(1.06) brightness(.82);
  --shadow: 0 24px 60px rgba(0, 0, 0, .45);
  --shadow-sm: 0 10px 30px rgba(0, 0, 0, .35);
}

/* Smaragd: donker met helder groen */
[data-thema="smaragd"] {
  --ink: #050908; --ink-2: #0a1110; --panel: #0e1817; --panel-2: #131f1d;
  --line: rgba(255, 255, 255, .10); --line-strong: rgba(255, 255, 255, .20);
  --shade: 5 9 8;
  --wash: rgba(255, 255, 255, .04); --wash-2: rgba(255, 255, 255, .07);
  --text: #eef5f2; --muted: #a1b5ae; --muted-2: #74877f;
  --accent-rgb: 52 211 153; --accent2-rgb: 16 150 110; --on-accent: #03150e;
  --photo-filter: grayscale(.25) contrast(1.05) brightness(.82);
  --shadow: 0 24px 60px rgba(0, 0, 0, .45);
  --shadow-sm: 0 10px 30px rgba(0, 0, 0, .35);
}

/* Koper: warm oranje op zwart */
[data-thema="koper"] {
  --ink: #0a0806; --ink-2: #100c09; --panel: #17110c; --panel-2: #1e1710;
  --line: rgba(255, 255, 255, .10); --line-strong: rgba(255, 255, 255, .20);
  --shade: 10 8 6;
  --wash: rgba(255, 255, 255, .04); --wash-2: rgba(255, 255, 255, .07);
  --text: #f7f1ea; --muted: #b9aa9b; --muted-2: #8a7c6e;
  --accent-rgb: 232 137 74; --accent2-rgb: 190 96 40; --on-accent: #1a0c03;
  --photo-filter: sepia(.2) contrast(1.05) brightness(.85);
  --shadow: 0 24px 60px rgba(0, 0, 0, .45);
  --shadow-sm: 0 10px 30px rgba(0, 0, 0, .35);
}

/* Bordeaux: donkerrood, stevig en sportief */
[data-thema="bordeaux"] {
  --ink: #0a0607; --ink-2: #110a0c; --panel: #190f12; --panel-2: #201418;
  --line: rgba(255, 255, 255, .10); --line-strong: rgba(255, 255, 255, .20);
  --shade: 10 6 7;
  --wash: rgba(255, 255, 255, .04); --wash-2: rgba(255, 255, 255, .07);
  --text: #f7edef; --muted: #bda6ab; --muted-2: #8c777c;
  --accent-rgb: 232 106 124; --accent2-rgb: 176 40 62; --on-accent: #1c0409;
  --photo-filter: grayscale(.2) contrast(1.05) brightness(.82);
  --shadow: 0 24px 60px rgba(0, 0, 0, .45);
  --shadow-sm: 0 10px 30px rgba(0, 0, 0, .35);
}

/* Correcties die alleen voor de donkere stijlen gelden */
[data-thema="nacht"] .mapframe iframe,
[data-thema="antraciet"] .mapframe iframe,
[data-thema="grafiet"] .mapframe iframe,
[data-thema="smaragd"] .mapframe iframe,
[data-thema="koper"] .mapframe iframe,
[data-thema="bordeaux"] .mapframe iframe {
  filter: grayscale(.4) invert(.92) hue-rotate(180deg) contrast(.9);
}

/* ---------- Kleurstijl kiezen (alleen in de voorbeeldversie) ---------- */
.styles { text-align: center; }
.styles__label {
  font-size: .74rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--muted-2); margin: 1.6rem 0 .9rem;
}
.styles__row {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1.1rem .6rem; max-width: 760px; margin: 0 auto;
}
@media (min-width: 640px) { .styles__row { grid-template-columns: repeat(6, 1fr); } }
.swatch {
  display: flex; flex-direction: column; align-items: center; gap: .55rem;
  background: none; border: 0; padding: .3rem; cursor: pointer;
  color: var(--muted); font-size: .82rem; font-weight: 500;
  transition: color .2s var(--ease), transform .2s var(--ease);
}
.swatch:hover { color: var(--text); transform: translateY(-3px); }
.swatch__dot {
  width: 54px; height: 54px; border-radius: 50%;
  background: linear-gradient(135deg, var(--sw-bg) 0 52%, var(--sw-accent) 52% 100%);
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-sm);
  transition: box-shadow .25s var(--ease), transform .25s var(--ease);
}
.swatch:hover .swatch__dot { transform: scale(1.08); }
.swatch[aria-pressed="true"] { color: var(--text); font-weight: 700; }
.swatch[aria-pressed="true"] .swatch__dot {
  box-shadow: 0 0 0 3px var(--ink), 0 0 0 5px var(--glass);
}
.styles__current { font-size: .95rem; color: var(--muted); margin-top: 1.8rem; }
.styles__current b { color: var(--text); }
.styles__note {
  font-size: .88rem; color: var(--muted-2); max-width: 58ch;
  margin: .5rem auto 0;
}

/* De kiezer staat altijd gecentreerd, ook als .center ontbreekt */
.styles .lead { margin-inline: auto; }
.styles .eyebrow::after {
  content: ""; width: 26px; height: 1px; background: var(--glass-line);
}

/* =========================================================
   Verfijningen: micro-interacties en animaties
   Alles hieronder is versiering. Zet een bezoeker
   "beperk bewegingen" aan in het systeem, dan valt het
   netjes stil (zie het blok onderaan).
   ========================================================= */

/* ---------- Tekstlinks in lopende tekst ---------- */
.prose-link, .faq__body a, .card p a, .panel p a {
  color: var(--glass);
  background-image: linear-gradient(var(--glass), var(--glass));
  background-size: 0% 1px; background-repeat: no-repeat; background-position: 0 100%;
  transition: background-size .3s var(--ease);
}
.prose-link:hover, .faq__body a:hover, .card p a:hover, .panel p a:hover { background-size: 100% 1px; }

/* ---------- Knoppen: glans die één keer overtrekt ---------- */
.btn--primary { position: relative; overflow: hidden; isolation: isolate; }
.btn--primary::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.28) 50%, transparent 65%);
  transform: translateX(-120%);
  transition: transform .7s var(--ease);
}
.btn--primary:hover::after { transform: translateX(120%); }
.btn svg { transition: transform .3s var(--ease); }
.btn--primary:hover svg { transform: translateX(3px); }

/* ---------- Header krimpt zodra je scrolt ---------- */
.header__inner { transition: height .35s var(--ease); }
.header.is-stuck .header__inner { height: 66px; }
.brand img { transition: height .35s var(--ease); }
.header.is-stuck .brand img { height: 38px; }

/* ---------- Kaarten ---------- */
.card { will-change: transform; }
.card__icon { transition: transform .35s var(--ease), background .35s var(--ease); }
.card:hover .card__icon { transform: translateY(-2px) scale(1.06); background: var(--glass-line); }
a.card { display: block; }
a.card:hover h3 { color: var(--glass); }
.card h3 { transition: color .25s var(--ease); }

/* ---------- Cijfers die oplopen ---------- */
.stats b { font-variant-numeric: tabular-nums; }

/* ---------- Vraag en antwoord ---------- */
.faq details[open] .faq__body { animation: faqIn .3s var(--ease) both; }
@keyframes faqIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
.faq summary { transition: color .2s var(--ease), background .2s var(--ease); }
.faq summary:hover { background: var(--wash); }

/* ---------- Voor en na: schuif over de bus ---------- */
.ba {
  position: relative; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: linear-gradient(160deg, var(--panel), var(--ink-2));
  box-shadow: var(--shadow);
  touch-action: pan-y;
  --pos: 50%;
}
.ba__laag { display: block; width: 100%; }
.ba__laag--na {
  position: absolute; inset: 0;
  clip-path: inset(0 0 0 var(--pos));
}
.ba__greep {
  position: absolute; top: 0; bottom: 0; left: var(--pos);
  width: 2px; background: var(--glass);
  transform: translateX(-1px);
  /* De greep is puur visueel: klikken en slepen gaat naar de schuifbalk eronder */
  pointer-events: none;
}
.ba__greep::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 44px; height: 44px; transform: translate(-50%, -50%);
  border-radius: 50%; background: var(--glass);
  box-shadow: 0 6px 20px rgb(var(--accent2-rgb) / .45);
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l-5 6 5 6M15 6l5 6-5 6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: 22px;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.ba:hover .ba__greep::after { transform: translate(-50%, -50%) scale(1.08); }
.ba input[type="range"] {
  position: absolute; inset: 0; width: 100%; height: 100%;
  margin: 0; opacity: 0; cursor: ew-resize;
  z-index: 3;                 /* boven de tekening, zodat elke klik hier landt */
  touch-action: pan-y;        /* horizontaal slepen stuurt de schuif, verticaal blijft scrollen */
  -webkit-appearance: none; appearance: none; background: transparent;
}
/* De duim vult de volle hoogte: overal in het vlak kun je pakken en slepen */
.ba input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 46px; height: 220px; cursor: ew-resize;
}
.ba input[type="range"]::-moz-range-thumb {
  width: 46px; height: 220px; border: 0; background: transparent; cursor: ew-resize;
}
.ba input[type="range"]:focus-visible ~ .ba__greep::after {
  box-shadow: 0 0 0 4px var(--ink), 0 0 0 7px var(--glass);
}
.ba__label {
  position: absolute; top: 1rem; z-index: 2;
  padding: .4rem .9rem; border-radius: 999px;
  font-size: .78rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  background: rgb(var(--shade) / .86); border: 1px solid var(--line-strong);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  pointer-events: none;
}
.ba__label--voor { left: 1rem; }
.ba__label--na { right: 1rem; color: var(--glass); border-color: var(--glass-line); }

/* ---------- Paneelkiezer: glas dat invalt ---------- */
.van .zone { transform-box: fill-box; transform-origin: center; }
.van .zone.is-on { animation: glasIn .45s var(--ease); }
@keyframes glasIn {
  0%   { transform: scale(.82) translateY(-6px); opacity: .2; }
  60%  { transform: scale(1.04) translateY(0); opacity: 1; }
  100% { transform: scale(1); }
}
.vanpick__count b { transition: color .2s var(--ease); }

/* Samenvatting die meegroeit met de keuze */
.keuzelijst {
  list-style: none; margin: 1rem 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .5rem;
  min-height: 34px;
}
.keuzelijst li {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .35rem .8rem; border-radius: 999px;
  background: var(--glass-dim); border: 1px solid var(--glass-line);
  font-size: .84rem; font-weight: 500;
  animation: chipIn .3s var(--ease) both;
}
.keuzelijst li::before {
  content: ""; width: 7px; height: 7px; border-radius: 2px; background: var(--glass);
}
.keuzelijst .keuzelijst__leeg {
  background: none; border: 1px dashed var(--line-strong); color: var(--muted-2);
}
.keuzelijst .keuzelijst__leeg::before { display: none; }
@keyframes chipIn {
  from { opacity: 0; transform: translateY(6px) scale(.96); }
  to   { opacity: 1; transform: none; }
}

/* ---------- Voortgang in het formulier ---------- */
.formsteps {
  display: flex; align-items: center; gap: .5rem;
  margin-bottom: 1.8rem; padding-bottom: 1.4rem;
  border-bottom: 1px solid var(--line);
  font-size: .85rem;
}
.formsteps span {
  display: inline-flex; align-items: center; gap: .5rem;
  color: var(--muted-2); transition: color .3s var(--ease);
}
.formsteps span::before {
  content: attr(data-nr);
  width: 24px; height: 24px; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--line-strong); font-size: .78rem;
  transition: all .3s var(--ease);
}
.formsteps span.is-actief { color: var(--text); font-weight: 600; }
.formsteps span.is-actief::before {
  background: var(--glass); border-color: var(--glass); color: var(--on-accent);
}
.formsteps i {
  flex: 1; height: 1px; background: var(--line); font-style: normal;
}
@media (max-width: 560px) { .formsteps span:not(.is-actief) { display: none; } }

/* ---------- Velden ---------- */
.field label { transition: color .2s var(--ease); }
.field:focus-within label { color: var(--glass); }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--line-strong); }
.opt span { will-change: transform; }
.opt input:focus-visible + span { outline: 2px solid var(--glass); outline-offset: 3px; }

/* ---------- Getrapt in beeld schuiven ---------- */
.reveal--stagger > * { opacity: 0; transform: translateY(18px); }
.reveal--stagger.is-in > * {
  animation: opkomen .6s var(--ease) both;
  animation-delay: calc(var(--i, 0) * 70ms);
}
@keyframes opkomen {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- Zachte parallax in de hero ---------- */
.hero__media img { will-change: transform; }

/* ---------- Rustig aan voor wie dat instelt ---------- */
@media (prefers-reduced-motion: reduce) {
  .reveal--stagger > * { opacity: 1; transform: none; animation: none; }
  .btn--primary::after { display: none; }
  .faq details[open] .faq__body { animation: none; }
  .van .zone.is-on { animation: none; }
  .keuzelijst li { animation: none; }
  .header.is-stuck .header__inner { height: 78px; }
  .header.is-stuck .brand img { height: 46px; }
}

/* ---------- Uitgesloten posities ----------
   Achterdeuren en achterklep gaan niet samen: wat niet kan,
   is duidelijk uitgeschakeld in plaats van stilletjes genegeerd. */
.van .zone.is-uit {
  pointer-events: none;
  opacity: .3;
  stroke-dasharray: 3 5;
}
.opt.is-uit span {
  opacity: .45;
  cursor: not-allowed;
  background: var(--wash);
}
.opt.is-uit input { cursor: not-allowed; }
.klephint {
  display: none;
  margin: .2rem 0 1rem;
  padding: .7rem 1rem;
  border-radius: var(--radius-sm);
  border: 1px dashed var(--line-strong);
  background: var(--wash);
  font-size: .87rem; color: var(--muted);
}
.klephint.is-zichtbaar { display: block; animation: faqIn .3s var(--ease) both; }

/* ---------- Uitklapmenu in de navigatie ---------- */
.nav__drop { position: relative; }
.nav__knop {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .6rem .9rem; border: 0; border-radius: 999px;
  background: none; color: var(--muted);
  font-size: .95rem; font-weight: 400; cursor: pointer;
  white-space: nowrap;
  transition: color .2s var(--ease), background .2s var(--ease);
}
.nav__knop svg { width: 15px; height: 15px; transition: transform .25s var(--ease); }
.nav__knop:hover { color: var(--text); background: var(--wash-2); }
.nav__knop.is-active { color: var(--text); }
.nav__drop.is-open .nav__knop { color: var(--text); }
.nav__drop.is-open .nav__knop svg { transform: rotate(180deg); }

.nav__menu {
  position: absolute; top: calc(100% + .5rem); left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 232px; padding: .5rem;
  background: var(--panel);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  display: grid; gap: .1rem;
  opacity: 0; pointer-events: none;
  transition: opacity .22s var(--ease), transform .22s var(--ease);
  z-index: 20;
}
.nav__drop.is-open .nav__menu { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.nav__menu a {
  padding: .6rem .8rem; border-radius: 8px;
  font-size: .93rem; color: var(--muted); white-space: nowrap;
}
.nav__menu a:hover { background: var(--glass-dim); color: var(--text); }
.nav__menu a.is-active { color: var(--glass); font-weight: 600; }
.nav__menu a.is-active::after { display: none; }

@media (max-width: 999px) {
  .nav__drop { width: 100%; }
  .nav__knop {
    width: 100%; justify-content: space-between;
    padding: .95rem .6rem; font-size: 1.05rem; border-radius: 0;
    border-bottom: 1px solid var(--line);
  }
  .nav__menu {
    position: static; transform: none; min-width: 0; box-shadow: none;
    border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
    padding: .3rem 0 .6rem .8rem;
    display: none; opacity: 1; pointer-events: auto;
  }
  .nav__drop.is-open .nav__menu { display: grid; transform: none; }
  .nav__menu a { border-bottom: 0; font-size: 1rem; }
}

/* ---------- Galerij ---------- */
.galerij {
  display: grid; gap: 1.2rem;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
}
.galerij__tegel {
  margin: 0; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: linear-gradient(160deg, var(--panel), var(--ink-2));
  transition: transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.galerij__tegel:hover {
  transform: translateY(-5px); border-color: var(--glass-line); box-shadow: var(--shadow-sm);
}
.galerij__tegel img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; cursor: zoom-in; }
.galerij__wacht {
  aspect-ratio: 16 / 10; display: grid; place-items: center;
  padding: 1.4rem; background: var(--ink-2);
}
.galerij__wacht .van { width: 100%; max-width: 320px; }
.galerij__tegel figcaption { padding: 1rem 1.2rem 1.2rem; display: grid; gap: .2rem; }
.galerij__tegel figcaption strong { font-family: var(--font-display); font-size: 1.02rem; }
.galerij__tegel figcaption span { font-size: .88rem; color: var(--muted-2); }

/* Vergrootglas over een foto in de galerij */
.lightbox {
  position: fixed; inset: 0; z-index: 200;
  display: none; place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(6, 8, 12, .88);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: faqIn .25s var(--ease);
}
.lightbox.is-open { display: grid; }
.lightbox img {
  max-width: min(1100px, 100%); max-height: 84vh;
  border-radius: var(--radius); box-shadow: 0 30px 80px rgba(0,0,0,.5);
}
.lightbox__bij {
  margin-top: 1rem; text-align: center; color: #e7ecf3; font-size: .95rem;
}
.lightbox__sluit {
  position: absolute; top: 1.2rem; right: 1.2rem;
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.28);
  color: #fff;
}
.lightbox__sluit:hover { background: rgba(255,255,255,.22); }
.lightbox__sluit svg { width: 20px; height: 20px; }

/* ---------- Bedankpagina ---------- */
.bedankt__vink {
  width: 74px; height: 74px; margin: 0 auto 1.6rem;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--glass-dim); border: 1px solid var(--glass-line);
  color: var(--glass);
  animation: vinkIn .5s var(--ease) both;
}
.bedankt__vink svg { width: 34px; height: 34px; }
@keyframes vinkIn {
  from { opacity: 0; transform: scale(.7); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .bedankt__vink, .lightbox { animation: none; }
}

/* =========================================================
   Terugvallen voor oudere browsers
   De site gebruikt moderne CSS. Waar dat op een oud toestel
   niet werkt, moet het nog steeds netjes ogen, niet stuk.
   ========================================================= */

/* Beeldverhoudingen: zonder aspect-ratio krijgen de vlakken een vaste hoogte */
@supports not (aspect-ratio: 1 / 1) {
  .galerij__tegel img, .galerij__wacht { height: 220px; }
  .split__media img { height: 320px; object-fit: cover; }
  .mapframe { height: 340px; }
}

/* Zonder color-mix blijft de knop het gewone verloop houden, dat is al
   gedefinieerd als eerste waarde. Voor het hero-accent zetten we een
   veilige lichte kleur klaar. */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .hero { --hero-accent: #cfe4f7; }
}

/* Zonder achtergrondvervaging wordt de balk gewoon dekkend */
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .header { background: var(--ink); }
  .actionbar { background: var(--ink); }
  .ba__label { background: var(--ink); }
  .lightbox { background: rgba(6, 8, 12, .96); }
}

/* Zonder clip-path zou de voor/na-schuif de bovenste laag altijd tonen.
   Dan laten we alleen de versie met panelen zien, dat is de nuttigste. */
@supports not (clip-path: inset(0 0 0 50%)) {
  .ba input[type="range"], .ba__greep, .ba__label--voor { display: none; }
  .ba__laag--na { position: static; }
  .ba__laag:not(.ba__laag--na) { display: none; }
}

/* ---------- Kleine dingen in de voettekst ---------- */
.footer__klein { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; }
.nog-invullen {
  padding: 0 .35rem; border-radius: 4px;
  background: rgb(var(--danger-rgb) / .12); color: var(--danger);
  font-size: .82em;
}

/* ---------- Lopende tekst op de juridische pagina's ---------- */
.prose { max-width: 68ch; }
.prose h2 {
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  margin-top: 2.4rem; margin-bottom: .6rem;
}
.prose h2:first-child { margin-top: 0; }
.prose p { font-size: 1.02rem; }
.prose mark {
  background: rgb(var(--danger-rgb) / .12); color: var(--danger);
  padding: 0 .3rem; border-radius: 4px;
}

/* =========================================================
   Voortgangsbalk en sectiebolletjes
   Twee hulpmiddelen die laten zien waar je bent op de pagina.
   Beide kleuren mee met de gekozen kleurstijl, want ze rekenen
   met dezelfde variabelen als de rest van de site.
   ========================================================= */

/* ---------- Balk bovenaan die volloopt ---------- */
.voortgang {
  position: fixed; top: 0; left: 0; right: 0;
  height: 3px; z-index: 110;
  pointer-events: none;
  background: rgb(var(--accent-rgb) / .12);
}
.voortgang__balk {
  height: 100%; width: 100%;
  transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--glass), var(--glass-2));
  box-shadow: 0 0 10px rgb(var(--accent-rgb) / .55);
  will-change: transform;
}

/* ---------- Bolletjes rechts, een per sectie ---------- */
.secties {
  position: fixed; right: clamp(.9rem, 1.6vw, 1.9rem); top: 50%;
  transform: translateY(-50%);
  z-index: 80;
  display: none;
  flex-direction: column; gap: .8rem;
}
/* Alleen op ruime schermen. Op een telefoon zit de actiebalk al onderin
   en zou dit alleen maar in de weg zitten. */
@media (min-width: 1080px) { .secties { display: flex; } }

.secties a {
  display: flex; align-items: center; gap: .6rem;
  flex-direction: row-reverse;
  padding: 2px;
}
.secties__stip {
  width: 7px; height: 7px; border-radius: 50%;
  border: 1.5px solid var(--line-strong);
  background: transparent;
  transition: transform .3s var(--ease), background .3s var(--ease),
              border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.secties a:hover .secties__stip { border-color: var(--glass); transform: scale(1.35); }
.secties a.is-hier .secties__stip {
  background: var(--glass); border-color: var(--glass);
  transform: scale(1.4);
  box-shadow: 0 0 0 3.5px rgb(var(--accent-rgb) / .16);
}
.secties__naam {
  font-size: .78rem; font-weight: 500; color: var(--muted);
  white-space: nowrap;
  padding: .32rem .7rem; border-radius: 999px;
  background: var(--panel); border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  opacity: 0; transform: translateX(8px);
  transition: opacity .25s var(--ease), transform .25s var(--ease), color .25s var(--ease);
}
.secties a:hover .secties__naam,
.secties a:focus-visible .secties__naam { opacity: 1; transform: none; }
.secties a.is-hier .secties__naam { color: var(--text); }

@media (prefers-reduced-motion: reduce) {
  .voortgang__balk, .secties__stip, .secties__naam { transition: none; }
}