/* Makelaardij Trasraam, voorbeeldsite bij de joepa-branchepagina voor makelaars.

   Ontwerp-lezing: een controleerbare, rustige site voor het duurste besluit dat
   iemand neemt. Vertrouwen komt hier niet uit sfeer maar uit narekenbaarheid:
   elk bedrag staat er, elk register is op te zoeken, en wat niet te bewijzen is
   staat er niet. Lage variance.

   Vormtaal: de kenmerkenstrook. Een band met maatstreepjes erboven en per vak
   een label en een waarde, zoals een makelaar zijn kenmerken opschrijft. Hij
   komt terug bij de woningen en bij de tarieven, en nergens anders.

   Kleuren zijn gemeten tegen WCAG AA (verhoudingen als commentaar):
     inkt op grond            14,5 : 1
     inkt-zacht op grond       6,1 : 1
     inkt-zacht op vlak        5,3 : 1
     trasraam op grond         9,46 : 1
     trasraam op vlak          8,28 : 1
     wit op trasraam          10,31 : 1
     kalk op nacht            11,1 : 1
   De energielabelkleuren zijn de officiele labelkleuren, donkerder gezet zodat
   witte letters erop minimaal 5 : 1 halen. */

:root {
  --grond: #f7f5f1;
  --vlak: #eae6de;
  --wit: #ffffff;
  --inkt: #1e2328;
  --inkt-zacht: #555c63;
  --nacht: #1a2027;
  --trasraam: #2f4257;
  --trasraam-diep: #223242;
  --kalk: #cbd7e2;
  --lijn: #ddd7cc;
  --lijn-nacht: rgba(203, 215, 226, 0.22);
  --maat: 1.0625rem;
  --breed: 72rem;
  --smal: 36rem;
  --kop: "Spectral", Georgia, "Times New Roman", serif;
  --tekst: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
}

@font-face {
  font-family: "Spectral";
  src: url("fonts/spectral.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Figtree";
  src: url("fonts/figtree.woff2") format("woff2");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}

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

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

body {
  margin: 0;
  background: var(--grond);
  color: var(--inkt);
  font-family: var(--tekst);
  font-size: var(--maat);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--kop);
  font-weight: 600;
  line-height: 1.15;
  text-wrap: balance;
  margin: 0 0 0.6em;
  letter-spacing: -0.005em;
}
h1 { font-size: clamp(2rem, 1.35rem + 2.7vw, 3.1rem); }
h2 { font-size: clamp(1.5rem, 1.2rem + 1.25vw, 2.05rem); }
h3 { font-size: clamp(1.1rem, 1.02rem + 0.35vw, 1.28rem); }

/* Vaktermen als Vastgoedprofessionals passen bij een grote browserletter op
   een smal scherm niet meer op een regel; laat ze dan afbreken. */
p, li, dd, h1, h2, h3, .rijen__wat, .week__naam { overflow-wrap: break-word; }

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

a { color: var(--trasraam); text-underline-offset: 0.18em; }
a:hover { color: var(--trasraam-diep); }

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

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

.skiplink {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 60;
  background: var(--trasraam);
  color: var(--wit);
  padding: 0.7rem 1.1rem;
  font-weight: 600;
}
.skiplink:focus { left: 0; }
.skiplink:focus-visible { outline-color: var(--grond); outline-offset: -3px; }

/* De balk die zegt dat dit een voorbeeld is. Staat bovenaan, buiten het
   ontwerp van de site zelf, zodat niemand denkt dat dit kantoor bestaat. */
.voorbeeldbalk {
  background: var(--nacht);
  color: var(--kalk);
  font-size: 0.82rem;
  line-height: 1.45;
  padding: 0.55rem 1.25rem;
}
.voorbeeldbalk p { margin: 0; max-width: none; }
.voorbeeldbalk strong { color: var(--wit); }
.voorbeeldbalk a { color: var(--kalk); }
.voorbeeldbalk a:hover { color: var(--wit); }
.voorbeeldbalk :focus-visible { outline-color: var(--kalk); }

