/* ============================================================
   RIET QUADEN MAKELAARS — de gewone pagina's

   Alles hier gebruikt de vormtaal van de homepagina: de balk uit het logo
   (zwart vlak met rode onderstreping) als kop, het ritme papier /
   papier-diep tussen de secties, en de rode streep onder een titel.
   Er is bewust geen enkele nieuwe kleur of vorm bijgekomen.
   ============================================================ */

/* ---------- kruimelpad ---------- */

.kruimels {
  margin-bottom: var(--ruimte-sm);
  font-size: 0.9375rem;
  color: var(--steungrijs);
}

.kruimels__lijst {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.kruimels__lijst li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.kruimels__lijst li + li::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--rood);
  opacity: 0.55;
}

.kruimels a {
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s var(--ease-luxe), color 0.2s var(--ease-luxe);
}

.kruimels a:hover,
.kruimels a:focus-visible {
  color: var(--zwart);
  border-bottom-color: var(--rood);
}

.kruimels a:focus-visible {
  outline: 2px solid var(--zwart);
  outline-offset: 3px;
}

.kruimels [aria-current='page'] {
  color: var(--zwart);
  font-weight: var(--gew-body-vet);
}

/* ---------- de kop van een pagina ---------- */

.pagkop {
  /* Onderaan bewust een vaste maat en niet een deel van --sectie-verticaal.
     De volgende sectie zet er zijn eigen sectiepadding bovenop, en die twee
     stapelden op: op 1440px zat er 186px niets tussen de introzin en de
     eerste alinea, op mobiel een half scherm. Samen met de regel hieronder
     (.pagkop + section) is dat gat nu overal 64px. (13-09-2026) */
  padding-block: calc(var(--sectie-verticaal) * 0.62) var(--ruimte-md);
}

/* De sectie direct onder de paginakop hoort bij die kop en begint dus niet
   met een volle sectiepadding. Verder op de pagina blijft het ritme van
   --sectie-verticaal gewoon staan. */
.pagkop + section {
  padding-top: var(--ruimte-md);
}

.pagkop__label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: var(--ruimte-xs);
  color: var(--steungrijs);
  font-size: var(--fs-klein);
  font-weight: var(--gew-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.pagkop__stip {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--rood);
}

.pagkop__titel {
  max-width: 20ch;
  font-size: var(--fs-h1);
  /* "Privacyverklaring" en "Bedrijfsonroerend goed" passen op 360 px niet op
     één regel; zonder dit duwen ze de hele pagina 35 px naar rechts. */
  overflow-wrap: break-word;
  hyphens: auto;
}

/* de logobalk als onderstreping: zwart blokje met de rode bies eronder.
   --balk laat de balk bij binnenkomst uitlopen (onthul.js), precies zoals
   het rode streepje onder een dienst op de homepagina. Zonder JS staat hij
   gewoon op zijn volle breedte. */
.pagkop__titel::after {
  content: '';
  display: block;
  width: var(--balk, 100%);
  max-width: 96px;
  height: 6px;
  margin-top: var(--ruimte-sm);
  background: var(--zwart);
  border-bottom: 3px solid var(--rood);
}

.pagkop__intro {
  max-width: 62ch;
  margin-top: var(--ruimte-sm);
  font-size: var(--fs-body-groot);
  color: var(--steungrijs);
}

/* ---------- lopende tekst ---------- */

.lopend {
  max-width: 68ch;
}

.lopend p + p {
  margin-top: 1.05em;
}

.lopend a {
  border-bottom: 1px solid var(--rood);
}

.lopend a:hover,
.lopend a:focus-visible {
  color: var(--rood-diep);
}

/* ---------- puntenlijst ---------- */

.punten {
  margin-top: var(--ruimte-lg);
}

.punten__kop {
  font-size: var(--fs-h3);
  margin-bottom: var(--ruimte-sm);
}

.punten__lijst {
  display: grid;
  gap: 12px;
  max-width: 68ch;
}

.punten__lijst li {
  display: grid;
  grid-template-columns: 26px 1fr;
  align-items: start;
  gap: 12px;
}

.punten__vink {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  margin-top: 3px;
  border-radius: 50%;
  background: var(--rood-vlak);
  color: var(--wit);
}

.punten__vink svg {
  width: 15px;
  height: 15px;
}

/* ---------- tekstblok met foto ---------- */

.vlak__raster {
  display: grid;
  gap: var(--ruimte-lg);
  align-items: start;
}

