/* ============================================================
   RIET QUADEN MAKELAARS — V2-laag

   Wordt als laatste ingeladen. Bevat alles wat na V1 is veranderd:

     1. zacht papierwit in plaats van spierwit, en één doorlopende wassing
        over de hele pagina (het spel zelf staat in fond.css)
     2. grotere en zwaardere letter, in twee rondes
     3. het naambordje in plaats van het "45 jaar"-zegel
     4. de teamsectie
     5. de dienstenlijst zonder icoontjes, met twee fotolijstjes

   Sinds 06-08 is óók #contact licht: Riet vond het zwarte blok doods.
   De hele pagina staat nu op één doorlopend licht fond.
   ============================================================ */

/* ---------- 1 + 2: ondergrond en leesbaarheid ---------- */
body {
  font-weight: var(--gew-body);
  line-height: 1.7;
}

/* De secties uit V1 zetten hun achtergrond met een ID-selector; die wint van
   een klasse. Hier zetten we ze met dezelfde zwaarte uit, zodat de wassing
   op de body overal doorloopt en er nergens een sectienaad ontstaat. */
#hero, #usps, #over, #etalage, #diensten, #verkopen, #team, #contact {
  background: none;
  background-color: transparent;
}
.voet { background: none; background-color: transparent; }

/* De hero mag niet clippen: de telefoonlijn (RQ2) loopt er dwars doorheen. */
#hero { overflow: visible; }

/* Alle inhoud ligt boven de fond-laag. LET OP: #header hoort hier NIET bij.
   De header is hetzelfde element als .kop (position:fixed, z-index 150 in
   chrome.css), en een ID-selector wint van die klasse: met #header in deze
   lijst werd de balk relative en scrolde hij gewoon mee de pagina uit
   (bug 03-08 t/m 06-08, gemeld door Alexander). Zijn eigen z-index 150
   houdt hem sowieso boven het fond. */
#hoofd, .voet, .modal { position: relative; z-index: 1; }

p, li { font-weight: var(--gew-body); }
strong, b { font-weight: var(--gew-body-vet); }

/* Kleine labels waren op 14px met veel spatiëring nauwelijks te lezen. */
.hero__label,
.over__eyebrow,
.etalage__label,
.diensten__eyebrow,
.verkopen__eyebrow,
.contact__eyebrow {
  font-size: var(--fs-klein);
  font-weight: var(--gew-label);
  letter-spacing: 0.11em;
}

/* Het menu mag groter, maar alleen zolang de vijf items op één regel passen.
   Op 360px staat er anders nog maar de helft van het menu in beeld. */
.kop__mail { font-size: 1.0625rem; font-weight: var(--gew-body-vet); }
.kop__link { font-weight: var(--gew-body-vet); }

@media (min-width: 900px) {
  .kop__link { font-size: 1rem; letter-spacing: 0.1em; }
}
@media (max-width: 899px) {
  .kop__link { font-size: 13.5px; letter-spacing: 0.06em; }
  .kop__mail { font-size: 0.9375rem; }
}
@media (max-width: 560px) {
  .kop__nav { justify-content: flex-start !important; overflow-x: auto; }
  .kop__lijst { padding-inline: 2px; }
  .kop__link { font-size: 12px; letter-spacing: 0.02em; }
  .kop__lijst,
  .kop__lijst li { gap: 8px; }
}

.knop { font-weight: var(--gew-body-vet); }

/* ---------- 3: het naambordje bij het portret ----------
   De vorm van het logo: een liggend blok met een rode streep eronder. Waar
   eerst "45 jaar" stond (dat las als haar leeftijd) staat nu wie er op de
   foto staat en sinds wanneer zij dit doet. */