/* Kop van de site */
.site-kop {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--grond);
  border-bottom: 1px solid var(--lijn);
}
.site-kop__inner {
  max-width: var(--breed);
  margin: 0 auto;
  padding: 0.7rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.site-kop__logo {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--inkt);
  text-decoration: none;
  min-height: 2.75rem;
  margin-right: auto;
  /* Mag krimpen: bij een grote browserletter op een smal scherm wikkelt de
     ondertitel dan af in plaats van de kop buiten het scherm te duwen. */
  min-width: 0;
}
.site-kop__logo svg { width: 2rem; height: 2rem; flex: none; color: var(--trasraam); }
.site-kop__woord { display: flex; flex-direction: column; line-height: 1.12; min-width: 0; }
.site-kop__naam {
  font-family: var(--kop);
  font-size: 1.16rem;
  letter-spacing: 0.005em;
}
.site-kop__sub {
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--inkt-zacht);
}
.site-kop__menu {
  display: none;
  font: inherit;
  font-weight: 600;
  background: none;
  border: 1px solid var(--lijn);
  color: var(--inkt);
  border-radius: 3px;
  padding: 0.5rem 0.85rem;
  min-height: 2.75rem;
  cursor: pointer;
}
.site-nav { display: flex; gap: 1.35rem; }
.site-nav a {
  color: var(--inkt);
  text-decoration: none;
  font-weight: 500;
  padding: 0.35rem 0;
  border-bottom: 2px solid transparent;
}
.site-nav a:hover { border-bottom-color: var(--lijn); }
.site-nav a[aria-current="page"] { border-bottom-color: var(--trasraam); }

/* Het menu klapt om waar de navigatie tegen de knop aanloopt. Gemeten op de
   langste regel: Verkopen, Aanbod, Bieden, Tarieven plus de knop Afspraak. */
@media (max-width: 55.9375em) {
  .site-kop__menu { display: block; order: 3; }
  /* Met .site-kop ervoor, want .knop staat verderop in deze stylesheet en zou
     anders met dezelfde specificiteit maar later in de bron winnen. */
  .site-kop .site-kop__afspraak { display: none; }
  .site-nav {
    display: none;
    order: 4;
    flex-basis: 100%;
    flex-direction: column;
    gap: 0;
    border-top: 1px solid var(--lijn);
    margin-top: 0.6rem;
    padding-top: 0.3rem;
  }
  .site-kop--open .site-nav { display: flex; }
  .site-nav a { padding: 0.75rem 0; border-bottom: 1px solid var(--lijn); }
  .site-nav a:last-child { border-bottom: none; }
  .site-nav a[aria-current="page"] { color: var(--trasraam); font-weight: 700; }
}

/* Zet een bezoeker zijn browserletter groot, dan wordt het scherm in em
   gerekend smal: 17em is ongeveer 320 px bij een letter van 24 px, en 272 px
   bij de standaardletter van 16 px. Daar past de ondertitel naast de knop
   Menu niet meer, en schuift de naam eronder. */
@media (max-width: 17em) {
  .site-kop__inner { padding-left: 0.75rem; padding-right: 0.75rem; gap: 0.6rem; }
  .site-kop__logo svg { width: 1.5rem; height: 1.5rem; }
  .site-kop__naam { font-size: 1rem; }
  .site-kop__sub { display: none; }
}

/* Knoppen */
.knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font: inherit;
  font-weight: 600;
  border-radius: 3px;
  padding: 0.7rem 1.35rem;
  min-height: 2.75rem;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.14s ease, border-color 0.14s ease;
}
.knop--vol { background: var(--trasraam); color: var(--wit); }
.knop--vol:hover { background: var(--trasraam-diep); color: var(--wit); }
.knop--vol:active { transform: translateY(1px); }
.knop--lijn { background: transparent; color: var(--trasraam); border-color: var(--trasraam); }
.knop--lijn:hover { background: var(--vlak); color: var(--trasraam-diep); }
.knop--lijn:active { transform: translateY(1px); }

.tekstlink {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  font-weight: 600;
  color: var(--trasraam);
}
.tekstknop {
  font: inherit;
  font-weight: 600;
  color: var(--trasraam);
  background: none;
  border: none;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 0.18em;
  cursor: pointer;
}
.tekstknop:hover { color: var(--trasraam-diep); }

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
  .knop:active { transform: none; }
}

