/* =========================================================
   Almas Schoonmaak
   Kleur ontleend aan de fotografie: inktblauw pand,
   warm amber van de TL-armaturen als enige accentkleur.
   ========================================================= */

:root {
  --ink:        #0A0E13;
  --ink-2:      #10161E;
  --ink-3:      #171F2A;
  --frost:      #EEF2F6;
  --muted:      #8E9BAB;
  --muted-2:    #8794A3;   /* kleine labels: moet 4.5:1 halen op donker */
  --amber:      #E9A94A;   /* vlakken: knoppen, tijdbalk */
  --amber-zacht:#F2C787;
  --amber-tekst:#E9A94A;   /* kleine tekst — wordt donkerder op lichte vlakken */
  --op-amber:   #0A0E13;   /* tekst óp amber: altijd donker */
  --lijn:       rgba(238, 242, 246, .12);
  --lijn-sterk: rgba(238, 242, 246, .22);
  --arcering:   rgba(238, 242, 246, .07);
  --ico-vlak:   rgba(233, 169, 74, .13);
  --cirkel:     var(--ink-3);   /* tijdlijn: op donker juist iets lichter */

  /* Lichte vlakken */

  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --body:    "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --marge:  clamp(1.25rem, 5vw, 4.5rem);
  --breed:  76rem;
  --ruimte: clamp(4.5rem, 10vw, 9rem);

  --soepel: cubic-bezier(.22, .61, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--frost);
  font-family: var(--body);
  font-size: clamp(1rem, .96rem + .2vw, 1.0625rem);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

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

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--amber);
  color: var(--op-amber);
  padding: .75rem 1.25rem;
  font-weight: 600;
  text-decoration: none;
}
.skip:focus { left: 1rem; top: 1rem; }

/* ── Lichte vlakken ─────────────────────────────────────────
   Eén klasse die de tokens omdraait. Alle bestaande regels
   werken daardoor ongewijzigd door — geen dubbele CSS.
   --------------------------------------------------------- */

.licht {
  --ink:        #F7F9FC;   /* kaarten en invoervelden */
  --ink-2:      #EFF3F8;   /* het sectievlak zelf */
  --ink-3:      #E2E8EF;
  --frost:      #0A0E13;
  --muted:      #55616F;
  --muted-2:    #5D6874;
  --amber-tekst:#8A5713;
  --lijn:       rgba(10, 14, 19, .13);
  --lijn-sterk: rgba(10, 14, 19, .26);
  --arcering:   rgba(10, 14, 19, .10);
  --ico-vlak:   rgba(138, 87, 19, .10);
  --cirkel:     #0A0E13;        /* op licht juist donker, zoals in het voorbeeld */

  background: var(--ink-2);
  color: var(--frost);
}

/* .sectie is op breedte begrensd. Krijgt zo'n sectie een licht
   vlak, dan moet dát vlak wél doorlopen tot de schermrand —
   anders zweeft er een lichte doos op een donkere pagina.
   De inhoud blijft op dezelfde breedte gecentreerd staan. */
.sectie.licht {
  max-width: none;
  padding-inline: max(var(--marge), calc((100% - var(--breed)) / 2 + var(--marge)));
}

/* Op een licht vlak moet het formulierpaneel juist wit zijn,
   anders valt het weg tegen de sectie eronder. */
.licht .formulier { background: #FFFFFF; }

/* De stille knop krijgt op licht een donkere hover in plaats
   van de lichte waas die voor donkere vlakken bedoeld is. */
.licht .knop--stil:hover { background: rgba(10, 14, 19, .06); }

/* ── Bouwstenen ─────────────────────────────────────────── */

.eyebrow {
  display: flex;
  align-items: center;
  gap: .85rem;
  font-family: var(--mono);
  font-size: .75rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--amber-tekst);
  margin: 0 0 1.25rem;
}

/* Streepje voor het kopje. Neemt de tekstkleur over, dus het
   verkleurt vanzelf mee op lichte vlakken. */
.eyebrow::before {
  content: "";
  flex-shrink: 0;
  width: 2.25rem;
  height: 1px;
  background: currentColor;
}

/* Gecentreerde variant krijgt aan beide kanten een streepje. */
.eyebrow--midden { justify-content: center; }
.eyebrow--midden::after {
  content: "";
  flex-shrink: 0;
  width: 2.25rem;
  height: 1px;
  background: currentColor;
}

/* Sectiekop over de volle breedte gecentreerd. */
.sectie__kop--midden { text-align: center; }
.sectie__kop--midden .sectie__intro { margin-inline: auto; }

.sectie__titel {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.1rem);
  line-height: 1.08;
  letter-spacing: -.022em;
  margin: 0 0 1.1rem;
  text-wrap: balance;
}

.sectie__intro {
  color: var(--muted);
  max-width: 46ch;
  margin: 0;
}

.knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .95rem 1.6rem;
  border: 1px solid var(--amber);
  border-radius: 2px;
  background: var(--amber);
  color: var(--op-amber);
  font-family: var(--body);
  font-weight: 600;
  font-size: .95rem;
  text-decoration: none;
  cursor: pointer;
  transition: background .25s var(--soepel), border-color .25s var(--soepel), color .25s var(--soepel);
}
.knop:hover { background: var(--amber-zacht); border-color: var(--amber-zacht); }

.knop--stil {
  background: transparent;
  color: var(--frost);
  border-color: var(--lijn-sterk);
}
.knop--stil:hover { background: rgba(238,242,246,.08); border-color: var(--frost); }

.knop--klein { padding: .6rem 1.1rem; font-size: .875rem; }

.knop--vol { width: 100%; border: none; padding: 1.05rem 1.6rem; }

/* ── Kop ────────────────────────────────────────────────── */

.kop {
  position: sticky;
  top: 0;
  z-index: 50;
  transition: background .3s var(--soepel), border-color .3s var(--soepel);
  border-bottom: 1px solid transparent;
}
.kop--vast {
  background: rgba(10, 14, 19, .88);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--lijn);
}

.kop__in {
  max-width: var(--breed);
  margin-inline: auto;
  padding: 1.05rem var(--marge);
  display: flex;
  align-items: center;
  gap: 2rem;
}

.merk {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}
.merk img {
  height: 1.75rem;
  width: auto;
}

.nav {
  display: flex;
  gap: 1.9rem;
  margin-left: auto;
}
.nav a {
  font-size: .9rem;
  text-decoration: none;
  color: var(--muted);
  transition: color .2s var(--soepel);
}
.nav a:hover { color: var(--frost); }