@media (min-width: 900px) {
  .vlak__raster {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: var(--ruimte-xl);
  }
  .vlak__raster--breed {
    grid-template-columns: minmax(0, 1fr);
  }
  .vlak__raster--om .vlak__tekst {
    order: 2;
  }
}

/* het fotolijstje van de dienstensectie: donker kader, passe-partout,
   rode keerlijn onderaan */
.vlak__lijst {
  position: relative;
  padding: 14px 14px 18px;
  background: var(--wit);
  border-radius: 3px;
  box-shadow:
    0 1px 2px rgba(24, 22, 23, 0.1),
    0 20px 40px -26px rgba(24, 22, 23, 0.5);
}

.vlak__lijst::after {
  content: '';
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 8px;
  height: 3px;
  background: var(--rood);
}

.vlak__lijst img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

/* ---------- de oproep onderaan ---------- */

.oproep__binnen {
  display: flex;
  justify-content: center;
}

.oproep__bord {
  position: relative;
  width: min(100%, 760px);
  padding: var(--ruimte-lg) var(--ruimte-md) var(--ruimte-md);
  text-align: center;
  background: var(--wit);
  border-radius: 3px;
  box-shadow:
    0 1px 2px rgba(24, 22, 23, 0.08),
    0 24px 50px -30px rgba(24, 22, 23, 0.45);
}

.oproep__bord::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 8px;
  background: var(--zwart);
  border-bottom: 3px solid var(--rood);
  border-radius: 3px 3px 0 0;
}

.oproep__kop {
  font-size: var(--fs-h3);
  max-width: 24ch;
  margin-inline: auto;
}

.oproep__tekst {
  max-width: 52ch;
  margin: var(--ruimte-xs) auto 0;
  color: var(--steungrijs);
}

.oproep__knoppen {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--ruimte-xs);
  margin-top: var(--ruimte-md);
}

.oproep__onder {
  margin-top: var(--ruimte-sm);
  font-size: var(--fs-klein);
  color: var(--steungrijs);
}

/* ---------- de diensten op /diensten ----------
   Was: vier vlakke witte kaartjes zonder beeld. Dat was een ander sjabloon
   dan de dienstensectie op de homepagina, terwijl het over dezelfde vier
   diensten gaat. Nu dezelfde opbouw als daar: het fotolijstje aan zijn
   haakje, om en om links en rechts, met de rode streep onder de titel.
   De lijstjes zelf (.dienst__lijst, -haak, -kader, -mat) komen uit v2.css;
   die zijn niet aan #diensten gebonden en worden hier hergebruikt.
   (13-09-2026) */

.dienstenblokken {
  display: flex;
  flex-direction: column;
  margin-top: var(--ruimte-xl);
}

.dienstblok {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--ruimte-md);
  padding-block: var(--ruimte-xl);
  border-top: 1px solid rgba(24, 22, 23, 0.12);
}

.dienstblok:first-child {
  border-top: none;
  padding-top: 0;
}

.dienstblok:last-child {
  padding-bottom: 0;
}

.dienstblok__inhoud > * + * {
  margin-top: var(--ruimte-sm);
}

.dienstblok__titel {
  position: relative;
  padding-bottom: 12px;
  font-family: var(--font-kop);
  font-size: var(--fs-h3);
  font-weight: var(--gew-kop);
  line-height: 1.12;
}

/* hetzelfde rode streepje als onder een dienst op de homepagina */
.dienstblok__titel::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: var(--streep, 100%);
  max-width: 78px;
  height: 3px;
  background: var(--rood);
}

.dienstblok__lead {
  font-family: var(--font-kop);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.1rem, 1rem + 0.5vw, 1.3rem);
}

.dienstblok__tekst {
  max-width: 62ch;
  color: var(--zwart);
}

.dienstblok__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: var(--gew-body-vet);
  color: var(--rood-diep);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s var(--ease-luxe);
}

.dienstblok__link::after {
  content: '\2192';
  transition: transform 0.3s var(--ease-luxe);
}

.dienstblok__link:hover,
.dienstblok__link:focus-visible {
  border-bottom-color: var(--rood);
}

.dienstblok__link:hover::after,
.dienstblok__link:focus-visible::after {
  transform: translateX(4px);
}

.dienstblok__link:focus-visible {
  outline: 2px solid var(--zwart);
  outline-offset: 4px;
}