/* Blokken */
.blok { padding: clamp(2.5rem, 1.6rem + 3.6vw, 4.25rem) 1.25rem; }
.blok__inner { max-width: var(--breed); margin: 0 auto; }
.blok--vlak { background: var(--vlak); }
.blok + .blok:not(.blok--vlak) { border-top: 1px solid var(--lijn); }
.blok--vlak + .blok--vlak { border-top: 1px solid var(--lijn); }

/* Hero */
.hero { padding: clamp(1.75rem, 1rem + 3vw, 3.5rem) 1.25rem clamp(2.25rem, 1.4rem + 3vw, 3.75rem); }
.hero__inner {
  max-width: var(--breed);
  margin: 0 auto;
  display: grid;
  gap: clamp(1.5rem, 1rem + 2.4vw, 3rem);
  align-items: center;
}
@media (min-width: 48em) {
  .hero__inner { grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); }
  }
.hero__kicker {
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--inkt-zacht);
  margin-bottom: 0.9rem;
  font-weight: 600;
}
.hero h1 { margin-bottom: 0.5em; }
.hero__knoppen {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.5rem;
}
.hero__beeld { border-radius: 4px; overflow: hidden; }
.hero__beeld img { width: 100%; }
@media (min-width: 48em) {
  /* Zonder plafond wordt de kop bijna 700 px hoog terwijl de tekst er 300
     van vult. */
  .hero__beeld img { max-height: 30rem; object-fit: cover; object-position: 50% 35%; }
}