.hero__naambord {
  position: absolute;
  left: -18px;
  bottom: 26px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 13px 20px 12px;
  background: var(--wit);
  border-bottom: 4px solid var(--rood);
  box-shadow: 0 18px 38px -20px rgba(24, 22, 23, .5);
  text-align: left;
  width: max-content;
  max-width: min(112%, 300px);
}
.hero__naambord-naam {
  font-family: var(--font-kop);
  font-size: 1.3125rem;
  font-weight: var(--gew-kop);
  line-height: 1.05;
  color: var(--zwart);
}
.hero__naambord-lijn { display: none; }
.hero__naambord-rol {
  font-size: 0.8125rem;
  font-weight: var(--gew-label);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  line-height: 1.25;
  color: var(--steungrijs);
}

@media (max-width: 899px) {
  .hero__naambord {
    left: 50%;
    transform: translateX(-50%);
    bottom: -18px;
    max-width: none;
    width: max-content;
    text-align: center;
    align-items: center;
  }
}
@media (max-width: 560px) {
  .hero__naambord { padding: 10px 16px 9px; }
  .hero__naambord-naam { font-size: 1.125rem; }
  .hero__naambord-rol { font-size: 0.6875rem; letter-spacing: 0.05em; }
}

/* ---------- USP's: dunne regel ----------
   "Ons advies is Goud waard!" stond te vet. Het is een uitspraak, geen
   schreeuw: lichte serif, cursief, ruim gezet. */
#usps .usps__kop {
  font-family: var(--font-kop);
  font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
  font-weight: 400;
  font-style: italic;
  letter-spacing: 0;
  text-align: center;
  color: var(--zwart);
  margin-bottom: clamp(2rem, 1.25rem + 2.5vw, 3.25rem);
}
#usps .usps__lijst {
  display: grid;
  gap: 16px 40px;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  max-width: 980px;
  margin-inline: auto;
}
#usps .usps__item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  font-size: var(--fs-body);
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(24, 22, 23, .10);
  color: var(--zwart);
}
#usps .usps__vink {
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 4px;
}
#usps .usps__vink path {
  fill: none;
  stroke: var(--rood);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- 5: de dienstenlijst ----------
   Onder elkaar zoals in V1, zonder de lijn-icoontjes. Twee diensten krijgen
   een fotolijstje op de plek waar het icoon stond. */
.dienst__beeld { display: none; }

.dienst__lijst {
  position: relative;
  margin: 0 0 8px;
  width: min(100%, 340px);
  will-change: transform;
}
/* het haakje waar het lijstje aan hangt, met twee draadjes */
.dienst__lijst-haak {
  position: absolute;
  top: -16px;
  left: 50%;
  width: 9px;
  height: 9px;
  margin-left: -4.5px;
  border-radius: 50%;
  background: var(--steungrijs);
  box-shadow: 0 1px 2px rgba(24, 22, 23, .4);
}
.dienst__lijst-haak::before,
.dienst__lijst-haak::after {
  content: '';
  position: absolute;
  top: 7px;
  left: 4px;
  width: 1px;
  height: 28px;
  background: rgba(24, 22, 23, .26);
  transform-origin: top center;
}
.dienst__lijst-haak::before { transform: rotate(40deg); }
.dienst__lijst-haak::after  { transform: rotate(-40deg); }

/* het kader zelf: donker hout met een lichte binnenrand */
.dienst__lijst-kader {
  display: block;
  padding: 11px;
  background: linear-gradient(155deg, #2A2526 0%, #181617 45%, #241F20 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .14),
    0 2px 3px rgba(24, 22, 23, .10),
    0 26px 44px -24px rgba(24, 22, 23, .62);
  will-change: transform;
}
/* de passe-partout, met een dunne rode keerlijn eromheen */
.dienst__lijst-mat {
  display: block;
  position: relative;
  padding: 15px;
  background: #FBF9F6;
  box-shadow: inset 0 0 0 1px rgba(24, 22, 23, .10);
}
.dienst__lijst-mat::before {
  content: '';
  position: absolute;
  inset: 9px;
  border: 1px solid rgba(230, 68, 73, .38);
  pointer-events: none;
}
.dienst__lijst-mat img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  box-shadow: 0 1px 3px rgba(24, 22, 23, .28);
}

@media (max-width: 760px) {
  .dienst__lijst { width: min(100%, 260px); margin-inline: auto; }
}

