@charset "utf-8";
/* ================================================================
   Z-Plekt
   Het logo is een dunne zwarte lijn om een woord heen, verder niets.
   Die lijn is hier het bouwmateriaal: kaders, haarlijnen en veel wit.
   De kleur mag van het behang komen, niet van de site.
   ================================================================ */

@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/oswald-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/oswald-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --papier: #faf9f6;
  --papier-diep: #f1eee8;
  --wit: #ffffff;
  --inkt: #131211;
  --inkt-zacht: #3a3733;
  --grijs: #6e6862;
  --lijn: #ddd8d0;
  --klei: #a9603f;
  --klei-diep: #8b4c2f;
  --klei-licht: #f6ece6;

  --kop: 'Oswald', 'Arial Narrow', 'Helvetica Neue', sans-serif;
  --tekst: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --omhulsel: 1180px;
  --marge: clamp(1.25rem, 4vw, 3rem);
  --lucht: clamp(3.5rem, 8vw, 7rem);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--papier);
  color: var(--inkt-zacht);
  font-family: var(--tekst);
  font-size: 1rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a { color: var(--inkt); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--klei-diep); }

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

.overslaan {
  position: absolute;
  left: -9999px;
  background: var(--inkt);
  color: var(--papier);
  padding: .75rem 1.25rem;
  z-index: 99;
}
.overslaan:focus { left: 1rem; top: 1rem; }

/* ---------------- Typografie ---------------- */

h1, h2, h3, h4, [id] {
  scroll-margin-top: 100px;
}

h1, h2, h3, h4 {
  font-family: var(--kop);
  font-weight: 600;
  color: var(--inkt);
  line-height: 1.04;
  letter-spacing: -0.005em;
  margin: 0 0 .6em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.6rem, 7.5vw, 5rem); text-transform: uppercase; }
h2 { font-size: clamp(1.9rem, 4vw, 3rem); text-transform: uppercase; }
h3 { font-size: clamp(1.15rem, 2vw, 1.45rem); }

p { margin: 0 0 1.1em; max-width: 62ch; }
p:last-child { margin-bottom: 0; }

.bovenschrift {
  font-family: var(--kop);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--grijs);
  margin: 0 0 1.1rem;
}
.bovenschrift--klei { color: var(--klei-diep); }

.inleiding {
  font-size: clamp(1.05rem, 1.7vw, 1.25rem);
  line-height: 1.65;
  color: var(--inkt-zacht);
  max-width: 56ch;
}

.klein { font-size: .875rem; color: var(--grijs); line-height: 1.6; }

/* ---------------- Raamwerk ---------------- */

.omhulsel {
  width: 100%;
  max-width: var(--omhulsel);
  margin-inline: auto;
  padding-inline: var(--marge);
}
.omhulsel--smal { max-width: 780px; }

.vlak { padding-block: var(--lucht); }
.vlak--lijn { border-top: 1px solid var(--lijn); }
.vlak--diep { background: var(--papier-diep); }
.vlak--inkt { background: var(--inkt); color: #d8d3cc; }
.vlak--inkt h2,
.vlak--inkt h3 { color: var(--papier); }
.vlak--inkt a { color: var(--papier); }
.vlak--inkt .bovenschrift { color: #9a938b; }

/* De kaderlijn uit het logo, als los element. */
.kaderlijn {
  border: 1px solid var(--inkt);
  padding: clamp(1.5rem, 3vw, 2.5rem);
}

/* ---------------- Beeldmerk ---------------- */

.merk { display: inline-block; text-decoration: none; color: inherit; }

.merk__kader {
  display: block;
  border: 1px solid currentColor;
  padding: .5rem .85rem .35rem;
  line-height: 1;
  color: var(--inkt);
}
.merk__woord {
  display: block;
  font-family: var(--kop);
  font-weight: 700;
  font-size: 1.6rem;
  letter-spacing: .01em;
  text-transform: uppercase;
  line-height: .95;
}
.merk__onder {
  display: block;
  font-family: var(--kop);
  font-weight: 400;
  font-size: .5rem;
  letter-spacing: .17em;
  text-transform: uppercase;
  text-align: right;
  margin-top: .3rem;
  color: var(--inkt);
}
.merk:hover .merk__kader { color: var(--klei-diep); }
.merk:hover .merk__onder { color: var(--klei-diep); }

.merk--voet .merk__kader,
.merk--voet .merk__onder { color: var(--papier); }
.merk--voet .merk__woord { font-size: 1.45rem; }

/* ---------------- Kop van de pagina ---------------- */

.kop {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(250, 249, 246, .93);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--lijn);
}
.kop__binnen {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 78px;
}

.kop__nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.4vw, 2.1rem);
}
.kop__nav > ul {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.4vw, 2.1rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
.kop__nav ul a {
  font-family: var(--kop);
  font-size: .93rem;
  font-weight: 400;
  letter-spacing: .09em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--inkt-zacht);
  padding-block: .35rem;
  border-bottom: 1px solid transparent;
  white-space: nowrap;
}
.kop__nav ul a:hover { color: var(--inkt); border-bottom-color: var(--inkt); }
.kop__nav ul a[aria-current='page'] { color: var(--inkt); border-bottom-color: var(--klei); }

.kop__schakel { display: none; }