/* De kenmerkenstrook: maatstreepjes erboven, per vak een label en een waarde. */
.strook {
  margin: 0;
  display: grid;
  /* Twee gelijke kolommen, vanaf een breed scherm vier. Geen automatisch
     aantal: dan komt er op een grote telefoon een wees op de tweede regel. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 0;
  row-gap: 1rem;
}
.strook__vak {
  min-width: 0;
  padding: 0.7rem 0.9rem 0 0;
  /* De maatstreepjes staan per vak, niet over de hele strook: dan heeft ook
     een tweede regel ze, in plaats van een kale rij eronder. */
  border-top: 1px solid var(--inkt);
  background-image: repeating-linear-gradient(
    to right,
    var(--inkt) 0 1px,
    transparent 1px 100%
  );
  background-size: 0.5rem 0.3rem;
  background-repeat: repeat-x;
  background-position: left top;
}
.strook__vak + .strook__vak { padding-left: 0.9rem; }
.strook__vak:nth-child(odd) { border-left: none; padding-left: 0; }
@media (min-width: 56em) {
  .strook--vier { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .strook--vier .strook__vak:nth-child(odd) { padding-left: 0.9rem; }
  .strook--vier .strook__vak:first-child { padding-left: 0; }
}
.strook dt {
  /* 0,8rem en niet kleiner: deze labels komen als uitsnede op de
     branchepagina terecht, en daar worden ze nog eens verkleind. Geen
     hoofdletters met extra letterafstand: WOONOPPERVLAK is dan breder dan
     een vak en breekt doormidden. */
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  color: var(--inkt-zacht);
  font-weight: 700;
}
.strook dd {
  margin: 0.1rem 0 0;
  font-family: var(--kop);
  font-size: 1.12rem;
  line-height: 1.25;
}
.strook__klein { font-family: var(--tekst); font-size: 0.82rem; color: var(--inkt-zacht); display: block; }

/* Energielabel. De kleuren zijn de officiele labelkleuren, donkerder gezet
   zodat witte letters erop minimaal 5 : 1 halen. */
.label {
  display: inline-block;
  min-width: 1.6rem;
  text-align: center;
  padding: 0.05rem 0.4rem;
  border-radius: 2px;
  /* Een standaardkleur, zodat een E, F of G nooit als witte letter op wit
     eindigt als er een klasse ontbreekt. */
  background: var(--inkt);
  color: var(--wit);
  font-family: var(--tekst);
  font-weight: 800;
  font-size: 0.92rem;
  letter-spacing: 0.02em;
}
.label--a { background: #1f6b3d; }
.label--b { background: #3f7d33; }
.label--c { background: #7d6310; }
.label--d { background: #8f5512; }
.label--e { background: #9a4a12; }
.label--f { background: #a33c16; }
.label--g { background: #a32a20; }

/* Woningen */
.woningen { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.75rem; }
@media (min-width: 52em) { .woningen { grid-template-columns: repeat(3, 1fr); } }
.woning { display: flex; flex-direction: column; }
.woning__beeld { border-radius: 4px; overflow: hidden; margin-bottom: 0.9rem; }
.woning__beeld img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.woning h3 { margin-bottom: 0.15em; }
.woning__plaats { color: var(--inkt-zacht); font-size: 0.92rem; margin-bottom: 0.7rem; }
.woning__prijs {
  font-family: var(--kop);
  font-size: 1.3rem;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.9rem;
}
.woning__kk { font-family: var(--tekst); font-size: 0.8rem; color: var(--inkt-zacht); font-weight: 600; }
.woning__staat {
  align-self: flex-start;
  width: fit-content;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 0.2rem 0.55rem;
  border-radius: 2px;
  background: var(--trasraam);
  color: var(--wit);
  margin-bottom: 0.7rem;
}
.woning__staat--bod { background: var(--inkt-zacht); }
.woning__staat--weg { background: var(--inkt); }
.woning .strook { margin-top: auto; }
.woning--groot { display: grid; gap: clamp(1.25rem, 0.8rem + 2vw, 2.25rem); }
@media (min-width: 52em) {
  .woning--groot { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); align-items: start; }
  .woning--groot .woning__beeld { margin-bottom: 0; }
}
.woning--groot .strook { margin-top: 1.25rem; }
.aanbod-lijst { list-style: none; margin: 0; padding: 0; }
.aanbod-lijst > li + li {
  margin-top: clamp(2rem, 1.4rem + 2.4vw, 3.25rem);
  padding-top: clamp(2rem, 1.4rem + 2.4vw, 3.25rem);
  border-top: 1px solid var(--lijn);
}

/* Rijen met een bedrag rechts: de tarieven op de home en de staffel. */
.rijen { list-style: none; margin: 0; padding: 0; }
.rijen li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 1rem;
  padding: 0.95rem 0;
  border-bottom: 1px solid var(--lijn);
}
.rijen li:first-child { border-top: 1px solid var(--inkt); }
.rijen__wat { flex: 1 1 14rem; min-width: 0; font-weight: 600; }
.rijen__wat span { display: block; font-weight: 400; color: var(--inkt-zacht); font-size: 0.92rem; }
.rijen__bedrag { font-family: var(--kop); font-size: 1.22rem; white-space: nowrap; }

/* Op een smal scherm past de langste omschrijving plus het bedrag niet naast
   elkaar op de standaardbasis; dan zou een van de vier regels afwijken. */
@media (max-width: 34em) {
  .rijen__wat { flex-basis: 9rem; }
  .rijen__bedrag { font-size: 1.12rem; }
}

/* Twee kolommen tekst naast elkaar, met een lijn ertussen. */
.duo { display: grid; gap: clamp(1.5rem, 1rem + 2.4vw, 3rem); align-items: start; }
/* Rastercellen krijgen standaard min-width: auto en worden dan zo breed als
   hun inhoud wil. Bij een grote browserletter op een smal scherm duwt een
   beeld het blok daarmee buiten het scherm. */
.duo > *, .hero__inner > *, .woningen > *, .aanbod-lijst > *, .woning--groot > * { min-width: 0; }
@media (min-width: 48em) {
  .duo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .duo--foto-links .duo__beeld { order: -1; }
  .duo--breed-links { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
}
.duo__beeld { border-radius: 4px; overflow: hidden; }
.duo__beeld img { width: 100%; }

/* Staat er naast een beeld meer tekst dan het beeld hoog is, dan laten we het
   beeld de kolom vullen in plaats van er een gat onder te laten vallen. */
@media (min-width: 48em) {
  .duo--vullend { align-items: stretch; }
  .duo--vullend .duo__beeld { display: block; height: 100%; }
  .duo--vullend .duo__beeld img { height: 100%; object-fit: cover; }
}

.punten { list-style: none; margin: 0 0 1em; padding: 0; }
.punten li { position: relative; padding-left: 1.5rem; margin-bottom: 0.7rem; max-width: 62ch; }
.punten li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 0.65rem;
  height: 3px;
  background: var(--trasraam);
}

.stappen { list-style: none; counter-reset: stap; margin: 0; padding: 0; }
.stappen li {
  counter-increment: stap;
  position: relative;
  padding: 0 0 1.1rem 3rem;
  max-width: 62ch;
}
.stappen li::before {
  content: counter(stap);
  position: absolute;
  left: 0;
  top: 0;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--trasraam);
  border-radius: 50%;
  color: var(--trasraam);
  font-family: var(--kop);
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.stappen strong { display: block; }

/* De vijf stappen van het bieden in twee kolommen, zodat er geen lange
   smalle kolom met een leeg gat ernaast staat. */
.stappen-duo .stappen { column-gap: clamp(1.5rem, 1rem + 2.4vw, 3rem); }
@media (min-width: 48em) {
  .stappen-duo .stappen { columns: 2; }
  .stappen-duo .stappen li { break-inside: avoid; }
}

/* Openingstijden */
.week { list-style: none; margin: 0 0 1rem; padding: 0; max-width: 24rem; }
.week__dag { display: flex; justify-content: space-between; gap: 1rem; padding: 0.45rem 0; border-bottom: 1px solid var(--lijn); }
.week__dag:first-child { border-top: 1px solid var(--lijn); }
.week__naam { font-weight: 600; }

.kader {
  border: 1px solid var(--lijn);
  border-left: 3px solid var(--trasraam);
  background: var(--wit);
  padding: 1.1rem 1.25rem;
  border-radius: 3px;
  margin-top: 1.5rem;
}
.kader p:last-child { margin-bottom: 0; }
.kader h3 { margin-bottom: 0.35em; }

.paginakop { padding: clamp(2rem, 1.3rem + 2.6vw, 3.25rem) 1.25rem clamp(1.5rem, 1rem + 2vw, 2.5rem); }
.paginakop__inner {
  max-width: var(--breed);
  margin: 0 auto;
  display: grid;
  gap: clamp(1.25rem, 0.8rem + 2vw, 2.5rem);
  align-items: center;
}
@media (min-width: 48em) {
  .paginakop__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.paginakop__inner > * { min-width: 0; }
.paginakop p { font-size: 1.08rem; max-width: 56ch; }
.paginakop__beeld { border-radius: 4px; overflow: hidden; }
.paginakop__beeld img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

.fijn { font-size: 0.9rem; color: var(--inkt-zacht); }
.fijn--na-rijen { margin-top: 0.9rem; }
.na-lijst { margin-top: 1.5rem; }
.duo--na-rijen { margin-top: 2rem; }

.verborgen {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Voet */
.site-voet {
  background: var(--vlak);
  border-top: 1px solid var(--lijn);
  padding: 2.25rem 1.25rem calc(2.25rem + env(safe-area-inset-bottom));
  font-size: 0.94rem;
}
.site-voet__inner { max-width: var(--breed); margin: 0 auto; display: grid; gap: 1.25rem; }
@media (min-width: 48em) { .site-voet__inner { grid-template-columns: repeat(3, 1fr); } }
.site-voet__naam { font-family: var(--kop); font-size: 1.1rem; margin-bottom: 0.2em; }
.site-voet p { margin-bottom: 0.4em; }
.site-voet__joepa { color: var(--inkt-zacht); }

/* De vaste balk op de telefoon */
.onderbalk { display: none; }
@media (max-width: 47.9375em) {
  .onderbalk {
    display: flex;
    gap: 0.6rem;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 55;
    padding: 0.6rem 1rem calc(0.6rem + env(safe-area-inset-bottom));
    background: var(--grond);
    border-top: 1px solid var(--lijn);
  }
  .onderbalk .knop { flex: 1; }
  .onderbalk .knop--lijn { background: var(--wit); }
  body { padding-bottom: 4.75rem; }
  .site-voet { padding-bottom: 1.5rem; }
}

/* De melding achter bellen, mailen en een afspraak maken */
.melding {
  border: 1px solid var(--lijn);
  border-radius: 4px;
  padding: 1.5rem;
  max-width: 30rem;
  background: var(--grond);
  color: var(--inkt);
}
.melding::backdrop { background: rgba(26, 32, 39, 0.55); }
.melding__kop { font-family: var(--kop); font-size: 1.2rem; margin-bottom: 0.4em; }
.melding__sluit { margin-top: 1.1rem; }