/* Van Roy Services — de volledige opmaak
   ---------------------------------------------------------------------------
   Geport uit de designoplevering (input/008. Van Roy Services): de prototypes
   in design/*.dc.html zijn de pixelreferentie, de tokens komen uit §4 van de
   handoff-README. De breekpunten volgen de huisregel 375/768/1024/1440; op
   die vier breedtes is de weergave gelijk aan het prototype (dat zelf
   640/900/1100/1200 gebruikt), zie CONVENTIES.md §2.
   ------------------------------------------------------------------------- */

:root {
  --ink: #0a0f14;
  --ink-2: #2b3a48;
  --slate: #4b5a68;
  --navy: #03293a;
  --petrol: #0b4a63;
  --teal: #007a96;
  --teal-mid: #12b0cb;
  --aqua: #8fdcea;
  --mist: #f1f8fa;
  --mist-2: #f7fbfc;
  --sand: #e2d5b8;
  --brown: #5a3f22;
  --oranje: #f55a0a;
  --oranje-donker: #c04a03;
  --fout: #b23b00;
  --fout-tekst: #8a3500;
  --fout-bg: rgba(245, 90, 10, 0.1);
  --waarschuw-bg: #fff1e8;
  --lijn: rgba(3, 41, 58, 0.08);
  --veldrand: rgba(3, 41, 58, 0.18);

  /* De dikte van de decoratieve cirkels. Stond op 1px zoals in het prototype;
     de klant vroeg op 19-10-2026 om een iets dikker lijntje. Eén token, want
     die cirkels staan op achttien plekken en horen allemaal gelijk te zijn. */
  --ring-dikte: 2px;

  --schaduw-kaart: 0 12px 32px rgba(0, 62, 76, 0.08);
  --schaduw-formulier: 0 0 0 1px rgba(3, 41, 58, 0.08), 0 16px 40px rgba(0, 62, 76, 0.06);
  --schaduw-dropdown: 0 16px 40px rgba(3, 41, 58, 0.14);
  --schaduw-cta: 0 10px 24px -12px rgba(245, 90, 10, 0.7);
  --schaduw-cta-hover: 0 16px 32px -12px rgba(245, 90, 10, 0.85);
  --schaduw-balk: 0 10px 30px rgba(3, 41, 58, 0.18), 0 0 0 1px rgba(3, 41, 58, 0.06);

  --uit: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ------------------------------------------------------------------ basis */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: #fff;
  color: var(--ink);
  font-family: 'Schibsted Grotesk', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

a {
  color: var(--teal);
}
a:hover {
  color: var(--teal-mid);
}

button {
  font-family: inherit;
}

h1,
h2,
h3,
p {
  margin: 0;
  text-wrap: pretty;
}

h1 {
  font-size: 52px;
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-weight: 700;
}

h2 {
  font-size: 44px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 700;
}

@media (max-width: 767px) {
  h1 {
    font-size: 34px !important;
  }
  h2 {
    font-size: 28px !important;
  }
}

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

.binnen {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding-inline: 24px;
}

/* De overslaan-link: onzichtbaar tot hij focus krijgt. */
.overslaan {
  position: absolute;
  left: -9999px;
  z-index: 100;
  background: #fff;
  color: var(--navy);
  padding: 10px 16px;
  border-radius: 8px;
}
.overslaan:focus {
  left: 16px;
  top: 16px;
}

/* ------------------------------------------------------- scroll-onthulling
   Elementen met data-onthul schuiven één keer in beeld.

   Let op welk attribuut hier verbergt: `data-wacht`, en dat zet SiteGedrag.tsx
   per element, alleen op wat hij ook echt gaat volgen. Nooit een vlag op de
   body die álles met data-onthul verbergt: dan is één element dat buiten de
   observer valt meteen onzichtbare inhoud, zonder foutmelding. Dat gebeurde
   ook: na een klik in het menu bleef elke pagina onder de hero leeg.

   Zo kan dat niet meer. Draait het script niet, of mist het een element, dan
   is het gevolg hooguit dat er iets niet beweegt — niet dat het verdwijnt. */

[data-onthul][data-wacht] {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.6s var(--uit),
    transform 0.6s var(--uit);
}
[data-onthul][data-wacht][data-in] {
  opacity: 1;
  transform: none;
}

@keyframes heroIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes beeldIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes klapIn {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
  html {
    scroll-behavior: auto;
  }
  [data-onthul] {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ---------------------------------------------------------------- knoppen */

/* Oranje offerteknop: pil met witte pijlcirkel. De enige oranje knop. */
.knop-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 5px 5px 5px 18px;
  border: 0;
  border-radius: 999px;
  background: var(--oranje);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--schaduw-cta);
  transition:
    transform 0.2s var(--uit),
    background 0.2s,
    box-shadow 0.2s;
}
.knop-cta:hover {
  background: var(--oranje-donker);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: var(--schaduw-cta-hover);
}
.knop-cta > .knop-tekst {
  white-space: nowrap;
}
.knop-cirkel {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #fff;
  color: var(--oranje-donker);
  display: grid;
  place-items: center;
  transition: transform 0.25s var(--uit);
}
.knop-cta:hover .knop-cirkel {
  transform: translateX(3px);
}

/* Teal knop, zelfde vorm; cirkel wit met teal icoon. */
.knop-teal {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 5px 5px 5px 18px;
  border-radius: 999px;
  background: var(--teal);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s;
}
.knop-teal:hover {
  background: var(--navy);
  color: #fff;
}
.knop-teal .knop-cirkel {
  color: var(--teal);
}
.knop-teal .knop-tekst {
  white-space: nowrap;
}

/* Witte outline-knop. Op teal: doorzichtig wit. */
.knop-wit {
  display: inline-flex;
  align-items: center;
  height: 42px;
  padding: 0 20px;
  border-radius: 999px;
  background: #fff;
  color: var(--navy);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: inset 0 0 0 1px rgba(0, 122, 150, 0.25);
  transition: background 0.2s;
}
.knop-wit:hover {
  background: var(--aqua);
  color: var(--navy);
}

.tekstlink {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--teal);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition:
    color 0.2s,
    gap 0.2s;
}
.tekstlink:hover {
  color: var(--navy);
  gap: 12px;
}

/* ------------------------------------------------------- decoratieve ring */

.ring {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

/* ----------------------------------------------------------------- topbalk */

.topbalk {
  background: var(--aqua);
  color: var(--ink);
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
  font-size: 13px;
  font-weight: 500;
  text-align: center;
}
.topbalk a {
  color: var(--teal);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s;
}
.topbalk a:hover {
  color: var(--navy);
}

/* -------------------------------------------------------------------- kop */

.kop {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #fff;
  box-shadow: 0 1px 0 var(--lijn);
  transition:
    background 0.25s,
    box-shadow 0.25s;
}
.kop[data-gescrold='true'] {
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(12px);
  box-shadow: 0 8px 24px rgba(3, 41, 58, 0.08);
}
.kop-binnen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block: 22px;
  transition: padding 0.25s var(--uit);
}
.kop[data-gescrold='true'] .kop-binnen {
  padding-block: 10px;
}
.kop-logo {
  display: flex;
  align-items: center;
  height: 32px;
}
.kop-logo img {
  height: 30px;
  width: auto;
  display: block;
}

.kop-nav {
  display: flex;
  align-items: center;
  gap: 28px;
  font-size: 15px;
  font-weight: 500;
}
.kop-nav > a {
  color: var(--ink-2);
  text-decoration: none;
  white-space: nowrap;
  padding: 8px 0;
  transition: color 0.2s;
}
.kop-nav > a:hover {
  color: var(--teal);
}

.kop-dropdown {
  position: relative;
}
.kop-dropdown > button {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 0;
  padding: 8px 0;
  color: var(--ink);
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.2s;
}
.kop-dropdown > button:hover {
  color: var(--teal);
}
.kop-dropdown > button svg {
  transition: transform 0.2s;
}
.kop-dropdown > button[aria-expanded='true'] svg {
  transform: rotate(180deg);
}
.kop-dropdown-paneel {
  position: absolute;
  top: 100%;
  left: -12px;
  padding-top: 10px;
  z-index: 60;
}
.kop-dropdown-lijst {
  background: #fff;
  border-radius: 16px;
  padding: 8px;
  min-width: 332px;
  box-shadow: 0 16px 40px rgba(0, 62, 76, 0.2);
  animation: klapIn 0.18s var(--uit) both;
  display: flex;
  flex-direction: column;
}
.kop-dropdown-lijst a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 12px;
  border-radius: 10px;
  color: var(--ink);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: background 0.15s;
}
.kop-dropdown-lijst a:hover {
  background: rgba(143, 220, 234, 0.45);
  color: var(--teal);
}
.kop-dropdown-lijst a span {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.kop-dropdown-lijst a small {
  font-size: 11px;
  font-weight: 400;
  color: var(--slate);
}

.kop-acties {
  display: flex;
  align-items: center;
  gap: 16px;
}
.kop-telefoon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--mist);
  color: var(--teal);
  transition:
    background 0.2s,
    color 0.2s;
}
.kop-telefoon:hover {
  background: var(--aqua);
  color: var(--navy);
}