@media (max-width: 900px) {
  .kop__binnen { min-height: 66px; }
  .kop__schakel {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    margin-left: auto;
    background: none;
    border: 1px solid var(--inkt);
    padding: .45rem .8rem;
    font-family: var(--kop);
    font-size: .8rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--inkt);
    cursor: pointer;
  }
  .kop__streep {
    width: 18px; height: 9px;
    border-top: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
  }
  .kop__nav {
    position: absolute;
    inset: 100% 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--papier);
    border-bottom: 1px solid var(--lijn);
    padding: .5rem var(--marge) 1.5rem;
    display: none;
  }
  .kop__nav.is-open { display: flex; }
  .kop__nav > ul { flex-direction: column; align-items: stretch; gap: 0; }
  .kop__nav li { border-bottom: 1px solid var(--lijn); }
  .kop__nav ul a { display: block; padding: .95rem 0; font-size: 1rem; border: 0; }
  .kop__oproep { margin-top: 1.25rem; text-align: center; }
}

/* ---------------- Knoppen ---------------- */

.knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  font-family: var(--kop);
  font-size: .95rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  padding: .95rem 1.9rem;
  border: 1px solid var(--inkt);
  background: var(--inkt);
  color: var(--papier);
  cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.knop:hover { background: var(--klei-diep); border-color: var(--klei-diep); color: #fff; }
.knop--klein { padding: .6rem 1.15rem; font-size: .82rem; }
.knop--stil { background: none; color: var(--inkt); }
.knop--stil:hover { background: var(--inkt); color: var(--papier); border-color: var(--inkt); }
.knop--licht { background: var(--papier); color: var(--inkt); border-color: var(--papier); }
.knop--licht:hover { background: var(--klei); border-color: var(--klei); color: #fff; }
.knop[disabled] { opacity: .5; cursor: progress; }

.knoprij { display: flex; flex-wrap: wrap; gap: .9rem; align-items: center; }

/* ---------------- Voorpagina ---------------- */

.held {
  padding-block: clamp(3rem, 7vw, 6rem) clamp(2.5rem, 5vw, 4.5rem);
}
.held__binnen {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: end;
}
.held h1 { margin-bottom: .35em; }
.held h1 em {
  font-style: normal;
  display: block;
  color: var(--klei);
}
.held__zij {
  border-left: 1px solid var(--lijn);
  padding-left: clamp(1.5rem, 3vw, 2.5rem);
}
.held__feit {
  display: flex;
  gap: 1rem;
  padding-block: .85rem;
  border-bottom: 1px solid var(--lijn);
  font-size: .93rem;
}
.held__feit:first-of-type { border-top: 1px solid var(--lijn); }
.held__feit dt {
  font-family: var(--kop);
  letter-spacing: .1em;
  text-transform: uppercase;
  font-size: .76rem;
  color: var(--grijs);
  flex: 0 0 8.5rem;
  padding-top: .18rem;
}
.held__feit dd { margin: 0; color: var(--inkt); }

@media (max-width: 800px) {
  .held__binnen { grid-template-columns: 1fr; }
  .held__zij { border-left: 0; padding-left: 0; }
}

/* Brede band met de kaderlijn, in plaats van een foto die er niet is. */
.band {
  border-block: 1px solid var(--inkt);
  padding-block: clamp(2.25rem, 5vw, 3.5rem);
  background: var(--wit);
  /* De schuinte van de Z uit het logo. De inhoud draait even ver terug,
     zodat alleen de randen scheef staan en de tekst gewoon recht. */
  transform: skewY(-1.4deg);
  margin-block: 1.2rem;
}
.band__binnen { transform: skewY(1.4deg); }
.band__binnen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(1.5rem, 3vw, 3rem);
}
.band__cel h3 {
  font-size: 1.05rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  margin-bottom: .5rem;
}
.band__cel p { font-size: .93rem; color: var(--grijs); margin: 0; }

/* ---------------- Rasters ---------------- */

.raster {
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 2rem);
}
.raster--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.raster--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); }

.kaart {
  background: var(--wit);
  border: 1px solid var(--lijn);
  padding: clamp(1.4rem, 2.5vw, 2rem);
  transition: transform .25s ease, box-shadow .25s ease, border-color .2s ease;
}
.kaart:hover {
  transform: translate(-3px, -3px);
  box-shadow: 6px 6px 0 var(--kalk);
  border-color: var(--inkt);
}
.kaart--stil { background: none; }
.kaart h3 { margin-bottom: .5rem; }
.kaart p { font-size: .95rem; }

/* Genummerde stappen: een zigzag over de pagina, de baan van de Z.
   De cijfers staan er groot en alleen als contour naast, zodat ze de
   maat aangeven zonder te schreeuwen. */
.stappen { counter-reset: stap; list-style: none; margin: 0; padding: 0; }
.stappen li {
  counter-increment: stap;
  position: relative;
  width: min(100%, 36rem);
  background: var(--wit);
  border: 1px solid var(--lijn);
  padding: 1.5rem 1.7rem 1.5rem 5.9rem;
  margin-bottom: 1.3rem;
  transition: border-color .2s ease, box-shadow .25s ease;
}
.stappen li:nth-child(even) { margin-left: auto; }
.stappen li:hover { border-color: var(--inkt); box-shadow: 6px 6px 0 var(--kalk); }
.stappen li::before {
  content: counter(stap, decimal-leading-zero);
  position: absolute;
  left: .9rem;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--kop);
  font-size: 3.3rem;
  font-weight: 700;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--inkt);
}
@supports not (-webkit-text-stroke: 1px black) {
  .stappen li::before { color: var(--kalk); }
}
.stappen h3 { margin-bottom: .35rem; }
.stappen p { margin: 0; font-size: .96rem; }

@media (max-width: 700px) {
  .stappen li { width: 100%; padding-left: 4.8rem; }
  .stappen li::before { font-size: 2.5rem; left: .8rem; }
}

/* ---------------- Prijslijst ---------------- */