@media (min-width: 900px) {
  .dienstblok {
    grid-template-columns: 340px minmax(0, 1fr);
    gap: clamp(2rem, 1rem + 3vw, 4rem);
    align-items: start;
  }
  .dienstblok--gespiegeld {
    grid-template-columns: minmax(0, 1fr) 340px;
  }
  .dienstblok--gespiegeld .dienstblok__lijst {
    grid-column: 2;
    grid-row: 1;
  }
  .dienstblok--gespiegeld .dienstblok__inhoud {
    grid-column: 1;
    grid-row: 1;
  }
  /* een dienst zonder foto neemt de volle breedte */
  .dienstblok:not(:has(.dienstblok__lijst)) {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 899px) {
  .dienstblok { padding-block: var(--ruimte-lg); }
}

/* ---------- teamleden ---------- */

.team-rij {
  display: grid;
  gap: var(--ruimte-md);
}

@media (min-width: 760px) {
  .team-rij {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }
}

.teamkaart {
  position: relative;
  padding: 14px 14px 22px;
  background: var(--wit);
  border-radius: 3px;
  box-shadow:
    0 1px 2px rgba(24, 22, 23, 0.08),
    0 18px 36px -26px rgba(24, 22, 23, 0.45);
}

.teamkaart__beeld {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--papier-diep);
}

.teamkaart__beeld img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* hoofden nooit afsnijden: portretten staan hoog in het kader */
  object-position: 50% 22%;
}