.kop-burger {
  display: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  place-items: center;
  background: var(--mist);
  border: 0;
  color: var(--navy);
  cursor: pointer;
  transition: background 0.2s;
}
.kop-burger:hover {
  background: var(--aqua);
}

/* Mobiel paneel onder de kop. */
.kop-paneel {
  border-top: 1px solid var(--lijn);
  padding: 12px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  animation: klapIn 0.18s var(--uit) both;
}
.kop-paneel > a,
.kop-paneel-sub > button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 4px;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--lijn);
  color: var(--ink);
  font-size: 16px;
  font-weight: 600;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  width: 100%;
}
.kop-paneel > a:hover,
.kop-paneel-sub > button:hover {
  color: var(--teal);
}
.kop-paneel-sub > button svg {
  transition: transform 0.2s;
}
.kop-paneel-sub > button[aria-expanded='true'] svg {
  transform: rotate(180deg);
}
.kop-paneel-sublijst {
  display: flex;
  flex-direction: column;
  padding: 4px 0 8px;
}
.kop-paneel-sublijst a {
  padding: 11px 12px;
  border-radius: 10px;
  color: var(--ink-2);
  text-decoration: none;
  font-size: 15px;
}
.kop-paneel-sublijst a:hover {
  background: rgba(143, 220, 234, 0.35);
  color: var(--teal);
}
.kop-paneel .knop-cta {
  margin-top: 16px;
  justify-content: center;
  padding: 14px 18px;
}

@media (max-width: 1023px) {
  .kop-nav,
  .kop-acties .knop-cta {
    display: none;
  }
  .kop-burger {
    display: grid;
  }
}

/* ----------------------------------------------------------- mobiele balk */

.mobiele-balk {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 60;
  display: none;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border-radius: 999px;
  background: #fff;
  box-shadow: var(--schaduw-balk);
  transform: translateY(140%);
  transition: transform 0.3s var(--uit);
}
.mobiele-balk[data-zichtbaar='true'] {
  transform: none;
}
.mobiele-balk > a:first-child,
.mobiele-balk > a:nth-child(2) {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--mist);
  color: var(--teal);
  display: grid;
  place-items: center;
}
.mobiele-balk .knop-cta {
  flex: 1;
  min-width: 0;
  justify-content: space-between;
  height: 44px;
  padding: 0 5px 0 18px;
}
.mobiele-balk .knop-cirkel {
  width: 34px;
  height: 34px;
}

@media (max-width: 1023px) {
  .mobiele-balk {
    display: flex;
  }
  body:not([data-geen-balk]) {
    padding-bottom: 84px;
  }
}

/* --------------------------------------------------------------- kruimels */

.kruimels {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--slate);
}
.kruimels a {
  color: var(--slate);
  text-decoration: none;
  transition: color 0.2s;
}
.kruimels a:hover {
  color: var(--teal);
}
.kruimels .scheider {
  color: rgba(75, 90, 104, 0.5);
}
.kruimels [aria-current] {
  color: var(--ink);
  font-weight: 500;
}

/* ------------------------------------------------------------ reviewbadge */

.reviewbadge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 14px 7px 10px;
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  box-shadow:
    0 1px 2px rgba(3, 41, 58, 0.06),
    0 0 0 1px rgba(3, 41, 58, 0.06);
  transition: box-shadow 0.2s;
}
.reviewbadge:hover {
  box-shadow:
    0 4px 14px rgba(0, 62, 76, 0.12),
    0 0 0 1px rgba(0, 122, 150, 0.3);
  color: var(--ink);
}
.reviewbadge .sterren {
  display: flex;
  gap: 2px;
  color: var(--teal);
}
.reviewbadge .aantal {
  color: var(--slate);
  font-weight: 500;
}

/* ------------------------------------------------------------------- hero */

.hero {
  background: var(--mist);
  color: var(--ink);
  position: relative;
  overflow: hidden;
}
/* Standaard (dienst- en contentpagina's): twee ringen. */
.hero .ring:nth-of-type(1) {
  left: -170px;
  top: -60px;
  width: 560px;
  height: 560px;
  border: var(--ring-dikte) solid rgba(0, 122, 150, 0.14);
}
.hero .ring:nth-of-type(2) {
  right: -140px;
  bottom: -200px;
  width: 440px;
  height: 440px;
  border: var(--ring-dikte) solid rgba(0, 122, 150, 0.1);
}
/* De homepage heeft er drie, met eigen maten. */
[data-template='home'] .hero .ring:nth-of-type(1) {
  left: -170px;
  top: 20px;
  width: 600px;
  height: 600px;
  border: var(--ring-dikte) solid rgba(0, 122, 150, 0.16);
}
[data-template='home'] .hero .ring:nth-of-type(2) {
  left: -70px;
  top: 130px;
  right: auto;
  bottom: auto;
  width: 380px;
  height: 380px;
  border: var(--ring-dikte) solid rgba(0, 122, 150, 0.1);
}
[data-template='home'] .hero .ring:nth-of-type(3) {
  right: -130px;
  bottom: -170px;
  width: 440px;
  height: 440px;
  border: var(--ring-dikte) solid rgba(0, 122, 150, 0.12);
}
.hero-binnen {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 460px;
  gap: 64px;
  align-items: center;
  padding-block: 40px 88px;
}
.hero-tekst {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}
.hero h1 {
  animation: heroIn 0.6s var(--uit) 0.1s both;
}
.hero h1 .accent {
  color: var(--teal);
  display: block;
}
.hero .reviewbadge {
  animation: heroIn 0.6s var(--uit) both;
}
.hero-intro {
  font-size: 17px;
  line-height: 1.6;
  color: var(--slate);
  max-width: 520px;
  animation: heroIn 0.6s var(--uit) 0.2s both;
}
.hero-intro p {
  margin: 0;
}
.hero-knoppen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  animation: heroIn 0.6s var(--uit) 0.3s both;
}
.hero-beeld {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--navy);
  animation: heroIn 0.7s var(--uit) 0.35s both;
}
.hero-beeld img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: beeldIn 0.7s ease both;
}
.hero .kruimels {
  animation: heroIn 0.6s var(--uit) both;
}

/* De homepage-variant: hoger, grotere beeldkolom, radius 24. */
[data-template='home'] .hero {
  min-height: 80vh;
  display: flex;
  align-items: center;
}
[data-template='home'] .hero-binnen {
  grid-template-columns: minmax(0, 1fr) 560px;
  gap: 56px;
  padding-block: 72px 96px;
  width: 100%;
}
[data-template='home'] .hero h1 {
  font-size: 46px;
  line-height: 1.08;
}
[data-template='home'] .hero-beeld {
  border-radius: 24px;
}

/* Zonder beeld: één kolom, tekst maximaal 760. */
.hero-binnen[data-zonder-beeld] {
  grid-template-columns: minmax(0, 1fr);
}
.hero-binnen[data-zonder-beeld] .hero-tekst {
  max-width: 760px;
}

@media (max-width: 1023px) {
  .hero-binnen,
  [data-template='home'] .hero-binnen {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }
  .hero-beeld {
    max-width: 560px;
    width: 100%;
  }
}

/* ------------------------------------------------------- algemene blokken */

.blok {
  position: relative;
  background: #fff;
}
.blok > .binnen {
  position: relative;
  z-index: 1;
}
.achtergrond-licht {
  background: var(--mist);
}
.achtergrond-donker {
  background: var(--teal);
  color: #fff;
}

.badge {
  display: inline-flex;
  align-self: flex-start;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--aqua);
  color: var(--ink);
  font-size: 12px;
  font-weight: 500;
}
.badge-wit {
  background: #fff;
  color: var(--teal);
}

.vinklijst {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 14px;
  font-weight: 500;
}
.vinklijst li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.vinklijst svg {
  flex: none;
  margin-top: 2px;
}