.menu-knop {
  display: none;
  margin-left: auto;
  width: 2.75rem;
  height: 2.75rem;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  background: none;
  border: 1px solid var(--lijn-sterk);
  border-radius: 2px;
  cursor: pointer;
}
.menu-knop span {
  display: block;
  width: 17px;
  height: 1.5px;
  background: var(--frost);
}

.mobielmenu[hidden] { display: none; }

.mobielmenu {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--lijn);
  background: var(--ink-2);
  padding: .5rem var(--marge) 1.25rem;
}
.mobielmenu a {
  padding: .85rem 0;
  border-bottom: 1px solid var(--lijn);
  text-decoration: none;
  color: var(--frost);
  font-size: 1rem;
}
.mobielmenu a:last-child { border-bottom: none; color: var(--amber-tekst); font-weight: 600; }

@media (max-width: 900px) {
  .nav { display: none; }
  .kop__in > .knop--klein { display: none; }
  .menu-knop { display: flex; }
}

/* ── Hero ───────────────────────────────────────────────── */

.hero {
  position: relative;
  min-height: min(88svh, 46rem);
  display: flex;
  align-items: flex-end;
  margin-top: -5.1rem;
  padding-top: 5.1rem;
  isolation: isolate;
}

.hero__beeld {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero__beeld img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 60% center;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to right, rgba(10,14,19,.94) 0%, rgba(10,14,19,.72) 45%, rgba(10,14,19,.25) 100%),
    linear-gradient(to top, rgba(10,14,19,.96) 0%, rgba(10,14,19,.15) 45%);
}

.hero__in {
  max-width: var(--breed);
  margin-inline: auto;
  width: 100%;
  padding: 0 var(--marge) clamp(3.5rem, 8vw, 6rem);
}

.hero__titel {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(2.3rem, 1.1rem + 5vw, 4.6rem);
  line-height: 1.02;
  letter-spacing: -.03em;
  margin: 0 0 1.4rem;
  max-width: 18ch;
}

.hero__tekst {
  color: var(--muted);
  max-width: 48ch;
  margin: 0 0 2.2rem;
  font-size: clamp(1rem, .95rem + .35vw, 1.15rem);
}

.hero__acties {
  display: flex;
  flex-wrap: wrap;
  gap: .85rem;
}

/* ── Belofte-strip ──────────────────────────────────────── */

.strip {
  border-block: 1px solid var(--lijn);
  background: var(--ink-2);
}
.strip__lijst {
  max-width: var(--breed);
  margin-inline: auto;
  padding: 0 var(--marge);
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.strip__lijst > li {
  padding: 2.4rem 1.75rem 2.4rem 0;
  border-right: 1px solid var(--lijn);
  display: flex;
  flex-direction: column;
  gap: .3rem;
}
.strip__lijst > li:not(:first-child) { padding-left: 1.75rem; }
.strip__lijst > li:last-child { border-right: none; padding-right: 0; }

.strip__label {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.strip__waarde {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.1rem;
  letter-spacing: -.01em;
}
.strip__uitleg {
  color: var(--muted);
  font-size: .875rem;
  line-height: 1.5;
}

@media (max-width: 900px) {
  .strip__lijst { grid-template-columns: repeat(2, 1fr); }
  .strip__lijst > li { padding: 1.9rem 1.25rem 1.9rem 0; }
  .strip__lijst > li:nth-child(2n) { border-right: none; padding-right: 0; }
  .strip__lijst > li:nth-child(2n+1) { padding-left: 0; }
  .strip__lijst > li:nth-child(-n+2) { border-bottom: 1px solid var(--lijn); }
}
@media (max-width: 540px) {
  .strip__lijst { grid-template-columns: 1fr; }
  .strip__lijst > li { border-right: none; padding: 1.5rem 0; }
  .strip__lijst > li:not(:last-child) { border-bottom: 1px solid var(--lijn); }
  .strip__lijst > li:not(:first-child) { padding-left: 0; }
}

/* ── Generieke sectie ───────────────────────────────────── */

.sectie {
  max-width: var(--breed);
  margin-inline: auto;
  padding: var(--ruimte) var(--marge);
}

.sectie__kop { margin-bottom: clamp(2.75rem, 6vw, 4rem); }

/* ── Diensten ───────────────────────────────────────────── */

.diensten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  /* Alleen boven en links; rechts en onder komen van de kaarten zelf.
     Zo blijft een niet-volle rij leeg in plaats van grijs. */
  border-top: 1px solid var(--lijn);
  border-left: 1px solid var(--lijn);
}

.dienst {
  background: var(--ink);
  border-right: 1px solid var(--lijn);
  border-bottom: 1px solid var(--lijn);
  padding: 2.25rem 1.9rem 2.4rem;
  transition: background .3s var(--soepel);
}
.dienst:hover { background: var(--ink-2); }
.dienst h3 {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.075rem;
  letter-spacing: -.01em;
  margin: 0 0 .7rem;
}
.dienst p {
  color: var(--muted);
  font-size: .925rem;
  margin: 0;
}

/* ── Werktijden ─────────────────────────────────────────── */

.uren {
  background: var(--ink-2);
  border-block: 1px solid var(--lijn);
}
.uren__in {
  max-width: var(--breed);
  margin-inline: auto;
  padding: var(--ruimte) var(--marge);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}
.uren__tekst p:not(.eyebrow) {
  color: var(--muted);
  max-width: 44ch;
}

.klok__titel {
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 1rem;
}

.klok { margin: 0; }

.klok__balk {
  display: grid;
  grid-template-columns: repeat(17, 1fr);
  height: 5.5rem;
  border: 1px solid var(--lijn-sterk);
}

.klok__blok {
  grid-column: calc(var(--van) + 1) / calc(var(--tot) + 1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .25rem;
  text-align: center;
}
.klok__blok--wij {
  background: var(--amber);
  color: var(--op-amber);
  font-weight: 500;
}
.klok__blok--u {
  color: var(--muted-2);
  background-image: repeating-linear-gradient(
    -45deg,
    transparent 0 6px,
    var(--arcering) 6px 7px
  );
  border-inline: 1px solid var(--lijn-sterk);
}

.klok__schaal {
  display: flex;
  justify-content: space-between;
  margin-top: .6rem;
  font-family: var(--mono);
  font-size: .68rem;
  color: var(--muted-2);
}

@media (max-width: 820px) {
  .uren__in { grid-template-columns: 1fr; }
}

.band {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  background: var(--ink);
}

/* Kaart en foto krijgen een vaste plek in het raster, zodat het
   verloop hieronder precies op de foto-cel valt. */
.band__kaart { grid-area: 1 / 1; }
.band > img   { grid-area: 1 / 2; }

.band > img {
  width: 100%;
  height: 100%;
  max-height: 34rem;
  object-fit: cover;
  object-position: center 35%;
}

/* Het verloop laat het donkere citaatvlak in de foto overlopen,
   zodat er geen harde naad tussen de twee zit. Het ligt in
   dezelfde rastercel als de foto en schuift dus vanzelf mee. */
.band::after {
  content: "";
  grid-area: 1 / 2;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to right,
    var(--ink) 0%,
    rgba(10, 14, 19, .55) 22%,
    transparent 58%
  );
}

.band__kaart {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(2.5rem, 7vw, 5rem);
  border-block: 1px solid var(--lijn);
}
.band__quote {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1.4rem, 1rem + 1.7vw, 2.2rem);
  line-height: 1.2;
  letter-spacing: -.02em;
  margin: 0 0 1.1rem;
  text-wrap: balance;
}
.band__bron {
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--amber-tekst);
  margin: 0;
}