.teamkaart__leeg {
  display: grid;
  place-items: center;
  height: 100%;
  color: var(--steungrijs);
  font-size: var(--fs-klein);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.teamkaart__tekst {
  padding-top: var(--ruimte-sm);
}

.teamkaart__naam {
  font-family: var(--font-kop);
  font-size: 1.4375rem;
  font-weight: 600;
  line-height: 1.15;
}

.teamkaart__functie {
  margin-top: 3px;
  color: var(--steungrijs);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.teamkaart__streep {
  display: block;
  width: 54px;
  height: 5px;
  margin: var(--ruimte-xs) 0;
  background: var(--zwart);
  border-bottom: 2px solid var(--rood);
}

.teamkaart__over {
  color: var(--steungrijs);
  font-size: var(--fs-klein);
}

.teamkaart__contact {
  display: grid;
  gap: 6px;
  margin-top: var(--ruimte-xs);
  font-size: var(--fs-klein);
}

.teamkaart__contact a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: var(--gew-body-vet);
}

.teamkaart__contact a:hover,
.teamkaart__contact a:focus-visible {
  color: var(--rood-diep);
}

/* ---------- formulier ---------- */

.form {
  max-width: 720px;
}

.form__raster {
  display: grid;
  gap: var(--ruimte-sm);
}

.form__raster > * {
  min-width: 0;
}

@media (min-width: 700px) {
  .form__raster {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .form__veld--breed {
    grid-column: 1 / -1;
  }
}

.form__veld {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form__veld label {
  font-size: var(--fs-klein);
  font-weight: var(--gew-body-vet);
}

.form__ster {
  color: var(--rood-diep);
}

.form__uitleg {
  font-size: 0.9375rem;
  color: var(--steungrijs);
}

/* De velden stonden er als standaard browservelden: één dunne grijze rand,
   verder niets. Nu dragen ze dezelfde vorm als de rest van de site: wit
   papier met 3px hoek en een lichte schaduw zoals de kaarten, en onderaan
   de balk uit het logo — zwart in rust, merkrood zodra je erin staat.
   (13-09-2026)

   De 16px-ondergrens blijft gelden: daaronder zoomt Safari op de iPhone bij
   het aantikken automatisch in en staat de pagina scheef. 17px past bij de
   rest van V2 (Riet las de site slecht) en zit daar ruim boven. */
.form input,
.form select,
.form textarea {
  width: 100%;
  max-width: 100%;
  padding: 14px 16px;
  font-family: inherit;
  font-size: var(--fs-klein);
  line-height: 1.45;
  color: var(--zwart);
  background: var(--wit);
  border: 1px solid rgba(24, 22, 23, 0.16);
  border-bottom: 2px solid rgba(24, 22, 23, 0.5);
  border-radius: 3px;
  box-shadow: 0 1px 2px rgba(24, 22, 23, 0.05);
  transition:
    border-color 0.25s var(--ease-luxe),
    box-shadow 0.25s var(--ease-luxe);
}

.form input::placeholder,
.form textarea::placeholder {
  color: var(--steungrijs);
}

.form input:hover,
.form select:hover,
.form textarea:hover {
  border-bottom-color: var(--zwart);
}

.form textarea {
  resize: vertical;
  min-height: 150px;
}

.form input:focus-visible,
.form select:focus-visible,
.form textarea:focus-visible {
  outline: none;
  border-color: rgba(24, 22, 23, 0.28);
  border-bottom-color: var(--rood);
  box-shadow:
    0 0 0 3px rgba(230, 68, 73, 0.18),
    0 1px 2px rgba(24, 22, 23, 0.05);
}

/* ---------- keuzelijsten ----------
   Het pijltje van het besturingssysteem viel uit de toon (blauw op macOS,
   een blokje op Windows). Het is nu hetzelfde lijn-icoon als de rest van de
   site: 1,6px, ronde uiteinden, merkzwart. */
.form select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none' stroke='%23181617' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5 7 7.5 13 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  cursor: pointer;
}

.form__veld.is-fout input,
.form__veld.is-fout textarea,
.form__veld.is-fout select {
  border-color: var(--rood-diep);
}

.form__veldfout {
  font-size: 0.9375rem;
  color: var(--rood-diep);
  font-weight: var(--gew-body-vet);
}

.form__fout {
  padding: 12px 16px;
  margin-bottom: var(--ruimte-sm);
  border-left: 4px solid var(--rood-diep);
  background: rgba(230, 68, 73, 0.09);
  font-weight: var(--gew-body-vet);
}

.form__akkoord {
  margin-top: var(--ruimte-sm);
  font-size: 0.9375rem;
  color: var(--steungrijs);
}

.form__akkoord a {
  border-bottom: 1px solid var(--rood);
}

.form__knop {
  margin-top: var(--ruimte-sm);
}

.form__knop[disabled] {
  opacity: 0.65;
  cursor: progress;
}

/* het honeypot-veld: uit beeld, maar niet display:none (dat slaan robots over) */
.form__val {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form__gelukt {
  max-width: 620px;
  padding: var(--ruimte-md);
  background: var(--wit);
  border-left: 4px solid var(--rood);
  border-radius: 3px;
  box-shadow:
    0 1px 2px rgba(24, 22, 23, 0.08),
    0 18px 36px -26px rgba(24, 22, 23, 0.45);
}

.form__gelukt-kop {
  font-family: var(--font-kop);
  font-size: var(--fs-h3);
  margin-bottom: var(--ruimte-2xs);
}

/* ---------- contactgegevens naast het formulier ---------- */

.contactblok {
  display: grid;
  gap: var(--ruimte-lg);
}

/* Een rasterkolom is standaard min-width: auto en groeit dus mee met zijn
   breedste kind. De keuzelijst met "Ik wil een taxatie laten uitvoeren" erin
   rekte de kolom daardoor tot voorbij de schermrand. */
.contactblok > * {
  min-width: 0;
}

@media (min-width: 960px) {
  .contactblok {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: var(--ruimte-xl);
  }
}

.gegevens {
  padding: var(--ruimte-md);
  background: var(--wit);
  border-radius: 3px;
  box-shadow:
    0 1px 2px rgba(24, 22, 23, 0.08),
    0 18px 36px -26px rgba(24, 22, 23, 0.45);
}

.gegevens__kop {
  font-size: var(--fs-h3);
  margin-bottom: var(--ruimte-sm);
}

.gegevens__lijst {
  display: grid;
  gap: var(--ruimte-sm);
}

.gegevens__label {
  display: block;
  color: var(--steungrijs);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.gegevens__waarde {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-body-groot);
  font-weight: var(--gew-body-vet);
}

a.gegevens__waarde:hover,
a.gegevens__waarde:focus-visible {
  color: var(--rood-diep);
}

.gegevens__kaart {
  display: block;
  margin-top: var(--ruimte-md);
  border-radius: 3px;
  overflow: hidden;
}

/* ---------- eenvoudige tekstpagina (juridisch) ---------- */

.juridisch .lopend {
  max-width: 72ch;
}

/* Zolang er geen teamfoto is, hoeft het lege vak niet de hoogte van een
   portret te hebben. Een lage strook leest als "komt nog", een groot beige
   vlak leest als een gat. */
.teamkaart__beeld:has(.teamkaart__leeg) {
  aspect-ratio: 5 / 2;
}