/* ----------------------------------------------------------- dienstengrid */

.blok-dienstenGrid {
  background: var(--mist);
  overflow: hidden;
}
.blok-dienstenGrid .ring:nth-of-type(1) {
  right: -180px;
  top: 60px;
  width: 540px;
  height: 540px;
  border: var(--ring-dikte) solid rgba(0, 122, 150, 0.1);
}
.blok-dienstenGrid .ring:nth-of-type(2) {
  left: -140px;
  bottom: -200px;
  width: 420px;
  height: 420px;
  border: var(--ring-dikte) solid rgba(0, 122, 150, 0.08);
}
.blok-dienstenGrid > .binnen {
  padding-block: 112px 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
}
.dienstengrid-kop {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}
.dienstengrid-kop .badge {
  align-self: center;
}
.dienstengrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
}
.dienstkaart {
  position: relative;
  background: #fff;
  color: var(--ink);
  border-radius: 16px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  transition:
    box-shadow 0.2s,
    transform 0.2s;
}
.dienstkaart:hover {
  box-shadow: 0 12px 32px rgba(0, 62, 76, 0.12);
  transform: translateY(-3px);
}
.dienstkaart-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.dienstkaart-icoon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--aqua);
  display: grid;
  place-items: center;
  color: var(--teal);
}
.dienstkaart-icoon img {
  width: 16px;
  height: 16px;
  display: block;
}
.dienstkaart-pijl {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--mist);
  color: var(--teal);
  display: grid;
  place-items: center;
}
.dienstkaart-inhoud {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.dienstkaart-inhoud > a {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: inherit;
  text-decoration: none;
  text-wrap: pretty;
}
/* De hele kaart klikbaar via de titel-link; chips liggen erboven. */
.dienstkaart-inhoud > a::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 16px;
  z-index: 1;
}
.dienstkaart-tekst {
  font-size: 13px;
  line-height: 1.55;
  color: var(--slate);
}
.dienstkaart-chips {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.dienstkaart-chips a {
  padding: 4px 9px;
  border-radius: 6px;
  background: rgba(143, 220, 234, 0.35);
  color: var(--teal);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.35;
  text-decoration: none;
  transition:
    background 0.15s,
    color 0.15s;
}
.dienstkaart-chips a:hover {
  background: var(--teal);
  color: #fff;
}
.dienstkaart-chips a.meer {
  padding: 4px 2px;
  background: none;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.dienstkaart-chips a.meer:hover {
  background: none;
  color: var(--navy);
}

/* Uitgelichte kaart: teal, span 2, witte tekst. */
.dienstkaart[data-uitgelicht] {
  grid-column: span 2;
  background: var(--teal);
  color: #fff;
}
.dienstkaart[data-uitgelicht]:hover {
  box-shadow: 0 12px 32px rgba(0, 62, 76, 0.2);
}
.dienstkaart[data-uitgelicht] .dienstkaart-tekst {
  color: rgba(255, 255, 255, 0.88);
}
.dienstkaart-specialiteit {
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.dienstkaart[data-uitgelicht] .dienstkaart-chips a {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}
.dienstkaart[data-uitgelicht] .dienstkaart-chips a:hover {
  background: #fff;
  color: var(--teal);
}
.dienstkaart[data-uitgelicht] .dienstkaart-chips a.meer {
  background: none;
}

@media (max-width: 1023px) {
  .dienstengrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 767px) {
  .dienstengrid {
    grid-template-columns: minmax(0, 1fr);
  }
  .dienstkaart[data-uitgelicht] {
    grid-column: auto;
  }
}

/* ----------------------------------------------------------- offertestart */

.blok-offerteStart > .binnen {
  padding-block: 96px 0;
}
.offertestart {
  position: relative;
  overflow: hidden;
  background: var(--teal);
  color: #fff;
  border-radius: 24px;
  padding: 44px 48px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.offertestart .ring:nth-of-type(1) {
  right: -140px;
  top: -200px;
  width: 460px;
  height: 460px;
  border: var(--ring-dikte) solid rgba(143, 220, 234, 0.28);
}
.offertestart .ring:nth-of-type(2) {
  right: -30px;
  top: -90px;
  width: 250px;
  height: 250px;
  border: var(--ring-dikte) solid rgba(143, 220, 234, 0.2);
}
.offertestart-kop {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 40px;
}
.offertestart-kop > div {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 620px;
}
.offertestart-kop h2 {
  font-size: 36px;
  line-height: 1.12;
}
.offertestart-kop p {
  font-size: 16px;
  line-height: 1.6;
}
.offertestart-kop .bel {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.offertestart-kop .bel:hover {
  color: var(--aqua);
}
.offertestart-pillen {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.offertestart-pillen a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 48px;
  padding: 0 8px 0 18px;
  border-radius: 999px;
  background: #fff;
  color: var(--navy);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition:
    background 0.2s,
    transform 0.2s var(--uit);
}
.offertestart-pillen a:hover {
  background: var(--aqua);
  color: var(--navy);
  transform: translateY(-2px);
}
.offertestart-pillen a span:last-child {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--mist);
  color: var(--teal);
  display: grid;
  place-items: center;
}

@media (max-width: 767px) {
  .offertestart {
    padding: 32px 24px;
  }
}

/* ------------------------------------------------------- statement-cijfers */

.blok-statementCijfers > .binnen {
  padding-block: 112px 120px;
  display: flex;
  flex-direction: column;
  gap: 48px;
}
.statement-kop {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}
.statement {
  font-size: 34px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  font-weight: 700;
  color: var(--ink-2);
  max-width: 860px;
}
.cijfers {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}
.cijfer {
  border-radius: 16px;
  padding: 20px 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: transform 0.2s;
}
.cijfer:hover {
  transform: translateY(-2px);
}
/* De vier tegelkleuren van het ontwerp, op volgorde. */
.cijfer:nth-child(4n + 1) {
  background: var(--aqua);
}
.cijfer:nth-child(4n + 2) {
  background: rgba(143, 220, 234, 0.35);
}
.cijfer:nth-child(4n + 3) {
  background: var(--sand);
  color: var(--brown);
}
.cijfer:nth-child(4n) {
  background: rgba(226, 213, 184, 0.45);
}
.cijfer-waarde {
  font-size: 40px;
  line-height: 1;
  font-weight: 400;
  letter-spacing: -0.02em;
}
.cijfer-tekst {
  font-size: 13px;
  font-weight: 500;
}

@media (max-width: 1023px) {
  .cijfers {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 767px) {
  .cijfers {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ------------------------------------------------------------ stickyUitleg */

.blok-stickyUitleg > .binnen {
  padding-block: 0 128px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 413px;
  gap: 80px;
  align-items: start;
}
.sticky-tekst {
  position: sticky;
  top: 120px;
  align-self: start;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  padding-top: 56px;
}
.sticky-tekst p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--slate);
  max-width: 440px;
}
.sticky-kaarten {
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.sticky-kaart {
  aspect-ratio: 1;
  border-radius: 20px;
  position: relative;
  overflow: hidden;
}

/* Kaart 1: werkgebied. */
.kaart-werkgebied {
  background: var(--aqua);
  display: grid;
  place-items: center;
  padding: 56px;
}
.kaart-werkgebied-binnen {
  background: var(--navy);
  color: #fff;
  border-radius: 16px;
  padding: 24px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.kaart-werkgebied-binnen .kaartkop {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.kaart-werkgebied-binnen .kaartkop strong {
  font-size: 18px;
  font-weight: 700;
}
.kaart-werkgebied-binnen .kaartkop span {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.8);
}
.kaart-werkgebied-rijen {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13px;
}
.kaart-werkgebied-rijen > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.kaart-werkgebied-rijen .lijntje {
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.12);
}
.kaart-werkgebied-rijen .afstand {
  color: var(--aqua);
}
.kaart-werkgebied-voetnoot {
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
}

/* Kaart 2: foto met tekststrook. */
.kaart-foto {
  background: var(--navy);
}
.kaart-foto img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: beeldIn 0.7s ease both;
}
.kaart-foto-strook {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  background: var(--navy);
  color: #fff;
  border-radius: 14px;
  padding: 22px 28px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}
.kaart-foto-strook .regels {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.kaart-foto-strook .regels span:first-child {
  font-size: 30px;
  line-height: 1;
  letter-spacing: -0.01em;
  font-weight: 700;
}
.kaart-foto-strook .regels span:last-child {
  font-size: 20px;
  color: rgba(255, 255, 255, 0.85);
}
.kaart-foto-staafjes {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 64px;
}
.kaart-foto-staafjes span {
  width: 12px;
  border-radius: 2px;
}

/* Kaart 3: het grote getal met de oplopende staafjes. */
.kaart-meet {
  background: rgba(143, 220, 234, 0.35);
  display: grid;
  place-items: center;
  padding: 44px;
}
.kaart-meet-binnen {
  background: #fff;
  border-radius: 16px;
  padding: 28px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 22px;
  box-shadow: 0 12px 32px rgba(0, 62, 76, 0.1);
}
.kaart-meet-logo {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--navy);
  display: grid;
  place-items: center;
}
.kaart-meet-logo img {
  width: 32px;
}
.kaart-meet-getal {
  font-size: 56px;
  line-height: 1;
  letter-spacing: -0.02em;
  font-weight: 700;
}
.kaart-meet-tekst {
  font-size: 14px;
  color: var(--slate);
  line-height: 1.5;
}
.kaart-meet-staafjes {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 56px;
}
.kaart-meet-staafjes span {
  flex: 1;
  border-radius: 3px;
}
.kaart-meet-staafjes span:nth-child(1) {
  height: 30%;
  background: rgba(143, 220, 234, 0.55);
}
.kaart-meet-staafjes span:nth-child(2) {
  height: 45%;
  background: var(--aqua);
}
.kaart-meet-staafjes span:nth-child(3) {
  height: 62%;
  background: var(--teal-mid);
}
.kaart-meet-staafjes span:nth-child(4) {
  height: 80%;
  background: var(--teal);
}
.kaart-meet-staafjes span:nth-child(5) {
  height: 100%;
  background: var(--navy);
}

@media (max-width: 1023px) {
  .blok-stickyUitleg > .binnen {
    grid-template-columns: minmax(0, 1fr);
    gap: 48px;
  }
  .sticky-tekst {
    position: static;
    padding-top: 0;
  }
  .sticky-kaarten {
    max-width: 460px;
    width: 100%;
  }
}

/* --------------------------------------------------------------- overSplit */

.blok-overSplit > .binnen {
  padding-block: 112px 120px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: 80px;
  align-items: stretch;
}
.oversplit-tekst {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}
.oversplit-tekst p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--slate);
  max-width: 460px;
}
.oversplit-knoppen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.oversplit-beeld {
  min-height: 300px;
  max-height: 460px;
  border-radius: 20px;
  overflow: hidden;
  background: rgba(143, 220, 234, 0.55);
}
.oversplit-beeld img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s var(--uit);
  animation: beeldIn 0.7s ease both;
}
.oversplit-beeld:hover img {
  transform: scale(1.03);
}

@media (max-width: 1023px) {
  .blok-overSplit > .binnen {
    grid-template-columns: minmax(0, 1fr);
    gap: 48px;
  }
  /* Eén kolom: eigen beeldverhouding terug, 4:3 voor een compacter geheel. */
  .oversplit-beeld {
    max-width: 460px;
    width: 100%;
    aspect-ratio: 4 / 3;
    height: auto;
    min-height: 0;
    max-height: none;
  }
}

/* ----------------------------------------------------------------- reviews */

.blok-reviewsBlok > .binnen {
  padding-block: 0 128px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.reviews-kop {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 40px;
}
.reviews-kop > div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
.reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
/* Op dienstpagina's staan score en drie reviews op één rij. */
.reviews-grid[data-kolommen='4'] {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.scorekaart {
  background: var(--teal);
  color: #fff;
  border-radius: 20px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
}
.scorekaart .sterren {
  display: flex;
  gap: 2px;
  color: #fff;
}
.scorekaart-boven {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.scorekaart-score {
  font-size: 64px;
  line-height: 1;
  letter-spacing: -0.02em;
  font-weight: 700;
}
.scorekaart-onder {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.scorekaart-onder strong {
  font-size: 16px;
  font-weight: 700;
}
.scorekaart-onder span {
  font-size: 14px;
}
.reviewkaart {
  margin: 0;
  background: var(--mist);
  border-radius: 20px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 28px;
}
/* Op de homepage spant de eerste review twee kolommen (de lange van Frank). */
.reviews-grid[data-kolommen='3'] .reviewkaart:nth-of-type(1) {
  grid-column: span 2;
}
.reviewkaart-boven {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.reviewkaart .sterren {
  display: flex;
  gap: 2px;
  color: var(--teal);
}
.reviewkaart blockquote {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  text-wrap: pretty;
}
.reviewkaart figcaption {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 14px;
}
.reviewkaart figcaption strong {
  font-weight: 700;
  color: var(--ink);
}
.reviewkaart figcaption span {
  color: var(--slate);
}

@media (max-width: 1023px) {
  .reviews-grid,
  .reviews-grid[data-kolommen='4'] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 767px) {
  .reviews-grid,
  .reviews-grid[data-kolommen='4'] {
    grid-template-columns: minmax(0, 1fr);
  }
  .reviews-grid[data-kolommen='3'] .reviewkaart:nth-of-type(1) {
    grid-column: auto;
  }
}

/* ------------------------------------------------------------------ vragen */

.blok-vragen > .binnen {
  padding-block: 0 96px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}
.blok-vragen h2 {
  text-align: center;
}
.vragenlijst {
  width: 100%;
  max-width: 640px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.vraag {
  background: rgba(143, 220, 234, 0.35);
  border-radius: 16px;
  overflow: hidden;
}
.vraag:focus-within {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}
.vraag > button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px;
  background: none;
  border: 0;
  text-align: left;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  transition: color 0.2s;
}
.vraag > button:hover {
  color: var(--teal);
}
.vraag > button:focus-visible {
  outline: none;
}
.vraag-icoon {
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--teal);
  display: grid;
  place-items: center;
  transition: transform 0.2s var(--uit);
}
.vraag > button[aria-expanded='true'] .vraag-icoon {
  transform: rotate(45deg);
}
.vraag-antwoord {
  margin: 0;
  padding: 0 56px 20px 20px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--slate);
  animation: klapIn 0.2s var(--uit) both;
}
.vraag-antwoord p {
  margin-inline: 0;
  margin-bottom: 0;
}
.vraag-antwoord p:last-child {
  margin-bottom: 0;
}

/* ------------------------------------------------------------ osmoseteaser */

.blok-osmoseTeaser > .binnen {
  padding-block: 0 112px;
}
.osmoseteaser {
  background: var(--mist);
  border-radius: 20px;
  padding: 28px 32px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 20px 48px;
  align-items: center;
}
.osmoseteaser-tekst {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.osmoseteaser-tekst .eyebrow {
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--teal);
}
.osmoseteaser-tekst h2 {
  font-size: 22px;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.osmoseteaser-tekst p,
.osmoseteaser-tekst .tekst p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--slate);
  max-width: 640px;
  margin: 0;
}
.osmoseteaser-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
}

@media (max-width: 1023px) {
  .osmoseteaser {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* -------------------------------------------------------------------- voet */

.voet {
  background: var(--petrol);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.voet .ring:nth-of-type(1) {
  left: -200px;
  bottom: -240px;
  width: 640px;
  height: 640px;
  border: var(--ring-dikte) solid rgba(143, 220, 234, 0.12);
}
.voet .ring:nth-of-type(2) {
  right: -120px;
  top: -140px;
  width: 380px;
  height: 380px;
  border: var(--ring-dikte) solid rgba(143, 220, 234, 0.1);
}
.voet > .binnen {
  position: relative;
  z-index: 1;
  padding-block: 80px 40px;
  display: flex;
  flex-direction: column;
  gap: 64px;
}
.voet-boven {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 80px;
  align-items: start;
}
.voet-links {
  display: flex;
  flex-direction: column;
  gap: 120px;
}
.voet-merk {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.voet-merk img {
  height: 30px;
  width: auto;
  align-self: flex-start;
}
.voet-merk span {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.85);
}
.voet-oproep {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  max-width: 520px;
}
.voet-oproep .voet-kop {
  font-size: 40px;
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-weight: 700;
}
.voet-oproep p {
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
}
.voet-oproep-knoppen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  margin-top: 6px;
}
.voet-oproep-knoppen .bel {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.voet-oproep-knoppen .bel:hover {
  color: var(--aqua);
}
.voet-kolommen {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 64px;
}
.voet-kolom {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.voet-kolom > span {
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--aqua);
}
.voet-kolom ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 15px;
}
.voet-kolom a {
  color: rgba(255, 255, 255, 0.88);
  text-decoration: none;
  transition: color 0.2s;
  line-height: 1.5;
}
.voet-kolom a:hover {
  color: var(--aqua);
}
.voet-onder {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 16px 24px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.85);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 24px;
}
.voet-onder-links {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}
.voet-onder a {
  color: rgba(255, 255, 255, 0.88);
  text-decoration: none;
  transition: color 0.2s;
}
.voet-onder a:hover {
  color: var(--aqua);
}
.voet :focus-visible {
  outline-color: var(--aqua);
}

@media (max-width: 1023px) {
  .voet-boven {
    grid-template-columns: minmax(0, 1fr);
    gap: 48px;
  }
  .voet-links {
    gap: 64px;
  }
  .voet-kolommen {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
}
@media (max-width: 767px) {
  .voet-kolommen {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ------------------------------------------------------------------ feiten */

.blok-feiten > .binnen {
  padding-block: 72px 0;
}
.feiten {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.feit {
  background: rgba(143, 220, 234, 0.35);
  border-radius: 16px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.feit-waarde {
  font-size: 36px;
  line-height: 1;
  letter-spacing: -0.02em;
  font-weight: 700;
}
.feit-tekst {
  font-size: 13px;
  font-weight: 500;
}
/* Op Over ons wisselen de tegels van kleur, zoals in het ontwerp. */
[data-template='over-ons'] .feit:nth-child(3n + 1) {
  background: var(--aqua);
}
[data-template='over-ons'] .feit:nth-child(3n) {
  background: var(--sand);
  color: var(--brown);
}

@media (max-width: 767px) {
  .feiten {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ----------------------------------------------------------------- stappen */

.blok-stappen > .binnen {
  padding-block: 96px 0;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.stappen {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.stap {
  background: var(--mist);
  border-radius: 16px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.stap-nummer {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--teal);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 15px;
  font-weight: 700;
}
.stap-titel {
  font-size: 19px;
  font-weight: 700;
}
.stap-tekst {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-2);
}

@media (max-width: 1023px) {
  .stappen {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 767px) {
  .stappen {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* -------------------------------------------------------------- subdiensten */

.blok-subDiensten > .binnen {
  padding-block: 96px 0;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.subdiensten-kop {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.subdiensten-kop p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--slate);
  max-width: 620px;
}
.subdiensten {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.subdienst {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 22px;
  border-radius: 16px;
  background: var(--mist);
  color: var(--ink);
  text-decoration: none;
  font-size: 16px;
  font-weight: 600;
  transition:
    background 0.2s,
    transform 0.2s;
}
.subdienst:hover {
  background: var(--aqua);
  color: var(--navy);
  transform: translateY(-2px);
}
.subdienst span:last-child {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #fff;
  color: var(--teal);
  display: grid;
  place-items: center;
}

/* De dienst waar je op staat blijft in het overzicht staan, als actieve kaart
   (punt 6 van de klantfeedback, 19-10-2026). Teal en niet oranje: oranje is op
   deze site uitsluitend voor de offerteknoppen, zie CONVENTIES.md §2. Het is
   een span en geen link, dus geen hover- en geen muisaanwijzer. */
.subdienst[data-actief] {
  background: var(--teal);
  color: #fff;
  cursor: default;
}
.subdienst[data-actief]:hover {
  background: var(--teal);
  color: #fff;
  transform: none;
}
.subdienst-hier {
  position: relative;
}
.subdienst-hier::after {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--teal);
}

@media (max-width: 1023px) {
  .subdiensten {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 767px) {
  .subdiensten {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ------------------------------------------------------------- gerelateerd */

.blok-gerelateerd > .binnen {
  padding-block: 72px 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.blok-gerelateerd h2 {
  font-size: 30px;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.blok-gerelateerd .subdienst {
  padding: 18px 20px;
  font-size: 15px;
}

/* ----------------------------------------------------------------- artikel */

/* Beeld naast tekst: het beeld volgt de tekstkolom
   ---------------------------------------------------------------------------
   Punt 1 van de klantfeedback van 19-10-2026. De blokken artikel, kenmerkSplit
   en overSplit zetten het beeld in een eigen kolom met een vaste
   beeldverhouding (4:5 of 4:3) en centreerden de rij. Daarmee bepaalde het
   beeld de hoogte en niet de tekst: op /sloop-en-herstelwerk/trappen 609 tegen
   186 pixels, op /reiniging 402 tegen 174. Die 200 tot 440 pixels bleven als
   loze ruimte naast de tekst staan, op 23 van de 42 detailpagina's.

   Nu bepaalt de tekstkolom de hoogte van de rij en vult het beeld die. De
   ondergrens voorkomt dat er bij een korte tekst een strook van wordt, de
   bovengrens dat het bij een lange tekst een toren wordt. De foto zelf wordt
   niet vervormd: object-fit: cover stond er al, er valt alleen meer buiten het
   kader. Daarom is het beeld gecentreerd en niet uitgelijnd op de bovenkant —
   bij een portretfoto zit het onderwerp in het midden.

   Onder 1024px staat alles in één kolom en is er geen tekst om te volgen.
   Daar houdt het beeld een eigen beeldverhouding, en wel 4:3 in plaats van
   4:5, want ook mobiel was de vraag om het compacter.
   --------------------------------------------------------------------------- */

.blok-artikel > .binnen {
  padding-block: 112px 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 48px 80px;
  align-items: stretch;
}
.artikel-beeld {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 280px;
}
.artikel-beeld .ring {
  left: -28px;
  bottom: -28px;
  width: 200px;
  height: 200px;
  border: var(--ring-dikte) solid rgba(0, 122, 150, 0.18);
}
.artikel-beeld-kader {
  position: relative;
  width: 100%;
  height: 100%;
  max-height: 460px;
  border-radius: 20px;
  overflow: hidden;
  background: var(--navy);
}
.artikel-beeld-kader img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: beeldIn 0.7s ease both;
}
.artikel-tekst {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 640px;
  align-self: center;
}
.artikel-tekst .kopgroep {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 4px;
}
.kicker {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--teal);
}
.artikel-tekst h2 {
  font-size: 36px;
  line-height: 1.12;
}
.artikel-tekst p {
  font-size: 17px;
  line-height: 1.75;
  color: var(--ink-2);
}
.blok-artikel > .binnen[data-zonder-beeld] {
  grid-template-columns: minmax(0, 1fr);
}
.blok-artikel > .binnen[data-zonder-beeld] .artikel-tekst {
  max-width: 760px;
}

@media (max-width: 1023px) {
  .blok-artikel > .binnen {
    grid-template-columns: minmax(0, 1fr);
  }
  /* Eén kolom: geen tekst om te volgen, dus het beeld krijgt zijn eigen maat
     terug — 4:3 en niet 4:5, zodat het ook hier compacter staat. */
  .artikel-beeld {
    max-width: 460px;
    width: 100%;
    min-height: 0;
  }
  .artikel-beeld-kader {
    aspect-ratio: 4 / 3;
    height: auto;
    max-height: none;
  }
}

/* ------------------------------------------------------------ kenmerkSplit */

.blok-kenmerkSplit > .binnen {
  padding-block: 112px 0;
}
.kenmerksplit {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 48px 80px;
  align-items: stretch;
}
/* Meerdere kenmerkSplit-blokken onder elkaar: de volgende zonder eigen
   bovenruimte, met de vaste 112 ertussen. */
.blok-kenmerkSplit + .blok-kenmerkSplit > .binnen {
  padding-block: 112px 0;
}
.kenmerksplit-beeld {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 260px;
}
.kenmerksplit-beeld .ring {
  right: -28px;
  top: -28px;
  width: 180px;
  height: 180px;
  border: var(--ring-dikte) solid rgba(0, 122, 150, 0.18);
}
.kenmerksplit-beeld-kader {
  position: relative;
  width: 100%;
  height: 100%;
  max-height: 420px;
  border-radius: 20px;
  overflow: hidden;
  background: var(--navy);
}
.kenmerksplit-beeld-kader img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: beeldIn 0.7s ease both;
}
.kenmerksplit-tekst {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
.kenmerksplit-tekst h2 {
  font-size: 36px;
  line-height: 1.12;
}
.kenmerksplit-tekst p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-2);
}
.kenmerksplit-tekst ul {
  list-style: none;
  /* Geen margin-shorthand: die zou de ruimte tussen tekstblokken wissen. */
  margin-inline: 0;
  margin-bottom: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.kenmerksplit-tekst li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-2);
}
.kenmerksplit[data-zonder-beeld] {
  grid-template-columns: minmax(0, 1fr);
}
.kenmerksplit[data-zonder-beeld] .kenmerksplit-tekst {
  max-width: 760px;
}

@media (max-width: 1023px) {
  .kenmerksplit {
    grid-template-columns: minmax(0, 1fr);
  }
  /* Eén kolom: geen tekst om te volgen, dus het beeld krijgt zijn eigen
     beeldverhouding terug. Zonder deze regel bleef het op de ondergrens van
     260 pixels staan en werd het op 768 pixels breed een strook van 1,77. */
  .kenmerksplit-beeld {
    max-width: 460px;
    width: 100%;
    order: -1;
    min-height: 0;
  }
  .kenmerksplit-beeld-kader {
    aspect-ratio: 4 / 3;
    height: auto;
    max-height: none;
  }
}

/* ------------------------------------------------------------- offerteband */

.blok-offerteBand > .binnen {
  padding-block: 112px 0;
}
.offerteband {
  position: relative;
  overflow: hidden;
  background: var(--teal);
  color: #fff;
  border-radius: 24px;
  padding: 48px;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 40px 56px;
  align-items: center;
}
.offerteband .ring:nth-of-type(1) {
  right: -140px;
  top: -180px;
  width: 440px;
  height: 440px;
  border: var(--ring-dikte) solid rgba(143, 220, 234, 0.28);
}
.offerteband .ring:nth-of-type(2) {
  right: -40px;
  top: -80px;
  width: 240px;
  height: 240px;
  border: var(--ring-dikte) solid rgba(143, 220, 234, 0.2);
}
.offerteband-tekst {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
.offerteband-tekst .badge {
  font-weight: 600;
}
.offerteband-tekst h2 {
  font-size: 36px;
  line-height: 1.12;
}
.offerteband-tekst p {
  font-size: 16px;
  line-height: 1.6;
  max-width: 480px;
}
.offerteband-knoppen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
}
.knop-glas {
  display: inline-flex;
  align-items: center;
  height: 42px;
  padding: 0 20px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
  transition: background 0.2s;
}
.knop-glas:hover {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}
.offerteband-stappen {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.offerteband-stappen li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}
.offerteband-stappen li:first-child {
  background: #fff;
  color: var(--ink);
}
.offerteband-stappen .bol {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 700;
}
.offerteband-stappen li:first-child .bol {
  background: var(--aqua);
  color: var(--navy);
}
.offerteband-stappen .stapregels {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  font-size: 15px;
  font-weight: 600;
}
.offerteband-stappen li:first-child .stapregels strong {
  font-size: 15px;
  font-weight: 700;
}
.offerteband-stappen li:first-child .stapregels span {
  font-size: 13px;
  font-weight: 400;
  color: var(--slate);
}

@media (max-width: 1023px) {
  .offerteband {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 767px) {
  .offerteband {
    padding: 32px 24px;
  }
}

/* ------------------------------------------------------------- infokaarten */

.blok-infoKaarten {
  background: var(--sand);
  margin-top: 112px;
  overflow: hidden;
}
.blok-infoKaarten .ring:nth-of-type(1) {
  right: -160px;
  top: -180px;
  width: 520px;
  height: 520px;
  border: var(--ring-dikte) solid rgba(90, 63, 34, 0.16);
}
.blok-infoKaarten .ring:nth-of-type(2) {
  left: -120px;
  bottom: -220px;
  width: 420px;
  height: 420px;
  border: var(--ring-dikte) solid rgba(90, 63, 34, 0.12);
}
.blok-infoKaarten > .binnen {
  padding-block: 96px 104px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.infokaarten-kop {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}
.infokaarten-kop .badge {
  background: #fff;
  color: var(--brown);
}
.infokaarten-kop h2 {
  color: var(--ink);
}
.infokaarten {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}
.infokaart {
  height: 100%;
  background: #fff;
  border-radius: 20px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 12px 32px rgba(90, 63, 34, 0.08);
  transition:
    transform 0.2s,
    box-shadow 0.2s;
}
.infokaart:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(90, 63, 34, 0.14);
}
.infokaart-streep {
  width: 28px;
  height: 3px;
  border-radius: 2px;
  background: var(--teal);
}
.infokaart h3 {
  font-size: 21px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  font-weight: 700;
}
.infokaart p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink-2);
  margin-block-end: 0;
}
.infokaart ul {
  list-style: none;
  margin-inline: 0;
  margin-bottom: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.infokaart li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-2);
}

@media (max-width: 767px) {
  .infokaarten {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ------------------------------------------------------------------ oproep */

.blok-oproep > .binnen {
  padding-block: 72px 112px;
}
.oproepband {
  position: relative;
  overflow: hidden;
  background: var(--teal);
  color: #fff;
  border-radius: 20px;
  padding: 40px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px 48px;
  align-items: center;
}
.oproepband .ring {
  right: -120px;
  top: -160px;
  width: 380px;
  height: 380px;
  border: var(--ring-dikte) solid rgba(143, 220, 234, 0.22);
}
.oproepband-tekst {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.oproepband-tekst h2 {
  font-size: 30px;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.oproepband-tekst p,
.oproepband-tekst .tekst p {
  font-size: 15px;
  line-height: 1.6;
  max-width: 560px;
  margin: 0;
}
.oproepband-knoppen {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
/* Witte pil met gekleurde cirkel, voor bel- en routeknoppen op teal. */
.knop-wit-pil {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 5px 5px 5px 18px;
  border-radius: 999px;
  background: #fff;
  color: var(--navy);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s;
}
.knop-wit-pil:hover {
  background: var(--aqua);
  color: var(--navy);
}
.knop-wit-pil .knop-cirkel {
  background: var(--teal);
  color: #fff;
}

@media (max-width: 1023px) {
  .oproepband {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ------------------------------------------------------------- inhoudrijen */

.blok-inhoudRijen > .binnen {
  padding-block: 96px 0;
  display: flex;
  flex-direction: column;
}
.inhoudrij {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
  gap: 20px 80px;
  padding: 40px 0;
  border-top: 1px solid var(--lijn);
}
.inhoudrij h2 {
  font-size: 26px;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.inhoudrij-tekst {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.inhoudrij-tekst p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-2);
  margin: 0;
}
.inhoudrij-tekst ul {
  list-style: none;
  margin-inline: 0;
  margin-bottom: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.inhoudrij-tekst li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-2);
}
.inhoudrij-tekst li::before {
  content: '';
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 3px;
  border-radius: 50%;
  background: var(--teal)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8l2.5 2.5 4.5-5' stroke='%23fff' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / 16px no-repeat;
}

@media (max-width: 767px) {
  .inhoudrij {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* -------------------------------------------------------------- eigenaren */

.blok-eigenaren > .binnen {
  padding-block: 96px 0;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.eigenaren-kop {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.eigenaren-kop p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--slate);
  max-width: 620px;
  margin: 0;
}
.eigenaren {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.eigenaar {
  background: var(--mist);
  border-radius: 20px;
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.eigenaar-naam {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.eigenaar-naam strong {
  font-size: 22px;
  font-weight: 700;
}
.eigenaar-naam span {
  font-size: 14px;
  color: var(--slate);
}
.eigenaar-knoppen {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.eigenaar-knoppen .knop-wit {
  gap: 8px;
  padding: 0 18px;
}

@media (max-width: 767px) {
  .eigenaren {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ------------------------------------------------------------- contactinfo */

.blok-contactInfo > .binnen {
  padding-block: 24px 0;
}
.contactinfo {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.contactinfo-kaart {
  background: var(--mist);
  border-radius: 20px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.contactinfo-kaart .eyebrow {
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--teal);
}
.contactinfo-regels {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
}
.contactinfo-regels a {
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
}
.contactinfo-regels a:hover {
  color: var(--teal);
}
.contactinfo-onderregel {
  font-size: 14px;
  color: var(--slate);
}
.contactinfo-kaart .tekstlink {
  align-self: flex-start;
}

@media (max-width: 1023px) {
  .contactinfo {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 767px) {
  .contactinfo {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------------------------------------------------------------- tekstblok */

.blok-tekst > .binnen {
  padding-block: 96px 112px;
}
.blok-tekst .lopende-tekst {
  max-width: 760px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-2);
}

/* Dienstpagina's: bredere vragenlijst met grotere knoppen, zoals het ontwerp. */
[data-template='dienst-overzicht'] .blok-vragen > .binnen,
[data-template='dienst-detail'] .blok-vragen > .binnen {
  padding-block: 112px 0;
}
[data-template='dienst-overzicht'] .vragenlijst,
[data-template='dienst-detail'] .vragenlijst {
  max-width: 760px;
}
[data-template='dienst-overzicht'] .vraag > button,
[data-template='dienst-detail'] .vraag > button {
  font-size: 16px;
  font-weight: 600;
}
[data-template='dienst-overzicht'] .vraag-antwoord,
[data-template='dienst-detail'] .vraag-antwoord {
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink-2);
  padding: 0 56px 22px 20px;
}

/* De reviews op dienstpagina's beginnen met eigen bovenruimte (geen 0). */
[data-template='dienst-overzicht'] .blok-reviewsBlok > .binnen,
[data-template='dienst-detail'] .blok-reviewsBlok > .binnen {
  padding-block: 112px 0;
}

/* --------------------------------------------------------- offerteformulier */

.blok-offerteFormulier > .binnen {
  padding-block: 72px 112px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 48px;
  align-items: start;
}
.offerte-kaart {
  background: #fff;
  border-radius: 20px;
  box-shadow: var(--schaduw-formulier);
  padding: 36px;
  min-width: 0;
}
.offerte-formulier {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* Stepper */
.offerte-stepper {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.offerte-stepper ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.offerte-stepper li {
  min-width: 0;
}
.offerte-stap-knop {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}
.offerte-stap-knop:disabled {
  cursor: default;
}
.offerte-stap-bol {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 700;
  background: var(--mist);
  color: var(--slate);
  transition:
    background 0.2s,
    color 0.2s;
}
.offerte-stap-knop[aria-current='step'] .offerte-stap-bol {
  background: var(--teal);
  color: #fff;
}
.offerte-stap-knop[data-af] .offerte-stap-bol {
  background: var(--aqua);
  color: var(--navy);
}
.offerte-stap-label {
  min-width: 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--slate);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.offerte-stap-knop[aria-current='step'] .offerte-stap-label {
  font-weight: 700;
  color: var(--ink);
}
.offerte-voortgang {
  height: 4px;
  border-radius: 999px;
  background: var(--mist);
  overflow: hidden;
}
.offerte-voortgang > div {
  height: 100%;
  background: var(--teal);
  border-radius: 999px;
  transition: width 0.4s var(--uit);
}
@media (max-width: 767px) {
  .offerte-stap-label {
    display: none;
  }
}

.offerte-stapkop {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.offerte-stapkop .eyebrow {
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--teal);
}
.offerte-stapkop h2 {
  font-size: 30px;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.offerte-stapkop p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--slate);
  max-width: 560px;
  margin: 0;
}

.offerte-alert {
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--fout-bg);
  color: var(--fout-tekst);
  font-size: 14px;
  font-weight: 500;
}

/* Stap 1: diensttegels */
.offerte-stapinhoud {
  display: flex;
  flex-direction: column;
  gap: 10px;
  animation: klapIn 0.3s var(--uit) both;
}
.offerte-tegels {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.offerte-tegel {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  text-align: left;
  padding: 18px;
  border-radius: 16px;
  border: 1px solid rgba(3, 41, 58, 0.14);
  background: #fff;
  font-family: inherit;
  cursor: pointer;
  transition:
    border-color 0.15s,
    background 0.15s,
    box-shadow 0.15s;
}
.offerte-tegel:hover {
  border-color: var(--teal);
}
.offerte-tegel[aria-checked='true'] {
  border-color: var(--teal);
  box-shadow: 0 0 0 1px var(--teal);
  background: var(--mist);
}
.offerte-tegel[data-fout] {
  border-color: var(--fout);
}
.offerte-tegel-tekst {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.offerte-tegel-naam {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.offerte-tegel-naam strong {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
}
.offerte-tegel-badge {
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--aqua);
  color: var(--ink);
  font-size: 11px;
  font-weight: 600;
}
.offerte-tegel-sub {
  font-size: 13px;
  line-height: 1.45;
  color: var(--slate);
}
.offerte-tegel-vink {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid rgba(3, 41, 58, 0.24);
  background: #fff;
  color: transparent;
  transition: background 0.15s;
}
.offerte-tegel[aria-checked='true'] .offerte-tegel-vink {
  border: 0;
  background: var(--teal);
  color: #fff;
}
@media (max-width: 767px) {
  .offerte-tegels {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Vragen */
.offerte-vragen {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px 16px;
  animation: klapIn 0.3s var(--uit) both;
}
.offerte-vraag {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.offerte-vraag[data-half] {
  grid-column: auto;
}
.offerte-vraag > label {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
.offerte-vraag > label span {
  font-weight: 400;
  color: var(--slate);
}
.offerte-hint {
  margin-top: -4px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--slate);
}
.offerte-vraag input,
.offerte-vraag textarea {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid var(--veldrand);
  background: #fff;
  color: var(--ink);
  font-size: 15px;
  font-weight: 400;
  font-family: inherit;
  outline: none;
  resize: vertical;
  transition:
    border-color 0.2s,
    box-shadow 0.2s,
    opacity 0.2s;
}
.offerte-vraag input:hover,
.offerte-vraag textarea:hover {
  border-color: var(--teal);
}
.offerte-vraag input:focus,
.offerte-vraag textarea:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(0, 122, 150, 0.18);
}
.offerte-vraag input[type='number'] {
  max-width: 220px;
}
.offerte-vraag input[aria-invalid='true'],
.offerte-vraag textarea[aria-invalid='true'] {
  border-color: var(--fout);
  box-shadow: 0 0 0 3px rgba(178, 59, 0, 0.12);
}
.offerte-vraag input:disabled,
.offerte-vraag textarea:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  background: var(--mist);
}
.offerte-opties {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.offerte-optie {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid var(--veldrand);
  background: #fff;
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition:
    background 0.15s,
    border-color 0.15s,
    color 0.15s;
}
.offerte-optie:hover {
  border-color: var(--teal);
}
.offerte-optie[aria-checked='true'] {
  border-color: var(--teal);
  background: var(--teal);
  color: #fff;
  font-weight: 600;
}
.offerte-fout {
  font-size: 13px;
  font-weight: 500;
  color: var(--fout);
}

/* Stap 3: tip, dropzone en voorbeelden */
.offerte-tip {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px;
  border-radius: 14px;
  background: var(--mist);
}
.offerte-tip-icoon {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--teal);
  color: #fff;
  display: grid;
  place-items: center;
}
.offerte-tip-tekst {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.offerte-tip-tekst strong {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}
.offerte-tip-tekst span {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-2);
}
.offerte-dropzone {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  padding: 36px 24px;
  border-radius: 16px;
  border: 2px dashed rgba(0, 122, 150, 0.35);
  background: var(--mist-2);
  cursor: pointer;
  transition:
    background 0.2s,
    border-color 0.2s;
}
.offerte-dropzone:hover {
  border-color: var(--teal);
  background: rgba(143, 220, 234, 0.25);
}
.offerte-dropzone[data-sleep] {
  border-color: var(--teal);
  background: rgba(143, 220, 234, 0.35);
}
.offerte-dropzone[data-fout] {
  border-color: var(--fout);
}
.offerte-dropzone-icoon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #fff;
  color: var(--teal);
  display: grid;
  place-items: center;
  box-shadow: 0 6px 16px rgba(0, 62, 76, 0.1);
}
.offerte-dropzone strong {
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
}
.offerte-dropzone .of {
  font-size: 14px;
  color: var(--slate);
}
.offerte-dropzone .kiesknop {
  display: inline-flex;
  align-items: center;
  height: 42px;
  padding: 0 20px;
  border-radius: 999px;
  background: var(--teal);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
}
.offerte-dropzone .telefoonregel {
  font-size: 13px;
  color: var(--slate);
}
.offerte-dropzone input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.offerte-bestanden {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.offerte-bestanden > strong {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
.offerte-bestandsgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 10px;
}
.offerte-bestand {
  position: relative;
  aspect-ratio: 1;
  border-radius: 12px;
  overflow: hidden;
  background: var(--navy);
  animation: klapIn 0.25s var(--uit) both;
}
.offerte-bestand img,
.offerte-bestand video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.offerte-bestand .afspelen {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--teal);
  display: grid;
  place-items: center;
}
.offerte-bestand .naamstrip {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 16px 8px 6px;
  background: linear-gradient(to top, rgba(3, 41, 58, 0.75), rgba(3, 41, 58, 0));
  color: #fff;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.offerte-bestand .weg {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, 0.92);
  color: var(--navy);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background 0.15s;
}
.offerte-bestand .weg:hover {
  background: #fff;
  color: var(--fout);
}
.offerte-bestand .balkje {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 28px;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.35);
  overflow: hidden;
}
.offerte-bestand .balkje > div {
  height: 100%;
  background: var(--aqua);
  border-radius: 999px;
  transition: width 0.2s;
}

/* Calamiteitenmelding */
.offerte-urgentie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  padding: 16px 18px;
  border-radius: 14px;
  background: var(--waarschuw-bg);
}
.offerte-urgentie > span {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink);
}

/* Navigatieknoppen */
.offerte-navigatie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 20px;
  border-top: 1px solid var(--lijn);
}
.offerte-vorige {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 18px 0 14px;
  border-radius: 999px;
  border: 1px solid var(--veldrand);
  background: #fff;
  color: var(--navy);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition:
    border-color 0.2s,
    color 0.2s;
}
.offerte-vorige:hover {
  border-color: var(--teal);
  color: var(--teal);
}
.offerte-vrijblijvend {
  font-size: 13px;
  color: var(--slate);
}
.offerte-navigatie .knop-cta:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Succes */
.offerte-succes {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding: 12px 0;
  animation: klapIn 0.3s var(--uit) both;
}
.offerte-succes-vink {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--teal);
  color: #fff;
  display: grid;
  place-items: center;
}
.offerte-succes h2 {
  font-size: 30px;
  line-height: 1.15;
}
.offerte-succes p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 520px;
  margin: 0;
}
.offerte-opnieuw {
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  height: 42px;
  padding: 0 20px;
  border-radius: 999px;
  border: 0;
  background: var(--mist);
  color: var(--navy);
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.2s;
}
.offerte-opnieuw:hover {
  background: var(--aqua);
}

/* Zijbalk */
.offerte-zijbalk {
  position: sticky;
  top: 120px;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.offerte-samenvatting {
  background: var(--mist);
  border-radius: 20px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.offerte-samenvatting > strong {
  font-size: 18px;
  font-weight: 700;
}
.offerte-samenvatting > p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--slate);
  margin: 0;
}
.offerte-samenvatting dl {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.offerte-samenvatting dl > div {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--lijn);
}
.offerte-samenvatting dt {
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--teal);
}
.offerte-samenvatting dd {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.offerte-contactkaart {
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 0 0 1px var(--lijn);
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
.offerte-contactkaart > strong {
  font-size: 18px;
  font-weight: 700;
}
.offerte-contactkaart > p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--slate);
  margin: 0;
}
.offerte-contactkaart .walink {
  font-size: 14px;
  font-weight: 600;
  color: var(--teal);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.offerte-contactkaart .walink:hover {
  color: var(--navy);
}

@media (max-width: 1023px) {
  .blok-offerteFormulier > .binnen {
    grid-template-columns: minmax(0, 1fr);
  }
  .offerte-zijbalk {
    position: static;
  }
}
@media (max-width: 767px) {
  .offerte-kaart {
    padding: 24px;
  }
}

/* ------------------------------------------------------------- kleinigheden */

.eyebrow {
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--teal);
}

/* Lexical-lijstjes in lopende tekst krijgen overal het vinkbolletje. */
.lopende-tekst ul,
.infokaart .tekst ul {
  list-style: none;
  margin-inline: 0;
  margin-bottom: 0;
  padding: 0;
}

/* De schuifbare rij bij smalle schermen: tabellen en codeblokken scrollen in
   hun eigen kader, de pagina zelf nooit horizontaal. */
.lopende-tekst table {
  display: block;
  overflow-x: auto;
}

/* Lijstjes die uit de editor komen (kenmerkSplit, infokaarten, vragen):
   zelfde vinkbolletje als de handgemaakte lijstjes, via een achtergrond. */
.kenmerksplit-tekst li::before,
.infokaart li::before,
.vraag-antwoord li::before {
  content: '';
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 3px;
  border-radius: 50%;
  background: var(--teal)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8l2.5 2.5 4.5-5' stroke='%23fff' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / 16px no-repeat;
}
.vraag-antwoord ul {
  list-style: none;
  margin-inline: 0;
  margin-bottom: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.vraag-antwoord li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

/* Datumvelden op een telefoon: Safari tekent er zijn eigen bediening in en
   maakt het veld breder dan de cel. Zie gedeeld/CLAUDE.md; de cel heeft al
   min-width: 0, dit haalt de eigen bediening weg op kleine schermen. */
@media (max-width: 767px) {
  .offerte-vraag input[type='date'] {
    appearance: none;
    -webkit-appearance: none;
  }
  .offerte-vraag input,
  .offerte-vraag textarea {
    font-size: 16px;
  }
}

/* ----------------------------------------------------- tikdoelen op mobiel
   Alles waar je op tikt is op een telefoon minstens 44 pixels hoog. Dat is
   onze huisregel én wat de designoplevering zelf voorschrijft (§10), maar de
   maten in dat document halen het niet: knoppen staan op 42, het ronde
   telefoonicoon op 40 en tekstlinks komen op 19 tot 24 uit.

   Daarom hier, en alleen onder 768px: de vorm blijft die van het ontwerp, de
   hoogte groeit naar 44. Op grotere schermen gelden de ontwerpmaten
   onveranderd, want daar wijs je met een muis. */

@media (max-width: 767px) {
  .knop-cta,
  .knop-teal,
  .knop-wit,
  .knop-wit-pil,
  .knop-glas,
  .offerte-vorige,
  .offerte-opnieuw,
  .reviewbadge {
    min-height: 44px;
  }

  /* Het ronde telefoonicoon en de hamburger in de kopbalk. */
  .kop-telefoon,
  .kop-burger {
    width: 44px;
    height: 44px;
  }

  /* De logolink: het merk blijft 30px, de tikzone wordt 44. */
  .kop-logo {
    min-height: 44px;
  }

  /* Tekstlinks: de regel zelf blijft even hoog, de tikzone groeit eromheen.
     Daarom inline-flex en niet alleen padding — anders verschuift de tekst. */
  .tekstlink,
  .offertestart-kop .bel,
  .voet-oproep-knoppen .bel,
  .offerte-contactkaart .walink,
  .topbalk a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* De links in de voetkolommen en onderbalk. De tussenruimte gaat omlaag,
     anders zouden de kolommen twee keer zo lang worden. */
  .voet-kolom ul {
    gap: 0;
  }
  .voet-kolom a,
  .voet-onder a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* De chips op de dienstkaarten, inclusief de “+N meer”-link. */
  .dienstkaart-chips {
    gap: 8px;
  }
  .dienstkaart-chips a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 12px;
  }
  .dienstkaart-chips a.meer {
    padding: 0 2px;
  }
}

/* Een dichtgeklapt antwoord staat wél in de HTML (zie Accordeon.tsx) maar
   hoort niet in beeld. `hidden` doet dat zelf; deze regel is er alleen omdat
   de displaywaarde hierboven die van [hidden] zou overrulen. */
.vraag-antwoord[hidden] {
  display: none;
}

/* Het e-mailadres op de contactkaarten is een link, dus ook daar 44px. */
@media (max-width: 767px) {
  .contactinfo-regels a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

/* ------------------------------------------------- ruimte binnen één tekst
   Een tekstveld met opmaak levert meerdere blokken op: alinea's, lijsten, en
   soms een slotzin ná een lijst. Die krijgen van de renderer geen marge mee,
   en omdat we `p { margin: 0 }` hanteren plakten ze tegen elkaar: op een
   artikelpagina liepen twee alinea's als één lap tekst door, en in een kaart
   plakte de slotzin tegen het lijstje.

   Eén regel lost dat op: ruimte tussen opeenvolgende blokken, nooit ervoor of
   erna. De maat volgt per plek de waarde uit het ontwerp. */

.payload-richtext > * + * {
  margin-top: var(--tekst-ruimte, 14px);
}

.artikel-tekst {
  --tekst-ruimte: 20px;
}
.kenmerksplit-tekst,
.inhoudrij-tekst,
.blok-tekst .lopende-tekst {
  --tekst-ruimte: 16px;
}
.vraag-antwoord,
.oproepband-tekst,
.osmoseteaser-tekst {
  --tekst-ruimte: 12px;
}