@media (max-width: 820px) {
  .band { grid-template-columns: 1fr; }
  .band > img { max-height: 22rem; }

  /* Gestapeld staat de foto onder de kaart, dus loopt het
     verloop van boven naar beneden in plaats van opzij. */
  .band__kaart { grid-area: 1 / 1; }
  .band > img   { grid-area: 2 / 1; }
  .band::after {
    grid-area: 2 / 1;
    background: linear-gradient(
      to bottom,
      var(--ink) 0%,
      rgba(10, 14, 19, .5) 18%,
      transparent 48%
    );
  }
}

/* ── Werkwijze ──────────────────────────────────────────── */

.stappen {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.75rem, 3.5vw, 2.75rem);
}

@media (max-width: 1080px) {
  .stappen { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .stappen { grid-template-columns: 1fr; }
}

.stap {
  border-top: 1px solid var(--lijn-sterk);
  padding-top: 1.5rem;
}
.stap__nr {
  font-family: var(--mono);
  font-size: .78rem;
  letter-spacing: .1em;
  color: var(--amber-tekst);
  display: block;
  margin-bottom: 1.4rem;
}
.stap h3 {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.075rem;
  letter-spacing: -.01em;
  margin: 0 0 .65rem;
}
.stap p {
  color: var(--muted);
  font-size: .925rem;
  margin: 0;
}

/* ── Waarom ─────────────────────────────────────────────── */

.waarom {
  background: var(--ink-2);
  border-block: 1px solid var(--lijn);
}
.waarom__in {
  max-width: var(--breed);
  margin-inline: auto;
  padding: var(--ruimte) var(--marge);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 6vw, 4.5rem);
  align-items: start;
}
.waarom__kop { grid-column: 1 / -1; }

.waarom__lijst { margin: 0; }
.waarom__lijst > div {
  padding: 1.6rem 0;
  border-top: 1px solid var(--lijn);
}
.waarom__lijst > div:first-child { border-top: none; padding-top: 0; }
.waarom__lijst dt {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.0125rem;
  margin-bottom: .45rem;
}
.waarom__lijst dd {
  margin: 0;
  color: var(--muted);
  font-size: .925rem;
}

.waarom__beeld { margin: 0; }
.waarom__beeld img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center 60%;
}

@media (max-width: 820px) {
  .waarom__in { grid-template-columns: 1fr; }
  .waarom__beeld { order: -1; }
  .waarom__beeld img { aspect-ratio: 16 / 10; }
}

/* ── Offerte ────────────────────────────────────────────── */

.offerte__in {
  max-width: var(--breed);
  margin-inline: auto;
  padding: var(--ruimte) var(--marge);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}
.offerte__tekst p:not(.eyebrow) {
  color: var(--muted);
  max-width: 40ch;
}