/* een rood streepje dat onder de titel uitloopt zodra de dienst binnenkomt */
#diensten .dienst__titel {
  position: relative;
  padding-bottom: 12px;
}
#diensten .dienst__titel::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: var(--streep, 100%);
  max-width: 78px;
  height: 3px;
  background: var(--rood);
}

/* de negen taxatie-situaties: genummerd, in kolommen */
#diensten .dienst__vraag {
  font-family: var(--font-kop);
  font-size: var(--fs-h3);
  font-weight: var(--gew-kop);
  margin-top: var(--ruimte-md);
}
#diensten .dienst__situaties {
  display: grid;
  gap: 10px 32px;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  counter-reset: situatie;
  margin-top: var(--ruimte-sm);
}
#diensten .dienst__situaties li {
  counter-increment: situatie;
  display: flex;
  gap: 12px;
  font-size: 1.0625rem;
  color: var(--steungrijs);
}
#diensten .dienst__situaties li::before {
  content: counter(situatie, decimal-leading-zero);
  flex: none;
  font-variant-numeric: tabular-nums;
  font-weight: var(--gew-label);
  color: var(--rood-diep);
}

/* Vanaf 900px staat het lijstje naast de tekst, om en om links en rechts. */
@media (min-width: 900px) {
  #diensten .dienst {
    grid-template-columns: 340px minmax(0, 1fr);
    gap: clamp(2rem, 1rem + 3vw, 4rem);
    align-items: start;
  }
  #diensten .dienst--gespiegeld { grid-template-columns: minmax(0, 1fr) 340px; }
  #diensten .dienst--gespiegeld .dienst__lijst { grid-column: 2; grid-row: 1; }
  #diensten .dienst--gespiegeld .dienst__inhoud { grid-column: 1; grid-row: 1; }
  /* een dienst zonder lijstje gebruikt de volle breedte */
  #diensten .dienst:not(:has(.dienst__lijst)) { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- etalage op licht ---------- */
#etalage .etalage__kozijn { box-shadow: var(--schaduw-diep); }

/* Rood blijft van wat te koop staat. Alles wat niet meer vrij te koop is —
   verkocht, verhuurd, verkocht onder voorbehoud — krijgt het merkzwart, net
   als op de kaartjes in het woningaanbod. */
.biljet__sticker--verkocht,
.biljet__sticker--verhuurd,
.biljet__sticker--onder-bod {
  background: var(--zwart) !important;
  color: var(--wit) !important;
}

/* ---------- kleine leesbaarheidscorrecties ---------- */
.over__citaat p { font-size: clamp(1.1875rem, 1.1rem + 0.4vw, 1.375rem); }
.hero__sub { font-size: var(--fs-body-groot); }
.contact__kop { max-width: 22ch; }

/* ============================================================
   LEESBAARHEID, TWEEDE RONDE (Alexander, 03-08-2026)
   De type-schaal in tokens.css ging een maat omhoog; hieronder de plekken
   die hun grootte hard hadden staan en dus niet meeliepen.
   ============================================================ */