.prijstabel { width: 100%; border-collapse: collapse; }
.prijstabel caption {
  text-align: left;
  font-family: var(--kop);
  font-size: .78rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--grijs);
  padding-bottom: .9rem;
}
.prijstabel th,
.prijstabel td {
  text-align: left;
  padding: 1rem .6rem 1rem 0;
  border-bottom: 1px solid var(--lijn);
  vertical-align: top;
}
.prijstabel thead th {
  font-family: var(--kop);
  font-size: .76rem;
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--grijs);
  border-bottom-color: var(--inkt);
  padding-bottom: .55rem;
}
.prijstabel .naam { font-weight: 600; color: var(--inkt); display: block; }
.prijstabel .uitleg { font-size: .89rem; color: var(--grijs); display: block; margin-top: .2rem; }
.prijstabel .bedrag {
  font-family: var(--kop);
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--inkt);
  white-space: nowrap;
  text-align: right;
  padding-right: 0;
}
.tabelrol { overflow-x: auto; }

/* ---------------- Werk ---------------- */

.werkraster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: clamp(1rem, 2vw, 1.6rem);
}
.werk {
  border: 1px solid var(--lijn);
  background: var(--wit);
  display: flex;
  flex-direction: column;
}
.werk__beeld { background: var(--papier-diep); aspect-ratio: 4 / 5; overflow: hidden; }
.werk__beeld img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.werk:hover .werk__beeld img { transform: scale(1.03); }
.werk__tekst { padding: 1.1rem 1.2rem 1.3rem; }
.werk__titel {
  font-family: var(--kop);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--inkt);
  margin: 0 0 .25rem;
  text-transform: uppercase;
  letter-spacing: .02em;
}
.werk__waar {
  font-size: .8rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--grijs);
  font-family: var(--kop);
}
.werk__verhaal { font-size: .92rem; margin: .7rem 0 0; color: var(--inkt-zacht); }

/* Lege staat: een kader met een uitnodiging, geen nepfoto's. */
.leeg {
  border: 1px dashed var(--lijn);
  padding: clamp(2rem, 5vw, 3.5rem);
  text-align: center;
  background: var(--wit);
}
.leeg h3 { margin-bottom: .5rem; }
.leeg p { margin-inline: auto; }

/* ---------------- Beoordelingen ---------------- */

.cijfer {
  display: flex;
  align-items: baseline;
  gap: .7rem;
  font-family: var(--kop);
}
.cijfer strong { font-size: clamp(2.5rem, 6vw, 3.6rem); font-weight: 600; line-height: 1; }
.cijfer span { font-size: .85rem; letter-spacing: .14em; text-transform: uppercase; }