.contact {
  list-style: none;
  padding: 0;
  margin: 2.5rem 0 0;
}
.contact li {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: .9rem;
  row-gap: .1rem;
  align-items: center;
  padding: 1.05rem 0;
  border-top: 1px solid var(--lijn);
}
.contact li > :nth-child(1) { grid-column: 1; grid-row: 1 / span 2; }
.contact li > :nth-child(2) { grid-column: 2; grid-row: 1; }
.contact li > :nth-child(3) { grid-column: 2; grid-row: 2; }
.contact li:last-child { border-bottom: 1px solid var(--lijn); }
.contact__label {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.contact a {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.1rem;
  text-decoration: none;
  color: var(--frost);
  transition: color .2s var(--soepel);
  width: fit-content;
}
.contact a:hover { color: var(--amber-tekst); }
.contact li > span:not(.contact__label) {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.1rem;
}

.formulier {
  background: var(--ink-2);
  border: 1px solid var(--lijn);
  padding: clamp(1.75rem, 4vw, 2.5rem);
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.veld { display: flex; flex-direction: column; gap: .45rem; }
.veld-rij { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }

.veld label {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.veld__opt { text-transform: none; letter-spacing: 0; color: var(--muted-2); }

.veld input,
.veld select,
.veld textarea {
  width: 100%;
  background: var(--ink);
  border: 1px solid var(--lijn-sterk);
  border-radius: 2px;
  padding: .8rem .9rem;
  color: var(--frost);
  font-family: var(--body);
  font-size: .95rem;
  transition: border-color .2s var(--soepel);
}
.veld textarea { resize: vertical; min-height: 6rem; }
.veld input::placeholder,
.veld textarea::placeholder { color: var(--muted-2); }
.veld input:hover,
.veld select:hover,
.veld textarea:hover { border-color: var(--muted-2); }
.veld input:focus,
.veld select:focus,
.veld textarea:focus {
  outline: none;
  border-color: var(--amber-tekst);
  box-shadow: 0 0 0 3px rgba(233, 169, 74, .16);
}

.formulier__voet {
  font-size: .78rem;
  color: var(--muted-2);
  margin: -.2rem 0 0;
  line-height: 1.5;
}

@media (max-width: 820px) {
  .offerte__in { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .veld-rij { grid-template-columns: 1fr; }
}

/* ── Voet ───────────────────────────────────────────────── */

.voet {
  border-top: 1px solid var(--lijn);
  background: var(--ink);
}
.voet__in {
  max-width: var(--breed);
  margin-inline: auto;
  padding: clamp(3rem, 7vw, 4.5rem) var(--marge) 2.5rem;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 2.5rem;
}
.voet__merk { display: flex; flex-wrap: wrap; align-items: center; }
.voet__logo { height: 1.9rem; width: auto; }
.voet__regel {
  flex-basis: 100%;
  color: var(--muted);
  font-size: .875rem;
  max-width: 32ch;
  margin: .6rem 0 0;
}
.voet__kolom h2 {
  font-family: var(--mono);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin: 0 0 .9rem;
}
.voet__kolom p { margin: 0 0 .45rem; font-size: .9rem; color: var(--muted); }
.voet__kolom a { text-decoration: none; transition: color .2s var(--soepel); }
.voet__kolom a:hover { color: var(--amber-tekst); }

.voet__onder {
  max-width: var(--breed);
  margin-inline: auto;
  padding: 1.4rem var(--marge);
  border-top: 1px solid var(--lijn);
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: .8rem;
  color: var(--muted-2);
}
.voet__onder p { margin: 0; }
.voet__onder a { text-decoration: none; }
.voet__onder a:hover { color: var(--amber-tekst); }

@media (max-width: 820px) {
  .voet__in { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .voet__in { grid-template-columns: 1fr; gap: 2rem; }
}

/* ── Binnenkomen ────────────────────────────────────────── */

.komt-op {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .7s var(--soepel), transform .7s var(--soepel);
}
.komt-op.is-op { opacity: 1; transform: none; }

.diensten .dienst.komt-op:nth-child(2),
.stappen .stap.komt-op:nth-child(2) { transition-delay: .07s; }
.diensten .dienst.komt-op:nth-child(3),
.stappen .stap.komt-op:nth-child(3) { transition-delay: .14s; }
.diensten .dienst.komt-op:nth-child(4),
.stappen .stap.komt-op:nth-child(4) { transition-delay: .21s; }
.diensten .dienst.komt-op:nth-child(5) { transition-delay: .28s; }
.diensten .dienst.komt-op:nth-child(6) { transition-delay: .35s; }

@media (prefers-reduced-motion: reduce) {
  .komt-op { opacity: 1; transform: none; transition: none; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ── Placeholders die nog ingevuld moeten worden ─────────
   Verwijder dit blok zodra alle [HAAKJES] vervangen zijn.
   ------------------------------------------------------- */
.formulier[action^="["] button[type="submit"] { position: relative; }

/* =========================================================
   FAQ-pagina
   ========================================================= */

/* ── Kopband ────────────────────────────────────────────── */

.vkop {
  position: relative;
  isolation: isolate;
  padding: clamp(6rem, 13vw, 9.5rem) 0 clamp(3.5rem, 7vw, 5.5rem);
  border-bottom: 1px solid var(--lijn);
  overflow: hidden;
}
.vkop__beeld {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
}
.vkop::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to right, rgba(10,14,19,.96) 0%, rgba(10,14,19,.86) 55%, rgba(10,14,19,.58) 100%),
    linear-gradient(to top, rgba(10,14,19,.92) 0%, rgba(10,14,19,.4) 60%);
}
.vkop__in {
  max-width: var(--breed);
  margin-inline: auto;
  padding-inline: var(--marge);
}
.vkop__titel {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(2rem, 1.1rem + 3.8vw, 3.6rem);
  line-height: 1.05;
  letter-spacing: -.028em;
  margin: 0 0 1.2rem;
}
.vkop__tekst {
  color: var(--muted);
  max-width: 52ch;
  margin: 0;
  font-size: clamp(1rem, .95rem + .3vw, 1.1rem);
}

/* ── Onderwerpnavigatie ─────────────────────────────────── */

.vnav {
  background: var(--ink-2);
  border-bottom: 1px solid var(--lijn);
}
.vnav ul {
  max-width: var(--breed);
  margin-inline: auto;
  padding: 1.1rem var(--marge);
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.6rem;
}
.vnav a {
  font-family: var(--mono);
  font-size: .74rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  padding: .3rem 0;
  border-bottom: 1px solid transparent;
  transition: color .2s var(--soepel), border-color .2s var(--soepel);
}
.vnav a:hover { color: var(--frost); border-bottom-color: var(--amber); }

/* ── Vragensectie ───────────────────────────────────────── */

.vsectie { background: var(--ink); }
.vsectie__in {
  max-width: var(--breed);
  margin-inline: auto;
  padding: clamp(3.5rem, 7vw, 5.5rem) var(--marge);
  display: grid;
  grid-template-columns: 19rem 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.vsectie__kop { position: sticky; top: 6rem; }
.vsectie__nr {
  display: block;
  font-family: var(--mono);
  font-size: .78rem;
  letter-spacing: .1em;
  color: var(--amber-tekst);
  margin-bottom: 1rem;
}
.vsectie__kop .sectie__titel {
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.05rem);
  margin-bottom: 0;
}
.vsectie__intro {
  color: var(--muted);
  font-size: .925rem;
  margin: 1rem 0 0;
  max-width: 34ch;
}

@media (max-width: 900px) {
  .vsectie__in { grid-template-columns: 1fr; }
  .vsectie__kop { position: static; }
}

/* ── Accordeon ──────────────────────────────────────────── */

.vragen { border-top: 1px solid var(--lijn); }

.vraag { border-bottom: 1px solid var(--lijn); }

.vraag summary {
  list-style: none;
  cursor: pointer;
  padding: 1.35rem 3rem 1.35rem 0;
  position: relative;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.0125rem;
  line-height: 1.35;
  letter-spacing: -.008em;
  transition: color .2s var(--soepel);
}
.vraag summary::-webkit-details-marker { display: none; }
.vraag summary:hover { color: var(--amber-tekst); }

/* Plus dat een min wordt */
.vraag summary::before,
.vraag summary::after {
  content: "";
  position: absolute;
  right: .35rem;
  top: 50%;
  width: 13px;
  height: 1.5px;
  background: var(--amber-tekst);
  transition: transform .28s var(--soepel);
}
.vraag summary::after { transform: rotate(90deg); }
.vraag[open] summary::after { transform: rotate(0deg); }

.vraag__tekst {
  padding: 0 3rem 1.6rem 0;
  max-width: 62ch;
}
.vraag__tekst p {
  color: var(--muted);
  font-size: .95rem;
  margin: 0 0 .9rem;
}
.vraag__tekst p:last-child { margin-bottom: 0; }

/* ── Afsluiting ─────────────────────────────────────────── */

.vslot { background: var(--ink-2); }
.vslot__in {
  max-width: var(--breed);
  margin-inline: auto;
  padding: clamp(3.5rem, 7vw, 5.5rem) var(--marge);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.vslot__tekst {
  color: var(--muted);
  max-width: 46ch;
  margin: 0;
}
.vslot__acties { display: flex; flex-wrap: wrap; gap: .85rem; }

@media (max-width: 820px) {
  .vslot__in { grid-template-columns: 1fr; }
}

/* =========================================================
   Losse pagina's: diensten, over ons, offerte
   ========================================================= */

/* Huidige pagina markeren in het menu */
.nav a[aria-current] {
  color: var(--frost);
  border-bottom: 1px solid var(--amber);
  padding-bottom: 2px;
}
.mobielmenu a[aria-current] { color: var(--amber-tekst); }

/* ── Compacte kop (offertepagina) ───────────────────────── */

.okop {
  background: var(--ink-2);
  border-bottom: 1px solid var(--lijn);
  padding: clamp(6.5rem, 13vw, 9rem) 0 clamp(2.5rem, 5vw, 3.5rem);
}
.okop__in {
  max-width: var(--breed);
  margin-inline: auto;
  padding-inline: var(--marge);
}
.okop__titel {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.1rem);
  line-height: 1.06;
  letter-spacing: -.026em;
  margin: 0 0 1rem;
  text-wrap: balance;
}
.okop__tekst {
  color: var(--muted);
  max-width: 52ch;
  margin: 0;
}

/* Verplicht-sterretje in het formulier */
.veld__ster { color: var(--amber-tekst); font-weight: 600; }

/* ── Frequentietabel (diensten) ─────────────────────────── */

.spec-wrap {
  overflow-x: auto;
  border: 1px solid var(--lijn);
  margin-top: .5rem;
}
.spec {
  width: 100%;
  min-width: 44rem;
  border-collapse: collapse;
  font-size: .92rem;
}
.spec__caption {
  text-align: left;
  padding: 1.1rem 1.4rem;
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted-2);
  border-bottom: 1px solid var(--lijn);
}
.spec th,
.spec td {
  text-align: left;
  padding: 1rem 1.4rem;
  border-bottom: 1px solid var(--lijn);
  vertical-align: top;
}
.spec thead th {
  font-family: var(--mono);
  font-weight: 400;
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--amber-tekst);
  white-space: nowrap;
}
.spec tbody th {
  font-family: var(--display);
  font-weight: 600;
  font-size: .95rem;
  color: var(--frost);
  white-space: nowrap;
}
.spec tbody td { color: var(--muted); }
.spec tbody tr:last-child th,
.spec tbody tr:last-child td { border-bottom: none; }

.spec__noot {
  color: var(--muted);
  max-width: 62ch;
  font-size: .95rem;
  margin: 1.6rem 0 0;
}

/* ── Uitzonderingen (diensten) ──────────────────────────── */

.uitzonderingen {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  border-top: 1px solid var(--lijn);
  border-left: 1px solid var(--lijn);
}
.uitzonderingen li {
  background: var(--ink);
  border-right: 1px solid var(--lijn);
  border-bottom: 1px solid var(--lijn);
  padding: 1.9rem 1.7rem;
}
.uitzonderingen h3 {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1rem;
  margin: 0 0 .6rem;
}
.uitzonderingen p {
  color: var(--muted);
  font-size: .92rem;
  margin: 0;
}

/* ── Lopend verhaal (over ons) ──────────────────────────── */

.verhaal {
  max-width: 60ch;
  margin-top: -.5rem;
}
.verhaal p {
  color: var(--muted);
  margin: 0 0 1.2rem;
}
.verhaal p:first-child {
  color: var(--frost);
  font-size: clamp(1.05rem, 1rem + .35vw, 1.2rem);
  line-height: 1.55;
}
.verhaal p:last-child { margin-bottom: 0; }

/* ── Werkgebied (over ons) ──────────────────────────────── */

.plaatsen {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
}
.plaatsen li {
  border: 1px solid var(--lijn-sterk);
  border-radius: 2px;
  padding: .55rem 1rem;
  font-size: .92rem;
}
.plaatsen__noot {
  color: var(--muted);
  font-size: .95rem;
  max-width: 56ch;
  margin: 1.8rem 0 0;
}

/* =========================================================
   Algemene voorwaarden
   ========================================================= */

.okop__meta {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin: 1.4rem 0 0;
}

/* Nummering loopt via CSS-tellers: voeg je later een artikel
   toe, dan klopt de nummering vanzelf weer. */
.artikelen {
  counter-reset: art;
  list-style: none;
  padding: 0;
  margin: 0;
  max-width: 58rem;
}

.artikel {
  counter-increment: art;
  padding: 2.2rem 0;
  border-top: 1px solid var(--lijn);
}
.artikel:first-child { border-top: none; padding-top: .5rem; }

.artikel > h2 {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.15rem;
  line-height: 1.3;
  letter-spacing: -.01em;
  margin: 0 0 1.1rem;
  display: flex;
  gap: .8rem;
}
.artikel > h2::before {
  content: "Art. " counter(art);
  flex-shrink: 0;
  font-family: var(--mono);
  font-weight: 400;
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--amber-tekst);
  padding-top: .38em;
  min-width: 4.4rem;
}

.bepalingen {
  counter-reset: bep;
  list-style: none;
  padding: 0;
  margin: 0 0 0 5.2rem;
}
.bepalingen li {
  counter-increment: bep;
  position: relative;
  padding-left: 3rem;
  margin-bottom: .85rem;
  color: var(--muted);
  font-size: .95rem;
}
.bepalingen li:last-child { margin-bottom: 0; }
.bepalingen li::before {
  content: counter(art) "." counter(bep);
  position: absolute;
  left: 0;
  top: .1em;
  font-family: var(--mono);
  font-size: .8rem;
  color: var(--muted-2);
}
.bepalingen strong { color: var(--frost); font-weight: 600; }

.artikelen__voet {
  margin: 3rem 0 0;
  padding-top: 1.6rem;
  border-top: 1px solid var(--lijn);
  color: var(--muted);
  font-size: .95rem;
  max-width: 58rem;
}
.artikelen__voet a { color: var(--frost); }

@media (max-width: 720px) {
  .artikel > h2 { display: block; }
  .artikel > h2::before { display: block; margin-bottom: .5rem; }
  .bepalingen { margin-left: 0; }
  .bepalingen li { padding-left: 2.6rem; }
}

/* ── Zijmenu bij de voorwaarden ─────────────────────────── */

.jur {
  display: grid;
  grid-template-columns: 16.5rem 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

.jur__index {
  position: sticky;
  top: 5.6rem;
  max-height: calc(100svh - 8rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: .5rem;
}
.jur__uitklap > summary {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin: 0 0 1rem;
  padding-bottom: .8rem;
  border-bottom: 1px solid var(--lijn);
  list-style: none;
  cursor: default;
}
.jur__uitklap > summary::-webkit-details-marker { display: none; }

/* Op desktop is dit alleen een kopje, geen knop: klikken mag de
   lijst daar niet dichtklappen. */
@media (min-width: 901px) {
  .jur__uitklap > summary { pointer-events: none; }
}
.jur__index ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.jur__index a {
  display: flex;
  gap: .7rem;
  padding: .42rem 0 .42rem .8rem;
  margin-left: -.8rem;
  border-left: 2px solid transparent;
  font-size: .875rem;
  line-height: 1.35;
  color: var(--muted);
  text-decoration: none;
  transition: color .18s var(--soepel), border-color .18s var(--soepel);
}
.jur__index a:hover { color: var(--frost); }

.jur__nr {
  flex-shrink: 0;
  min-width: 1.35rem;
  font-family: var(--mono);
  font-size: .78rem;
  color: var(--muted-2);
  padding-top: .1em;
}

/* Artikel waar je nu bent */
.jur__index a[aria-current="true"] {
  color: var(--frost);
  border-left-color: var(--amber);
  font-weight: 600;
}
.jur__index a[aria-current="true"] .jur__nr { color: var(--amber-tekst); }

/* Anker niet onder de vaste kop laten verdwijnen */
.artikel,
.vsectie[id],
.sectie[id] { scroll-margin-top: 5.5rem; }

/* Onder 900px wordt het zijmenu een strook boven de tekst */
@media (max-width: 900px) {
  .jur { grid-template-columns: 1fr; gap: 2.2rem; }
  .jur__index {
    position: static;
    max-height: none;
    overflow: visible;
    padding: 0 0 1.6rem;
    border-bottom: 1px solid var(--lijn);
  }
  .jur__uitklap > summary {
    position: relative;
    padding: .95rem 2rem .95rem 0;
    margin: 0;
    border-top: 1px solid var(--lijn);
    cursor: pointer;
    color: var(--frost);
    font-size: .78rem;
  }
  /* plus die een min wordt */
  .jur__uitklap > summary::before,
  .jur__uitklap > summary::after {
    content: "";
    position: absolute;
    right: .2rem;
    top: 50%;
    width: 12px;
    height: 1.5px;
    background: var(--amber-tekst);
  }
  .jur__uitklap > summary::after { transform: rotate(90deg); }
  .jur__uitklap[open] > summary::after { transform: rotate(0deg); }

  .jur__index ul { padding: .4rem 0 .8rem; }
  .jur__index a {
    padding: .55rem 0;
    margin-left: 0;
    border-left: none;
  }
  .jur__index a[aria-current="true"] {
    border-left: none;
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-color: var(--amber);
  }
}

/* =========================================================
   Iconen
   Eén sprite per pagina, losse iconen verwijzen ernaar.
   Ze erven de tekstkleur, dus lichte en donkere vlakken
   hoeven geen aparte set.
   ========================================================= */

.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.ico-vak {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.65rem;
  height: 2.65rem;
  border-radius: 7px;
  background: var(--ico-vlak);
  color: var(--amber-tekst);
  margin-bottom: 1.15rem;
}
/* De teken-eigenschappen moeten hier staan en niet op de sprite:
   via <use> erft de vorm van dít element, niet van de sprite. */
.ico {
  width: 1.3rem;
  height: 1.3rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.55;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Kleiner formaat voor regels waar het icoon naast de tekst staat */
.ico-vak--klein {
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 6px;
  margin-bottom: 0;
}
.ico-vak--klein .ico { width: 1.05rem; height: 1.05rem; }

/* In de kernpunten-strip staat het icoon boven het labeltje */
.strip__lijst .ico-vak { margin-bottom: .95rem; }

/* In de waarom-lijst iets compacter, want de regels staan dicht op elkaar */
.waarom__lijst .ico-vak {
  width: 2.35rem;
  height: 2.35rem;
  margin-bottom: .8rem;
}
.waarom__lijst .ico { width: 1.15rem; height: 1.15rem; }

/* De kaart licht mee op bij hover */
.dienst { --ico-overgang: background .3s var(--soepel); }
.dienst .ico-vak { transition: var(--ico-overgang); }
.dienst:hover .ico-vak { background: var(--ico-vlak); }

/* =========================================================
   Telefoon
   Zelfde ontwerp, maar compacter en beter aan te tikken.
   Alles hieronder geldt alleen onder 700 px.
   ========================================================= */

@media (max-width: 700px) {

  /* Minder lucht tussen de secties. Op een breed scherm is die
     ruimte rust; op een telefoon is het vooral scrollen. */
  :root { --ruimte: 3.4rem; }

  /* ── Icoon naast de tekst in plaats van erboven ──────────
     Scheelt ongeveer 55 px per blok, en de regel begint op
     dezelfde hoogte als het icoon — rustiger om te scannen. */
  .strip__lijst > li,
  .dienst,
  .waarom__lijst > div,
  .uitzonderingen li {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: .95rem;
    align-items: start;
  }
  .strip__lijst > li > .ico-vak,
  .dienst > .ico-vak,
  .waarom__lijst > div > .ico-vak,
  .uitzonderingen li > .ico-vak {
    grid-column: 1;
    grid-row: 1 / -1;
    margin-bottom: 0;
    width: 2.4rem;
    height: 2.4rem;
  }
  .strip__lijst > li > :not(.ico-vak),
  .dienst > :not(.ico-vak),
  .waarom__lijst > div > :not(.ico-vak),
  .uitzonderingen li > :not(.ico-vak) { grid-column: 2; }

  /* Kaarten mogen krapper: de tekst heeft de ruimte nodig,
     de witruimte eromheen niet. */
  .dienst { padding: 1.7rem 1.35rem 1.8rem; }
  .uitzonderingen li { padding: 1.6rem 1.35rem 1.7rem; }
  .strip__lijst > li { padding: 1.7rem 0; }

  /* ── Leesbaarheid ───────────────────────────────────────
     De kleine mono-labels stonden op 11 px. Dat leest op een
     telefoon niet prettig; 12 px is de ondergrens. */
  .strip__label,
  .contact__label,
  .klok__titel,
  .klok__schaal span,
  .spec__caption,
  .okop__meta { font-size: .75rem; }
  .klok__blok span,
  .band__bron,
  .veld label,
  .veld__opt,
  .spec thead th,
  .jur__nr { font-size: .75rem; }

  /* Het logo linksboven was maar 28 px hoog om aan te tikken. */
  .merk { min-height: 44px; }

  /* De drie linkkolommen in de voet naast elkaar in plaats van
     onder elkaar — scheelt ruim een half scherm scrollen. */
  .voet__in { grid-template-columns: 1fr 1fr; gap: 2rem 1.5rem; }
  .voet__merk { grid-column: 1 / -1; }

  /* ── Aantikbare vlakken ─────────────────────────────────
     Losse tekstlinks waren 19 px hoog. Een vinger heeft er
     ruwweg 44 nodig. */
  .voet__kolom p { margin: 0; }
  .voet__kolom a,
  .voet__onder a,
  .contact a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .voet__onder { gap: .2rem 1rem; }

  /* De onderwerplinks op de FAQ en het artikeloverzicht bij de
     voorwaarden waren te klein om betrouwbaar te raken. */
  .vnav a,
  .jur__index a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-size: .78rem;
  }
  .vnav ul { gap: 0 1.3rem; }

  /* De twee knoppen in de hero onder elkaar en over de volle
     breedte: makkelijker raken dan twee smalle naast elkaar. */
  .hero__acties { flex-direction: column; align-items: stretch; }
  .hero__acties .knop { width: 100%; }
}

/* ── Belknop in de kop (alleen telefoon) ──────────────────
   Op smalle schermen verdwijnt de offerteknop in het menu,
   waardoor er geen zichtbare actie overblijft. Bellen is in
   dit vak het belangrijkste contactmoment, dus dat krijgt
   een eigen knop naast het menu. */

.bel-knop { display: none; }

@media (max-width: 900px) {
  .bel-knop {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    margin-left: auto;
    border: 1px solid var(--amber);
    border-radius: 2px;
    background: var(--amber);
    color: var(--op-amber);
    text-decoration: none;
    flex-shrink: 0;
  }
  .bel-knop svg { width: 1.15rem; height: 1.15rem; }
  /* het menu staat er direct naast, dus die hoeft niet meer
     zelf naar rechts te duwen */
  .menu-knop { margin-left: .6rem; }
}

/* =========================================================
   Offerteaanvraag in stappen
   ========================================================= */

.wizard {
  max-width: var(--breed);
  margin-inline: auto;
  padding: var(--ruimte) var(--marge);
  display: grid;
  grid-template-columns: 1fr 20rem;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

/* ── Voortgang ──────────────────────────────────────────── */

.wizard__balk { grid-column: 1; margin-bottom: 1.5rem; }
.wizard__tel {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin: 0 0 .6rem;
}
.wizard__spoor {
  height: 3px;
  background: var(--ink-3);
  border-radius: 2px;
  overflow: hidden;
}
.wizard__voortgang {
  display: block;
  height: 100%;
  width: 20%;
  background: var(--amber);
  transition: width .35s var(--soepel);
}

/* ── De stappen zelf ────────────────────────────────────── */

.formulier--wizard { grid-column: 1; grid-row: 2; }

.stapvak {
  border: none;
  margin: 0;
  padding: 0;
  min-inline-size: 0;
}
.stapvak[hidden] { display: none; }

.stapvak__vraag {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.2rem, 1rem + .9vw, 1.6rem);
  line-height: 1.25;
  letter-spacing: -.015em;
  padding: 0;
  margin-bottom: .7rem;
}
.stapvak__hulp {
  color: var(--muted);
  font-size: .925rem;
  margin: 0 0 1.4rem;
}
.stapvak__vraag + .keuzes { margin-top: 1.4rem; }

/* ── Keuzes als aantikbare vlakken ──────────────────────── */

.keuzes { display: grid; gap: .6rem; }

.keuze {
  position: relative;
  display: flex;
  align-items: center;
  gap: .85rem;
  min-height: 3.5rem;
  padding: .85rem 1.1rem;
  border: 1px solid var(--lijn-sterk);
  border-radius: 3px;
  cursor: pointer;
  transition: border-color .18s var(--soepel), background .18s var(--soepel);
}
.keuze:hover { border-color: var(--frost); }

/* Het bolletje tekenen we zelf, zodat het in beide kleurthema's klopt */
.keuze input {
  appearance: none;
  flex-shrink: 0;
  width: 1.15rem;
  height: 1.15rem;
  margin: 0;
  border: 1px solid var(--lijn-sterk);
  border-radius: 50%;
  cursor: pointer;
}
.keuze input:checked {
  border-color: var(--amber);
  border-width: 5px;
}
.keuze:has(input:checked) {
  border-color: var(--amber);
  background: var(--ico-vlak);
}
.keuze:has(input:focus-visible) {
  outline: 2px solid var(--amber);
  outline-offset: 2px;
}
.keuze span { font-weight: 500; }

/* ── Samenvatting op de laatste stap ────────────────────── */

.samenvatting {
  border: 1px solid var(--lijn);
  border-radius: 3px;
  padding: 1.2rem 1.3rem;
  margin: 0 0 1.8rem;
  background: var(--ink-2);
}
.samenvatting__kop {
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin: 0 0 .8rem;
}
.samenvatting dl { margin: 0; display: grid; gap: .55rem; }
.samenvatting dt {
  font-size: .8rem;
  color: var(--muted);
  margin: 0;
}
.samenvatting dd {
  margin: 0;
  font-weight: 600;
  font-size: .95rem;
}

/* ── Knoppen ────────────────────────────────────────────── */

.wizard__knoppen {
  display: flex;
  gap: .75rem;
  margin-top: 1.9rem;
}
.wizard__knoppen .knop--vol { width: auto; flex: 1; }
.wizard__knoppen [data-wizard-terug][disabled] {
  opacity: .35;
  cursor: not-allowed;
}
.wizard__knoppen [hidden] { display: none; }

/* ── Zijkolom ───────────────────────────────────────────── */

.wizard__zij {
  grid-column: 2;
  grid-row: 1 / span 2;
  border-left: 1px solid var(--lijn);
  padding-left: clamp(1.5rem, 3vw, 2.5rem);
}
.wizard__zij .contact { margin-top: 0; }

@media (max-width: 900px) {
  .wizard { grid-template-columns: 1fr; }
  .wizard__balk,
  .formulier--wizard { grid-column: 1; }
  .formulier--wizard { grid-row: auto; }
  .wizard__zij {
    grid-column: 1;
    grid-row: auto;
    border-left: none;
    border-top: 1px solid var(--lijn);
    padding-left: 0;
    padding-top: 1.5rem;
  }
}

@media (max-width: 700px) {
  /* Op een telefoon onder elkaar, en de hoofdknop het breedst. */
  .wizard__knoppen { flex-wrap: wrap; }
  .wizard__knoppen .knop { flex: 1 1 auto; }
}

/* Deze staat bewust achteraan: het wizard-blok hierboven zet zelf een
   lettergrootte, en een mediaregel eerder in het bestand verliest daarvan. */
@media (max-width: 700px) {
  .wizard__tel,
  .samenvatting__kop { font-size: .75rem; }
}

/* Kop boven de wizard op de homepage (op offerte.html doet de
   paginakop dit werk al). */
.offerte__kop {
  max-width: var(--breed);
  margin-inline: auto;
  padding: var(--ruimte) var(--marge) 0;
}
.offerte__kop + .wizard { padding-top: clamp(1.75rem, 4vw, 2.75rem); }

/* =========================================================
   Tijdlijn (werkwijze)
   Op breed scherm horizontaal met een verbindingslijn tussen
   de cirkels; op een telefoon dezelfde opbouw maar verticaal,
   met de lijn langs de linkerkant.
   ========================================================= */

.tijdlijn {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

.tijdlijn__stap {
  position: relative;
  text-align: center;
  padding-top: .5rem;
}

/* De lijn loopt van deze cirkel naar de volgende. De laatste
   stap krijgt er geen, anders steekt hij eruit. */
.tijdlijn__stap::after {
  content: "";
  position: absolute;
  top: calc(.5rem + 2.35rem);
  left: 50%;
  width: 100%;
  height: 1px;
  background: var(--lijn-sterk);
  z-index: 0;
}
.tijdlijn__stap:last-child::after { display: none; }

.tijdlijn__merk {
  position: relative;
  display: inline-block;
  z-index: 1;
  margin-bottom: 1.6rem;
}

.tijdlijn__cirkel {
  display: grid;
  place-items: center;
  width: 4.7rem;
  height: 4.7rem;
  border-radius: 50%;
  background: var(--cirkel);
  /* altijd het heldere amber: de cirkel is in beide thema's donker
     genoeg, en het gedempte oker zou daarop wegvallen */
  color: var(--amber);
}
.tijdlijn__cirkel .ico { width: 1.6rem; height: 1.6rem; }

.tijdlijn__badge {
  position: absolute;
  top: -.15rem;
  right: -.35rem;
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--amber);
  color: var(--op-amber);
  font-family: var(--mono);
  font-size: .78rem;
  font-weight: 500;
  border: 3px solid var(--ink-2);
}

.tijdlijn__nr {
  display: block;
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .18em;
  color: var(--muted-2);
  margin-bottom: .7rem;
}

.tijdlijn h3 {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.0125rem;
  letter-spacing: -.008em;
  margin: 0 0 .65rem;
}

.tijdlijn p {
  color: var(--muted);
  font-size: .925rem;
  margin: 0;
  max-width: 30ch;
  margin-inline: auto;
}

@media (max-width: 1080px) {
  .tijdlijn { grid-template-columns: repeat(2, 1fr); }
  /* Bij twee kolommen zou de lijn naar de volgende rij springen. */
  .tijdlijn__stap::after { display: none; }
}

/* ── Telefoon: dezelfde opbouw, maar naar beneden ────────── */

@media (max-width: 700px) {
  .tijdlijn {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .tijdlijn__stap {
    display: grid;
    grid-template-columns: 4.7rem 1fr;
    column-gap: 1.25rem;
    text-align: left;
    padding: 0 0 2.1rem;
  }
  .tijdlijn__stap:last-child { padding-bottom: 0; }

  /* Nu loopt de lijn verticaal langs de cirkels naar beneden. */
  .tijdlijn__stap::after {
    display: block;
    top: 4.7rem;
    left: 2.35rem;
    width: 1px;
    height: calc(100% - 4.7rem);
  }
  .tijdlijn__stap:last-child::after { display: none; }

  .tijdlijn__merk { grid-row: 1 / span 3; margin-bottom: 0; }
  .tijdlijn__nr   { grid-column: 2; margin-top: .35rem; }
  .tijdlijn h3    { grid-column: 2; }
  .tijdlijn p     { grid-column: 2; max-width: none; margin-inline: 0; }
}

/* =========================================================
   Stapblokken (pagina "Hoe het werkt")
   ========================================================= */

.stapblokken {
  display: grid;
  gap: clamp(1px, .3vw, 1px);
  background: var(--lijn);
  border: 1px solid var(--lijn);
}

.stapblok {
  display: grid;
  grid-template-columns: 7.5rem 1fr;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  padding: clamp(2rem, 4vw, 2.9rem);
  background: var(--ink);
}

.stapblok__merk { padding-top: .2rem; }
/* De cirkel hergebruikt de tijdlijn-onderdelen, maar hoeft hier
   geen ruimte eronder te reserveren. */
.stapblok__merk .tijdlijn__merk { margin-bottom: 0; }

.stapblok__duur {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--amber-tekst);
  margin: 0 0 .55rem;
}

.stapblok h3 {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.1rem, .95rem + .7vw, 1.45rem);
  letter-spacing: -.012em;
  margin: 0 0 1.5rem;
}

.stapblok__kolommen {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: clamp(1.5rem, 3vw, 2.75rem);
}

.stapblok__label {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin: 0 0 .8rem;
  padding-bottom: .6rem;
  border-bottom: 1px solid var(--lijn);
}

.stapblok__lijst {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .7rem;
}
.stapblok__lijst li {
  position: relative;
  padding-left: 1.15rem;
  color: var(--muted);
  font-size: .925rem;
}
.stapblok__lijst li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 7px;
  height: 1.5px;
  background: var(--amber-tekst);
}

.stapblok__u {
  color: var(--muted);
  font-size: .925rem;
  margin: 0;
}

@media (max-width: 860px) {
  .stapblok { grid-template-columns: 1fr; gap: 1.4rem; }
  .stapblok__kolommen { grid-template-columns: 1fr; gap: 1.75rem; }
}

/* ── Rasters met precies vier kaarten ─────────────────────
   Met de standaard auto-fit vallen vier kaarten uiteen in
   drie plus een losse. Deze zetten we op vier naast elkaar,
   en daaronder netjes twee bij twee. */

.raster--vier { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1080px) {
  .raster--vier { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .raster--vier { grid-template-columns: 1fr; }
}