.voet { font-size: var(--fs-klein); }
.voet__lijst,
.voet__waarde { font-size: var(--fs-klein); font-weight: var(--gew-body); }
.voet__waarde { font-weight: var(--gew-body-vet); }
.voet__lijst .voet__label { font-size: 0.9375rem; font-weight: var(--gew-label); }
.voet__tip-kop { font-size: 1.1875rem; font-weight: var(--gew-body-vet); }
.voet__kernwoorden { font-size: 1.1875rem; }
.voet__sponsor-kop { font-size: 1.375rem; }
.voet__kop { font-size: 1.125rem; }
.voet__voorwaarden { font-size: 0.9375rem; color: #6B6763; }
.voet__onder,
.voet__onder-lijst { font-size: 0.9375rem; }

.hero__tel,
.hero__link,
.hero__bellen { font-size: 1.1875rem; font-weight: var(--gew-body-vet); }

.knop { font-size: 1.125rem; }
.knop--klein { font-size: 1.0625rem; }

.over__auteur-naam { font-size: 1.3125rem; }
.contact__regel { font-size: 1.125rem; }
.contact__adres-regel { font-size: 1.0625rem; }
.contact__adres-label { font-size: 0.9375rem; }
.teamlid__naam { font-size: 1.625rem; }
.teamlid__functie,
.teamlid__tekst,
.teamlid__link { font-size: 1.0625rem; }

.biljet__type { font-size: 0.875rem; font-weight: var(--gew-label); }
.biljet__straat { font-size: 1.25rem; }
.biljet__plaats { font-size: 1rem; }
.biljet__prijs { font-size: 1.1875rem; font-weight: var(--gew-body-vet); }
.biljet__kk { font-size: 0.9375rem; }

.hero__label,
.over__eyebrow,
.etalage__label,
.diensten__eyebrow,
.verkopen__eyebrow,
.contact__eyebrow,
.team__eyebrow { font-size: 1rem; }

@media (max-width: 560px) {
  :root {
    --fs-body: 1.1875rem;
    --fs-body-groot: 1.3125rem;
    --fs-klein: 1rem;
  }
  .hero__tel, .hero__link, .hero__bellen { font-size: 1.0625rem; }
  .knop { font-size: 1.0625rem; }
}

/* ============================================================
   LEESBAARHEID, DERDE RONDE (Riet, 06-08-2026)
   "Tel. nummers, naam en zo is allemaal klein." De contactgegevens in de
   hero staan nu op een visitekaartje: dezelfde balkvorm als het naambordje
   en de trots-bordjes, met de nummers een flinke maat groter.
   ============================================================ */

.hero__kaart {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin-top: 28px;
  padding: 18px 26px 20px;
  background: var(--wit);
  border-bottom: 5px solid var(--rood);
  box-shadow: 0 2px 3px rgba(24, 22, 23, 0.06), 0 22px 42px -26px rgba(24, 22, 23, 0.4);
}
.hero__kaart .hero__bellen {
  margin-top: 0;
  font-size: 1rem;
  font-weight: var(--gew-label);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--steungrijs);
}
.hero__kaart .hero__telrij { margin-top: 4px; gap: 8px 28px; }
.hero__kaart .hero__mailrij { margin-top: 0; }
.hero__kaart .hero__tel {
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  font-weight: var(--gew-body-vet);
  border-bottom: none;
  padding-bottom: 0;
  gap: 10px;
}
.hero__kaart .icoon--klein {
  width: 21px;
  height: 21px;
  color: var(--rood-diep);
}

/* het naambordje bij het portret mag ook een maat groter */
.hero__naambord-naam { font-size: 1.625rem; }
.hero__naambord-rol { font-size: 0.9375rem; }

/* knoppen een fractie forser */
.knop { font-size: 1.1875rem; }

@media (max-width: 899px) {
  .hero__kaart {
    align-items: center;
    align-self: center;
    width: 100%;
    max-width: 420px;
    margin-inline: auto;
  }
  .hero__kaart .hero__telrij { justify-content: center; }
}
@media (max-width: 560px) {
  .hero__kaart { padding: 16px 18px 18px; }
  .hero__kaart .hero__tel { font-size: 1.1875rem; }
  .hero__kaart .hero__telrij { flex-direction: column; align-items: center; gap: 10px; }
  .hero__naambord-naam { font-size: 1.3125rem; }
  .hero__naambord-rol { font-size: 0.75rem; }
}

/* ============================================================
   DE TELEFOONLIJN WEER ZICHTBAAR (RQ2)

   In V1 stonden de secties niet gepositioneerd, dus de laag met de
   telefoonlijn (z-index 0 in #hoofd) tekende netjes over de sectievlakken
   heen. In V2 kregen de secties position:relative voor het fond, en daarmee
   verdween de lijn erachter. De secties krijgen daarom expliciet z-index 0
   en de lijn z-index 1, zodat hij weer van het portret tot het stopcontact
   bij de belknop doorloopt.
   ============================================================ */
#hoofd > section { z-index: 0; }
.tel-lijn { z-index: 1; }