.sterren { letter-spacing: .18em; color: var(--klei); font-size: 1rem; }
.vlak--inkt .sterren { color: #e0a983; }

.review { border-top: 1px solid var(--lijn); padding-block: 1.5rem; }
.vlak--inkt .review { border-top-color: #33302c; }
.review blockquote { margin: .5rem 0 .7rem; font-size: 1.02rem; }
.review figcaption {
  font-family: var(--kop);
  font-size: .8rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--grijs);
}

/* ---------------- Oproep ---------------- */

.oproep__binnen {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}
@media (max-width: 760px) {
  .oproep__binnen { grid-template-columns: 1fr; }
}

/* ---------------- Voet ---------------- */

.voet {
  background: var(--inkt);
  color: #a8a29a;
  padding-block: clamp(3rem, 6vw, 4.5rem) 2rem;
  font-size: .93rem;
}
.voet__binnen {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: clamp(1.75rem, 4vw, 3rem);
  padding-bottom: 2.5rem;
}
.voet__kop {
  font-family: var(--kop);
  font-size: .76rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #7d766e;
  margin: 0 0 .9rem;
}
.voet__lijst { list-style: none; margin: 0; padding: 0; font-style: normal; line-height: 2; }
.voet a { color: #ddd7cf; text-decoration: none; }
.voet a:hover { color: #fff; text-decoration: underline; }
.voet__zin { margin: 1.2rem 0 0; color: #8d867e; max-width: 34ch; font-size: .9rem; }
.voet__klein { font-size: .82rem; color: #7d766e; margin-top: .8rem; }
.voet__gebied {
  border-top: 1px solid #2b2825;
  padding-top: 1.75rem;
  padding-bottom: 1.75rem;
}
.voet__gebied p { color: #8d867e; font-size: .85rem; max-width: none; }
.voet__slot {
  border-top: 1px solid #2b2825;
  padding-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.75rem;
  justify-content: space-between;
  font-size: .82rem;
  color: #7d766e;
}
.voet__slot p { margin: 0; }
.voet__slot a { margin-right: 1.25rem; }

@media (max-width: 860px) {
  .voet__binnen { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  .voet__binnen { grid-template-columns: 1fr; }
}

/* ================================================================
   De offertecalculator
   ================================================================ */

.rekenaar__binnen {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 366px;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}
@media (max-width: 1000px) {
  .rekenaar__binnen { grid-template-columns: 1fr; }
}

.stap {
  border: 0;
  border-top: 1px solid var(--inkt);
  margin: 0 0 clamp(2rem, 4vw, 3rem);
  padding: clamp(1.5rem, 3vw, 2.2rem) 0 0;
}
.stap legend {
  /* De streep van de fieldset loopt over de volle breedte. Zonder een eigen
     ondergrond loopt hij dwars door het opschrift heen. */
  background: var(--papier);
  padding: 0 1.1rem 0 0;
  display: flex;
  align-items: center;
  gap: .9rem;
  font-family: var(--kop);
  font-size: clamp(1.25rem, 2.4vw, 1.7rem);
  font-weight: 600;
  color: var(--inkt);
  text-transform: uppercase;
  letter-spacing: .01em;
}
.stap__nr {
  border: 1px solid var(--inkt);
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .08em;
  padding: .15rem .55rem .1rem;
}
.stap__uitleg { margin: .9rem 0 1.4rem; color: var(--grijs); font-size: .95rem; }
.stap__voetnoot {
  margin: 1.2rem 0 0;
  font-size: .84rem;
  color: var(--grijs);
  border-left: 1px solid var(--lijn);
  padding-left: 1rem;
  max-width: 60ch;
}

/* Schakelaar tussen per wand, per kamer en totaal */
.schakelaar {
  display: inline-flex;
  flex-wrap: wrap;
  border: 1px solid var(--inkt);
  margin-bottom: 1.5rem;
}
/* Op een smal scherm vouwt de rij; laat de knoppen dan meegroeien,
   anders blijft er naast de gevouwen knop een leeg vak staan. */
@media (max-width: 560px) {
  .schakelaar { display: flex; }
  .schakelaar__knop { flex: 1 1 auto; border-top: 1px solid var(--inkt); margin-top: -1px; }
}
.schakelaar__knop {
  background: none;
  border: 0;
  border-right: 1px solid var(--inkt);
  padding: .65rem 1.1rem;
  font-family: var(--kop);
  font-size: .82rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--inkt-zacht);
  cursor: pointer;
}
.schakelaar__knop:last-child { border-right: 0; }
.schakelaar__knop.is-aan { background: var(--inkt); color: var(--papier); }

/* Rijen met wanden */
.wand {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) 4.6rem 2rem;
  gap: .6rem .9rem;
  align-items: end;
  padding-block: .9rem;
  border-bottom: 1px solid var(--lijn);
}
.wand:first-child { border-top: 1px solid var(--lijn); }
.wand__nr {
  font-family: var(--kop);
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--grijs);
  padding-bottom: .65rem;
}
.wand__veld { margin: 0; }
.wand__veld > span {
  display: block;
  font-size: .72rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--grijs);
  margin-bottom: .3rem;
}
.wand__m2 {
  font-family: var(--kop);
  font-size: .95rem;
  color: var(--inkt);
  text-align: right;
  padding-bottom: .55rem;
  white-space: nowrap;
}
.wand__weg {
  background: none;
  border: 1px solid var(--lijn);
  color: var(--grijs);
  width: 2rem;
  height: 2rem;
  line-height: 1;
  font-size: 1.1rem;
  cursor: pointer;
  margin-bottom: .35rem;
}
.wand__weg:hover { border-color: var(--klei); color: var(--klei-diep); }

@media (max-width: 760px) {
  .wand {
    grid-template-columns: 1fr 1fr;
    gap: .6rem .8rem;
    position: relative;
    padding-top: 2.2rem;
  }
  .wand__nr { position: absolute; top: .7rem; left: 0; padding: 0; }
  .wand__veld:first-of-type { grid-column: 1 / -1; }
  .wand__m2 { text-align: left; padding-bottom: 0; align-self: center; }
  .wand__weg { position: absolute; top: .45rem; right: 0; margin: 0; }
}

.toevoegen {
  margin-top: 1rem;
  background: none;
  border: 1px dashed var(--lijn);
  padding: .7rem 1.2rem;
  font-family: var(--kop);
  font-size: .84rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--inkt-zacht);
  cursor: pointer;
}
.toevoegen:hover { border-color: var(--inkt); border-style: solid; }

.m2regel {
  margin-top: 1.1rem;
  font-family: var(--kop);
  font-size: .95rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--grijs);
}
.m2regel strong { color: var(--inkt); font-size: 1.35rem; font-weight: 600; }

/* Keuzevakken */
.keuzes { display: grid; gap: .7rem; }
.keuzes--vast { margin-top: .7rem; }

.keuze {
  position: relative;
  display: block;
  border: 1px solid var(--lijn);
  background: var(--wit);
  padding: 1rem 1.15rem 1rem 3rem;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.keuze:hover { border-color: var(--inkt); }
.keuze input {
  position: absolute;
  left: 1.15rem;
  top: 1.2rem;
  width: 1rem;
  height: 1rem;
  margin: 0;
  accent-color: var(--klei);
}
.keuze:has(input:checked) { border-color: var(--inkt); background: var(--papier-diep); }
.keuze:has(input:focus-visible) { outline: 2px solid var(--klei); outline-offset: 2px; }
.keuze__binnen { display: block; }
.keuze__naam { display: block; font-weight: 600; color: var(--inkt); }
.keuze__uitleg { display: block; font-size: .87rem; color: var(--grijs); margin-top: .15rem; }
.keuze__prijs {
  display: block;
  margin-top: .45rem;
  font-family: var(--kop);
  font-size: .88rem;
  letter-spacing: .06em;
  color: var(--klei-diep);
}
.keuze--nul .keuze__prijs { color: var(--grijs); }

/* Gewone velden */
.velden {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 0 1.1rem;
}
.veld { display: block; margin-bottom: 1.15rem; }
.veld > span {
  display: block;
  font-size: .76rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--grijs);
  margin-bottom: .35rem;
}
.veld em { font-style: normal; color: var(--klei); }
.veld--kort { max-width: 260px; }
.veld small { display: block; margin-top: .35rem; font-size: .82rem; color: var(--klei-diep); }

input[type='text'],
input[type='email'],
input[type='tel'],
input[type='number'],
input[type='password'],
select,
textarea {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  color: var(--inkt);
  background: var(--wit);
  border: 1px solid var(--lijn);
  border-radius: 0;
  padding: .7rem .85rem;
  appearance: none;
}
select {
  background-image: linear-gradient(45deg, transparent 50%, var(--inkt) 50%),
    linear-gradient(135deg, var(--inkt) 50%, transparent 50%);
  background-position: calc(100% - 18px) calc(50% + 2px), calc(100% - 12px) calc(50% + 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2.2rem;
}
textarea { resize: vertical; min-height: 7rem; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--inkt); box-shadow: inset 0 0 0 1px var(--inkt); }
input::placeholder, textarea::placeholder { color: #a8a29a; }

.valstrik { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.fout {
  border-left: 3px solid var(--klei);
  background: var(--klei-licht);
  color: var(--klei-diep);
  padding: .9rem 1.1rem;
  margin-bottom: 1.25rem;
  font-size: .95rem;
}
.gelukt {
  border-left: 3px solid #4a7a3c;
  background: #eaf1e7;
  color: #2f5225;
  padding: .9rem 1.1rem;
  margin-bottom: 1.25rem;
  font-size: .95rem;
}

.versturen { width: 100%; margin-top: .5rem; }

/* Het meelopende overzicht */
.overzicht { position: sticky; top: 100px; }
.overzicht__kaart {
  border: 1px solid var(--inkt);
  background: var(--wit);
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
}
.regels { list-style: none; margin: 0 0 1rem; padding: 0; }
.regels li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-block: .6rem;
  border-bottom: 1px solid var(--lijn);
  font-size: .9rem;
  align-items: baseline;
}
.regels__naam { color: var(--inkt); }
.regels__naam em {
  display: block;
  font-style: normal;
  font-size: .8rem;
  color: var(--grijs);
  margin-top: .1rem;
}
.regels__bedrag { font-family: var(--kop); font-size: 1rem; color: var(--inkt); white-space: nowrap; }
.regels__leeg { color: var(--grijs); font-size: .9rem; display: block; border-bottom: 0; }
.regels__minimum .regels__naam { color: var(--klei-diep); }

.totaal {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  border-top: 1px solid var(--inkt);
  padding-top: .9rem;
  font-family: var(--kop);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: .8rem;
  color: var(--grijs);
}
.totaal strong { font-size: clamp(1.5rem, 3vw, 1.9rem); color: var(--inkt); letter-spacing: 0; }

.overzicht__noot { margin-top: 1rem; font-size: .82rem; color: var(--grijs); }
.overzicht__vast { margin: 1.25rem 0 0; border-top: 1px solid var(--lijn); padding-top: 1rem; }
.overzicht__vast dt {
  font-family: var(--kop);
  font-size: .74rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--inkt);
  margin-top: .9rem;
}
.overzicht__vast dd { margin: .25rem 0 0; font-size: .81rem; color: var(--grijs); }

@media (max-width: 1000px) {
  .overzicht { position: static; margin-top: 2rem; }
}

.uitkomst__regels { margin-top: 1.5rem; }

/* ---------------- Losse hulpjes ---------------- */

.midden { text-align: center; }
.geenmarge { margin: 0; }
.scheiding { border: 0; border-top: 1px solid var(--lijn); margin-block: var(--lucht); }
.merkenrij {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem .6rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.merkenrij li {
  border: 1px solid var(--lijn);
  padding: .4rem .8rem;
  font-family: var(--kop);
  font-size: .82rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--inkt-zacht);
}
.vlak--inkt .merkenrij li { border-color: #34312d; color: #c6c0b8; }

.let {
  border: 1px solid var(--klei);
  background: var(--klei-licht);
  padding: 1rem 1.2rem;
  font-size: .92rem;
  color: var(--klei-diep);
}
.let strong { color: var(--klei-diep); }

@media print {
  .kop, .voet, .knop, .overslaan { display: none !important; }
  body { background: #fff; }
}

/* ================================================================
   Dynamiek en patroon
   Behang is patroon, dus de site draagt er zelf ook een. Alles wat
   beweegt zit achter de klasse .beweegt, die door site.js alleen
   wordt gezet als de bezoeker geen bezwaar tegen beweging heeft.
   ================================================================ */

/* ---------- Pijl in de knoppen ---------- */
.knop:not(.knop--klein)::after {
  content: '\2192';
  transition: transform .2s ease;
}
.knop:not(.knop--klein):hover::after { transform: translateX(5px); }

/* ---------- Het contourwoord achter een vlak ---------- */
.heeft-water { position: relative; overflow: hidden; }
.heeft-water > .omhulsel { position: relative; z-index: 1; }
.water {
  position: absolute;
  top: .2rem;
  right: -.04em;
  font-family: var(--kop);
  font-weight: 700;
  font-size: clamp(5rem, 16vw, 12.5rem);
  line-height: .82;
  letter-spacing: .02em;
  text-transform: uppercase;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1.5px #ddd2c0;
  pointer-events: none;
  user-select: none;
}
@supports not (-webkit-text-stroke: 1px black) {
  .water { color: var(--papier-diep); }
}
.vlak--inkt .water { -webkit-text-stroke-color: #34302b; }
@supports not (-webkit-text-stroke: 1px black) {
  .vlak--inkt .water { color: #1d1b19; }
}

/* ---------- De staalkaart naast de kop van de voorpagina ---------- */
.staalboek {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .7rem;
  margin-bottom: 1.5rem;
}
.staal {
  display: block;
  text-decoration: none;
  border: 1px solid var(--lijn);
  background: var(--wit);
  padding: .45rem .45rem .55rem;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.staal__vlak {
  display: block;
  aspect-ratio: 5 / 4;
  overflow: hidden;
  transition: transform .3s ease;
}
.staal__naam {
  display: block;
  margin-top: .5rem;
  font-family: var(--kop);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--inkt-zacht);
}
.staal:hover {
  border-color: var(--inkt);
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0 var(--kalk);
}
.staal:hover .staal__naam { color: var(--klei-diep); }

/* ---------- De lichtkrant met de behangsoorten ---------- */
.lichtkrant {
  overflow: hidden;
  border-block: 1px solid var(--inkt);
  background: var(--wit);
  padding-block: .85rem;
}
.lichtkrant__baan {
  display: flex;
  align-items: center;
  gap: 2.4rem;
  width: max-content;
  padding-right: 2.4rem;
}
.lichtkrant span {
  font-family: var(--kop);
  font-size: .95rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--inkt);
  white-space: nowrap;
}
.lichtkrant__ster { color: var(--klei); font-size: .7rem; }
.beweegt .lichtkrant__baan { animation: lichtkrant 30s linear infinite; }
.lichtkrant:hover .lichtkrant__baan { animation-play-state: paused; }
@keyframes lichtkrant {
  to { transform: translateX(-50%); }
}

/* ---------- Staaltjes in de prijstabel ---------- */
.staalcel { width: 66px; }
.staalcel span {
  display: block;
  width: 54px;
  height: 54px;
  border: 1px solid var(--lijn);
}

/* ---------- Het muurtje van staaltjes bij een leeg portfolio ---------- */
.patroonmuur {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .5rem;
  max-width: 340px;
  margin: 0 auto 1.75rem;
}
.patroonmuur span {
  display: block;
  aspect-ratio: 1;
  border: 1px solid var(--lijn);
}

/* ---------- De scheve baan op de foutpagina ---------- */
.baan--scheef {
  display: block;
  width: 120px;
  height: 190px;
  margin: 0 auto 2.2rem;
  border: 1px solid var(--inkt);
  transform: rotate(4deg);
  box-shadow: 9px 11px 0 var(--kalk);
}

/* ---------- Onthullen bij het scrollen ----------
   site.js zet .onthul op de vaste bouwstenen en haalt hem weer weg
   zodra het element in beeld is geweest. Zonder javascript of met
   beweging-uit bestaat de klasse niet en staat alles er gewoon. */
.beweegt .onthul {
  opacity: 0;
  transform: translateY(22px);
}
.beweegt tr.onthul,
.beweegt .prijstabel .onthul { transform: none; }
.beweegt .onthul.is-er {
  opacity: 1;
  transform: none;
  transition: opacity .55s ease, transform .55s ease;
  transition-delay: var(--wacht, 0ms);
}

/* ---------- De kop verankert zodra je scrolt ---------- */
.kop.is-diep { box-shadow: 0 1px 0 var(--inkt); }

/* ---------- Rust voor wie dat wil ---------- */
@media (prefers-reduced-motion: reduce) {
  .lichtkrant__baan { animation: none !important; }
  .kaart:hover, .staal:hover, .stappen li:hover { transform: none; }
}

/* ================================================================
   Nieuwe onderdelen: kruimelpad, uitklapmenu, contactknoppen,
   vragenlijst, linkkaarten en de projectpagina.
   ================================================================ */

.verborgen-tekst {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Kruimelpad ---------- */
.kruimels {
  border-bottom: 1px solid var(--lijn);
  background: var(--papier);
  font-size: .82rem;
}
.kruimels ol {
  display: flex; flex-wrap: wrap; align-items: center; gap: .45rem;
  list-style: none; margin: 0; padding: .7rem 0;
}
.kruimels li { display: flex; align-items: center; gap: .45rem; }
.kruimels a { color: var(--grijs); text-decoration: none; }
.kruimels a:hover { color: var(--inkt); text-decoration: underline; }
.kruimels span[aria-current] { color: var(--inkt); font-weight: 600; }
.kruimels__streep { color: var(--kalk); }

/* ---------- Uitklapmenu ---------- */
.kop__vouw { position: relative; }
.kop__vouwknop {
  display: inline-flex; align-items: center; gap: .35rem;
  background: none; border: 0; cursor: pointer; padding: .35rem 0;
  font-family: var(--kop); font-size: .93rem; letter-spacing: .09em;
  text-transform: uppercase; color: var(--inkt-zacht);
  border-bottom: 1px solid transparent;
}
.kop__vouwknop:hover, .kop__vouw.is-open .kop__vouwknop {
  color: var(--inkt); border-bottom-color: var(--inkt);
}
.kop__pijl { font-size: .6rem; transition: transform .2s ease; }
.kop__vouw.is-open .kop__pijl { transform: rotate(180deg); }
.kop__nav ul.kop__onder {
  position: absolute; top: calc(100% + .6rem); left: -1rem;
  min-width: 16rem; background: var(--wit);
  border: 1px solid var(--inkt); padding: .5rem 0;
  list-style: none; margin: 0; z-index: 50; display: none;
  box-shadow: 5px 5px 0 var(--kalk);
}
.kop__vouw.is-open ul.kop__onder { display: block; }
.kop__onder li { border: 0; }
.kop__onder a {
  display: block; padding: .55rem 1.1rem; font-size: .88rem;
  letter-spacing: .05em; text-transform: none; border: 0; white-space: normal;
}
.kop__onder a:hover { background: var(--papier-diep); color: var(--inkt); }

.kop__acties { display: flex; align-items: center; gap: 1rem; }
.kop__bellen {
  font-family: var(--kop); font-size: .88rem; letter-spacing: .06em;
  text-decoration: none; color: var(--inkt); white-space: nowrap;
}
.kop__bellen:hover { color: var(--klei-diep); }

@media (max-width: 1100px) { .kop__bellen { display: none; } }
@media (max-width: 900px) {
  .kop__vouwknop { width: 100%; justify-content: space-between; padding: .95rem 0; font-size: 1rem; }
  .kop__onder {
    position: static; border: 0; box-shadow: none; min-width: 0;
    padding: 0 0 .6rem 1rem; background: none;
  }
  .kop__onder a { padding: .5rem 0; }
  .kop__acties { flex-direction: column; align-items: stretch; gap: .6rem; margin-top: 1.25rem; }
  .kop__bellen { display: block; text-align: center; border: 1px solid var(--lijn); padding: .75rem; }
}

/* ---------- Contactknoppen ---------- */
.contactknoppen { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; }
.contactknoppen--held, .contactknoppen--ruim { margin-top: 2rem; }
.knop--app {
  background: #1f7a45; border-color: #1f7a45; color: #fff;
}
.knop--app:hover { background: #176036; border-color: #176036; }
.vlak--inkt .knop--app, .voet .knop--app { color: #fff; }

/* ---------- Vragenlijst ---------- */
.vragen { margin-top: 2.5rem; border-top: 1px solid var(--lijn); }
.vraag { border-bottom: 1px solid var(--lijn); padding: 0; }
.vraag summary {
  cursor: pointer; list-style: none; padding: 1.15rem 2.5rem 1.15rem 0;
  position: relative;
}
.vraag summary::-webkit-details-marker { display: none; }
.vraag summary h3 {
  display: inline; margin: 0; font-size: 1.05rem;
  font-family: var(--kop); font-weight: 600; color: var(--inkt);
}
.vraag summary::after {
  content: '+'; position: absolute; right: .3rem; top: 50%;
  transform: translateY(-50%); font-family: var(--kop); font-size: 1.5rem;
  color: var(--klei); line-height: 1;
}
.vraag[open] summary::after { content: '\2212'; }
.vraag summary:hover h3 { color: var(--klei-diep); }
.vraag > p { margin: 0 0 1.3rem; max-width: 68ch; color: var(--inkt-zacht); }

/* ---------- Linkkaarten ---------- */
.kaart--link {
  display: block; text-decoration: none; position: relative;
  padding-bottom: 3rem;
}
.kaart--link h3 { color: var(--inkt); }
.kaart--link p { color: var(--grijs); font-size: .93rem; }
.kaart--link .kaart__pijl {
  position: absolute; left: clamp(1.4rem, 2.5vw, 2rem); bottom: 1.3rem;
  font-family: var(--kop); font-size: 1.1rem; color: var(--klei-diep);
  transition: transform .2s ease;
}
.kaart--link:hover .kaart__pijl { transform: translateX(5px); }
.kaart--klem { background: var(--papier-diep); }
.kaart--kort { padding-bottom: 3rem; }
.kaart--kort h3 { margin: 0; }

/* ---------- Prijsblok op een dienstenpagina ---------- */
.band__prijs { margin: 0; font-size: 1rem; }
.band__vanaf, .band__eenheid {
  display: block; font-family: var(--kop); font-size: .72rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--grijs);
}
.band__prijs strong {
  display: block; font-size: clamp(2rem, 4vw, 2.8rem);
  line-height: 1.05; color: var(--inkt); margin: .1rem 0;
}

/* ---------- Genummerde prijsfactoren ---------- */
.factoren { counter-reset: factor; list-style: none; margin: 2rem 0 0; padding: 0; }
.factoren li {
  counter-increment: factor; position: relative;
  padding: 1.25rem 0 1.25rem 3.4rem; border-top: 1px solid var(--lijn);
}
.factoren li:last-child { border-bottom: 1px solid var(--lijn); }
.factoren li::before {
  content: counter(factor, decimal-leading-zero);
  position: absolute; left: 0; top: 1.35rem;
  font-family: var(--kop); font-size: .95rem; font-weight: 500;
  color: var(--klei-diep); letter-spacing: .04em;
}
.factoren h3 { margin-bottom: .3rem; font-size: 1.08rem; }
.factoren p { margin: 0; font-size: .96rem; }

/* ---------- Projectkaart en projectpagina ---------- */
.werk__lees {
  display: inline-block; margin-top: .8rem;
  font-family: var(--kop); font-size: .8rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--klei-diep);
}
.werk:hover .werk__lees { color: var(--inkt); }
a.werk { text-decoration: none; color: inherit; }

.project__kop {
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem); align-items: start; margin-top: 2rem;
}
.project__beeld { border: 1px solid var(--lijn); background: var(--papier-diep); }
.project__beeld img { width: 100%; height: auto; display: block; }
.project__kaart {
  border: 1px solid var(--inkt); background: var(--wit);
  padding: clamp(1.25rem, 2.5vw, 1.75rem); position: sticky; top: 100px;
}
@media (max-width: 860px) {
  .project__kop { grid-template-columns: 1fr; }
  .project__kaart { position: static; }
}

/* ---------- Plaatsenrij in de voet ---------- */
.voet__plaatsen {
  display: flex; flex-wrap: wrap; gap: .4rem 1.4rem;
  list-style: none; margin: 0; padding: 0; font-size: .88rem;
}
.voet__knoppen { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.2rem; }

/* ---------- Foto's meesturen bij de offerte ---------- */
.fotoveld {
  border: 1px dashed var(--lijn); background: var(--wit);
  padding: 1.1rem 1.2rem 1.2rem; margin-bottom: 1.15rem;
}
.fotoveld input[type='file'] { font-size: .9rem; }
.fotolijst {
  margin-top: .7rem; font-size: .88rem; color: var(--klei-diep);
  min-height: 1.2em;
}

/* ---------- Uitslag van de rollencalculator ---------- */
.uitslag__groot {
  margin: .4rem 0 .2rem;
  font-family: var(--kop);
  line-height: 1;
}
.uitslag__groot strong {
  font-size: clamp(3.2rem, 8vw, 4.6rem);
  font-weight: 700;
  color: var(--inkt);
}
.uitslag__groot span {
  font-size: 1rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--grijs);
  margin-left: .4rem;
}
.uitslag__melding { margin: .9rem 0 0; font-size: .86rem; }
.uitslag__cijfers {
  margin: 1.25rem 0 0;
  border-top: 1px solid var(--lijn);
}
.uitslag__cijfers > div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: baseline;
  padding: .6rem 0;
  border-bottom: 1px solid var(--lijn);
  font-size: .89rem;
}
.uitslag__cijfers dt { color: var(--grijs); }
.uitslag__cijfers dd {
  margin: 0;
  font-family: var(--kop);
  font-size: 1rem;
  color: var(--inkt);
  white-space: nowrap;
}

/* ---------- Losse posten met een aantal ---------- */
.losselijst { display: grid; gap: .7rem; }
.losspost {
  display: flex; align-items: center; gap: 1rem;
  border: 1px solid var(--lijn); background: var(--wit);
  padding: .95rem 1.15rem; cursor: default;
}
.losspost__tekst { flex: 1 1 auto; min-width: 0; }
.losspost__naam { display: block; font-weight: 600; color: var(--inkt); }
.losspost__uitleg { display: block; font-size: .87rem; color: var(--grijs); margin-top: .15rem; }
.losspost__prijs {
  display: block; margin-top: .45rem; font-family: var(--kop);
  font-size: .88rem; letter-spacing: .06em; color: var(--klei-diep);
}
.losspost__aantal {
  flex: 0 0 4.5rem; width: 4.5rem; text-align: center;
  font-family: var(--kop); font-size: 1.05rem;
}
.losspost:focus-within { border-color: var(--inkt); }

/* ---------- Btw-regels in het overzicht ---------- */
.totaal--excl {
  border-top: 1px solid var(--lijn);
  font-size: .74rem;
}
.totaal--excl strong { font-size: 1.15rem; color: var(--inkt-zacht); }
.btwregels { list-style: none; margin: 0 0 .3rem; padding: 0; }
.btwregels li {
  display: flex; justify-content: space-between; gap: 1rem;
  font-size: .8rem; color: var(--grijs); padding: .3rem 0;
}
.regels__korting .regels__naam { color: #2f5225; }
.regels__korting .regels__bedrag { color: #2f5225; }

/* ---------- Vinkje in een kader, voor de btw-vraag ---------- */
.vink--kader {
  border: 1px solid var(--lijn); background: var(--wit);
  padding: .95rem 1.15rem; margin: 1.25rem 0;
}
.vink--kader label > span:first-child { font-weight: 600; color: var(--inkt); }

/* ================================================================
   Foto's
   Elke foto zit in een figure met een kader eromheen, zodat een
   beeld nooit los in de tekst zweeft. Het onderschrift hoort erbij
   en staat er niet voor de sier: het vertelt wat je ziet.
   ================================================================ */

.beeld { margin: 0; }
.beeld__vlak {
  border: 1px solid var(--lijn);
  background: var(--papier-diep);
  overflow: hidden;
  position: relative;
}
.beeld__vlak img { display: block; width: 100%; height: auto; }
.beeld__bij {
  margin-top: .7rem;
  font-size: .85rem;
  line-height: 1.55;
  color: var(--grijs);
  max-width: 56ch;
}

/* Een streepje klei naast het onderschrift, hetzelfde gebaar als bij
   de bovenschriften elders op de site. */
.beeld__bij::before {
  content: '';
  display: inline-block;
  width: 1.4rem; height: 1px;
  background: var(--klei);
  vertical-align: middle;
  margin-right: .6rem;
}

.beeld--breed { margin: 2.25rem 0 .5rem; }
.beeld--zij   { margin-top: 2.25rem; max-width: 520px; }
.beeld--kop   { margin-top: 0; }

/* De kop van een dienstenpagina: tekst links, foto rechts. Onder de
   900 pixels gaan ze onder elkaar staan en komt de foto onderaan,
   want de kop en de inleiding zijn belangrijker dan het beeld. */
.dienst__kop {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}
@media (max-width: 900px) {
  .dienst__kop { grid-template-columns: 1fr; }
  .beeld--zij { max-width: none; }
}

/* ---------- De schuivende strook met eerder werk ---------- */
.beeldstrook {
  border-block: 1px solid var(--lijn);
  background: var(--papier-diep);
  padding-block: clamp(1.5rem, 3vw, 2.5rem);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}
.beeldstrook::-webkit-scrollbar { display: none; }
.beeldstrook__spoor { display: flex; width: max-content; }
.beeldstrook__rij {
  display: flex;
  gap: clamp(.75rem, 1.5vw, 1.25rem);
  margin: 0;
  padding: 0 clamp(.375rem, .75vw, .625rem);
  list-style: none;
}
.beeldstrook__cel {
  flex: 0 0 auto;
  width: clamp(150px, 20vw, 250px);
  border: 1px solid var(--lijn);
  background: var(--wit);
  overflow: hidden;
}
.beeldstrook__cel img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  filter: saturate(.94);
  transition: filter .4s ease, transform .5s ease;
}
.beeldstrook__cel:hover img { filter: saturate(1.06); transform: scale(1.04); }

/* Schuiven doet hij alleen als beweging aan mag staan. Staat het uit,
   dan blijft het een strook waar je zelf doorheen veegt, en dat werkt
   ook zonder animatie gewoon. */
.beweegt .beeldstrook { overflow-x: hidden; }
.beweegt .beeldstrook__spoor { animation: beeldstrook 64s linear infinite; }
.beweegt .beeldstrook:hover .beeldstrook__spoor { animation-play-state: paused; }
@keyframes beeldstrook {
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .beeldstrook__spoor { animation: none !important; }
  .beeldstrook { overflow-x: auto !important; }
  .beeldstrook__cel:hover img { transform: none; }
}