/* Bouwbedrijf Lindekamp, voorbeeldsite van joepa (dit bouwbedrijf bestaat
   niet). Eigen stijl, los van de joepa-kleuren en van de andere
   voorbeeldsites.
   Letters: Zilla Slab 700 (koppen en logo, stevig als een bouwbord) en
   Source Sans 3 (tekst, variabel van 400 tot 700), zelf gehost onder de SIL
   Open Font License (zie fonts/).
   Kleuren uit het vak: zandsteen en beton als vlakken, bouwblauw (de kleur van
   een bouwtekening) voor tekst en voet, baksteen voor knoppen en accenten,
   steigerhout voor maatlijnen op donker.
   Vormtaal: de maatlijn van een bouwtekening, een dunne lijn met een streepje
   aan beide uiteinden.
   Contrast (WCAG AA): bouwblauw #1c2a35 op zandsteen #efece6 12,4:1, op beton
   #e2dfd8 11,0:1; bouwblauw-zacht #4b5965 op zandsteen 6,1:1, op beton 5,4:1;
   wit op baksteen #a2462c 6,1:1, op baksteen-diep #86381f 8,1:1; baksteen op
   zandsteen 5,2:1, op beton 4,6:1; zandsteen op bouwblauw 12,4:1; steigerhout
   #cdb89c op bouwblauw 7,6:1. */
@font-face { font-family: "Zilla Slab"; src: url("fonts/zilla-slab-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url("fonts/source-sans-3.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }

:root {
  --zandsteen: #efece6;
  --beton: #e2dfd8;
  --bouwblauw: #1c2a35;
  --bouwblauw-zacht: #4b5965;
  --baksteen: #a2462c;
  --baksteen-diep: #86381f;
  --steigerhout: #cdb89c;
  --wit: #ffffff;
  --lijn: rgba(28, 42, 53, 0.18);
  --lijn-licht: rgba(239, 236, 230, 0.22);
  --kop: "Zilla Slab", Rockwell, "Roboto Slab", Georgia, serif;
  --tekst: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
  --maat: 1160px;
  --rand: 1.25rem;
  --rond: 4px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--tekst); font-size: 1.0625rem; line-height: 1.6; color: var(--bouwblauw); background: var(--zandsteen); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { font-family: var(--kop); font-weight: 700; line-height: 1.08; margin: 0 0 0.5em; text-wrap: balance; }
h1 { font-size: clamp(2.1rem, 1.5rem + 2.3vw, 3.2rem); letter-spacing: -0.01em; }
h2 { font-size: clamp(1.6rem, 1.25rem + 1.2vw, 2.2rem); }
h3 { font-size: 1.3rem; }
p { margin: 0 0 1em; }
a { color: var(--bouwblauw); text-decoration-color: var(--baksteen); text-underline-offset: 0.18em; text-decoration-thickness: 2px; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--bouwblauw); outline-offset: 3px; }
.voorbeeldbalk :focus-visible, .site-voet :focus-visible, .blok--donker :focus-visible { outline-color: var(--steigerhout); }
/* De skiplink valt bij focus over de donkere voorbeeldbalk: daarom een licht
   vlak met een donkere ring binnen dat vlak, anders liepen de teksten in
   elkaar over en was de ring onzichtbaar. Laag genoeg om ook op desktop, waar
   de balk één regel hoog is, binnen de balk te blijven. */
.skiplink { position: absolute; left: -999px; top: 0; z-index: 100; background: var(--zandsteen); color: var(--bouwblauw); font-weight: 700; padding: 0.3rem 0.9rem; border-radius: var(--rond); }
.skiplink:focus { left: 1rem; top: 0.2rem; }
.skiplink:focus-visible { outline: 2px solid var(--bouwblauw); outline-offset: -5px; }

/* De maatlijn: een lijn met een streepje aan beide uiteinden, zoals op een
   bouwtekening. Als los element (.maatlijn) of onder een kop. */
.maatlijn { position: relative; height: 12px; margin: 0; border: 0; }
.maatlijn::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1.5px solid currentColor; }
.maatlijn::after { content: ""; position: absolute; inset: 0; border-left: 1.5px solid currentColor; border-right: 1.5px solid currentColor; }

/* De voorbeeldbalk staat op elke pagina bovenaan. */
.voorbeeldbalk { background: var(--bouwblauw); color: var(--zandsteen); font-size: 0.9rem; text-align: center; padding: 0.5rem 1rem; }
.voorbeeldbalk p { margin: 0; }
.voorbeeldbalk a { color: var(--zandsteen); font-weight: 600; text-decoration-color: var(--steigerhout); }

/* Kop met menu en de afspraakknop, plakt bovenaan. */
.site-kop { position: sticky; top: 0; z-index: 20; background: var(--zandsteen); border-bottom: 1px solid var(--lijn); }
.site-kop__inner { max-width: calc(var(--maat) + 2 * var(--rand)); margin: 0 auto; padding: 0.7rem var(--rand); display: flex; align-items: center; gap: 1.75rem; }
.site-kop__logo { display: flex; flex-direction: column; text-decoration: none; color: var(--bouwblauw); line-height: 1; }
.site-kop__naam { font-family: var(--kop); font-size: 1.7rem; font-weight: 700; letter-spacing: -0.01em; }
.site-kop__sub { display: flex; align-items: center; gap: 0.45rem; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--bouwblauw-zacht); margin-top: 0.3rem; }
.site-kop__sub::after { content: ""; flex: 1; min-width: 1.5rem; height: 7px; border-left: 1.5px solid var(--baksteen); border-right: 1.5px solid var(--baksteen); background: linear-gradient(var(--baksteen), var(--baksteen)) center / 100% 1.5px no-repeat; }
.site-nav { display: flex; gap: 1.5rem; margin-left: auto; }
.site-nav a { color: var(--bouwblauw); text-decoration: none; font-weight: 600; padding: 0.3rem 0; border-bottom: 2px solid transparent; white-space: nowrap; }
.site-nav a:hover, .site-nav a[aria-current="page"] { border-bottom-color: var(--baksteen); }
.site-kop__menu { display: none; }
section[id], [id].fase { scroll-margin-top: 6rem; }

/* Knoppen: vol is baksteen met wit (6,1:1), lijn is bouwblauw op de grond. */
.knop { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; font: inherit; font-weight: 700; padding: 0.8rem 1.35rem; border-radius: var(--rond); border: 2px solid transparent; cursor: pointer; text-decoration: none; line-height: 1.2; transition: background-color 0.15s ease, transform 0.1s ease; }
.knop--vol { background: var(--baksteen); color: var(--wit); border-color: var(--baksteen); }
.knop--vol:hover { background: var(--baksteen-diep); border-color: var(--baksteen-diep); }
.knop--lijn { background: transparent; color: var(--bouwblauw); border-color: var(--bouwblauw); }
.knop--lijn:hover { background: var(--beton); }
.knop--licht { background: transparent; color: var(--zandsteen); border-color: var(--zandsteen); }
.knop--licht:hover { background: rgba(239, 236, 230, 0.12); }
.knop:active { transform: translateY(1px); }
.tekstknop { font: inherit; background: none; border: 0; padding: 0; color: inherit; text-decoration: underline; text-decoration-color: var(--steigerhout); text-decoration-thickness: 2px; text-underline-offset: 0.18em; cursor: pointer; }
.tekstlink { font-weight: 700; white-space: nowrap; }

/* Blokken */
.blok { padding: clamp(2.75rem, 6vw, 5rem) var(--rand); }
.blok__inner { max-width: var(--maat); margin: 0 auto; }
.blok--beton { background: var(--beton); }
.blok--donker { background: var(--bouwblauw); color: var(--zandsteen); }
.blok p { max-width: 62ch; }
.blok .fasen__maat-tekst { max-width: none; }
.blok__kop { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem 1.5rem; flex-wrap: wrap; margin-bottom: 1.75rem; }
.blok__kop h2 { margin: 0; }
/* Een zin onder de kop staat op een eigen regel, ook naast een link. */
.blok__kop p { margin: 0.4rem 0 0; flex-basis: 100%; max-width: none; }

/* Twee kolommen */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: clamp(1.75rem, 5vw, 5rem); align-items: start; }
.split--midden { align-items: center; }
.split--gelijk { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.split img { border-radius: var(--rond); aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }

/* Kop van de pagina: tekst links, foto rechts. */
.hero { padding: clamp(1.75rem, 4vw, 3.25rem) var(--rand) clamp(2.5rem, 5vw, 4rem); }
.hero__inner { max-width: var(--maat); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(2rem, 4.5vw, 4.5rem); align-items: center; }
.hero__tekst p { max-width: 46ch; font-size: 1.2rem; }
.hero__knoppen { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.6rem; }
.hero__beeld img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--rond); }

/* Van fundering tot oplevering: vijf foto's van één project op een rij,
   verbonden door een maatlijn. */
.fasen { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.9rem; position: relative; }
.fasen__item { margin: 0; }
.fasen__item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--rond); }
.fasen__label { display: block; font-family: var(--kop); font-weight: 700; font-size: 1.05rem; line-height: 1.2; margin-top: 0.75rem; }
.fasen__week { display: block; font-size: 0.9rem; color: var(--bouwblauw-zacht); }
.fasen__maat { color: var(--baksteen); margin: 0.9rem 0 0; }
.fasen__maat-tekst { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.9rem; font-weight: 600; color: var(--bouwblauw-zacht); margin-top: 0.35rem; }

/* Wat we bouwen: drie rijen met haarlijnen, geen kaartjes. */
.diensten { list-style: none; margin: 0; padding: 0; }
.diensten li { padding: 1.25rem 0; border-top: 1px solid var(--lijn); }
.diensten li:last-child { border-bottom: 1px solid var(--lijn); }
.diensten h3 { margin: 0 0 0.35rem; }
.diensten h3 a { text-decoration: none; display: inline-flex; align-items: baseline; gap: 0.5rem; }
.diensten h3 a::after { content: "\2192"; content: "\2192" / ""; font-family: var(--tekst); }
.diensten p { margin: 0; color: var(--bouwblauw-zacht); }
.split__beeld { display: block; margin-top: 1.75rem; }

/* Werkwijze: zes genummerde stappen, in drie kolommen (twee onder 1100px, een onder 760px). */
.stappen { list-style: none; counter-reset: stap; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.75rem 2rem; }
.stappen li { counter-increment: stap; display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); gap: 0.75rem; align-items: start; }
.stappen li::before { content: counter(stap, decimal-leading-zero); font-family: var(--kop); font-weight: 700; font-size: 1.5rem; line-height: 1; color: var(--baksteen); padding-top: 0.15rem; }
.stappen strong { display: block; font-family: var(--kop); font-size: 1.15rem; line-height: 1.2; margin-bottom: 0.25rem; }
.stappen p { margin: 0; }

/* Recent in de buurt: plaats en klus als tekst. */
/* Eén kolom tot 1100: in twee smalle kolommen brak Sint-Michielsgestel af. */
.buurt { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 2rem; }
@media (min-width: 1100px) { .buurt { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.buurt li { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 0.25rem 1rem; padding: 0.8rem 0; border-top: 1px solid var(--lijn); }
.buurt__plaats { font-weight: 700; white-space: nowrap; }
.buurt__klus { color: var(--bouwblauw-zacht); }

/* Rijen met uitleg (verbouwen) en feiten */
.rijen { list-style: none; margin: 0; padding: 0; }
.rijen li { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.6fr); gap: 0.5rem 2.5rem; padding: 1.5rem 0; border-top: 1px solid var(--lijn); }
.rijen li:last-child { border-bottom: 1px solid var(--lijn); }
.rijen h3 { margin: 0; }
.rijen p { margin: 0; }
.feiten { margin: 0; }
.feiten div { display: grid; grid-template-columns: minmax(8rem, 0.6fr) minmax(0, 1.4fr); gap: 0.25rem 1.5rem; padding: 0.9rem 0; border-top: 1px solid var(--lijn); }
.feiten div:last-child { border-bottom: 1px solid var(--lijn); }
.feiten dt { font-weight: 700; }
.feiten dd { margin: 0; }

/* Vragen */
.vragen details { border-top: 1px solid var(--lijn); }
.vragen details:last-child { border-bottom: 1px solid var(--lijn); }
.vragen summary { cursor: pointer; font-weight: 700; font-size: 1.1rem; padding: 1rem 2rem 1rem 0; position: relative; list-style: none; }
.vragen summary::-webkit-details-marker { display: none; }
.vragen summary::after { content: "+"; content: "+" / ""; position: absolute; right: 0.25rem; top: 0.8rem; font-size: 1.4rem; line-height: 1; color: var(--baksteen); }
.vragen details[open] summary::after { content: "\2212"; content: "\2212" / ""; }
.vragen details p { margin: 0 0 1.1rem; max-width: 62ch; }

/* Project van begin tot eind: elke fase een rij met foto en tekst, langs een
   verticale maatlijn. */
.tijdlijn { list-style: none; margin: 0; padding: 0; position: relative; }
.fase { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.25rem clamp(1.75rem, 4vw, 3.5rem); align-items: center; padding: 1.5rem 0 1.5rem 2rem; position: relative; }
.fase::before { content: ""; position: absolute; left: 0.45rem; top: 0; bottom: 0; border-left: 1.5px solid var(--baksteen); }
.fase::after { content: ""; position: absolute; left: 0; top: 2.1rem; width: 0.95rem; border-top: 1.5px solid var(--baksteen); }
.fase:first-child::before { top: 2.1rem; }
.fase:last-child::before { bottom: auto; height: 2.1rem; }
.fase img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--rond); }
.fase__label { display: inline-block; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--wit); background: var(--baksteen); border-radius: var(--rond); padding: 0.25rem 0.55rem; margin-bottom: 0.6rem; }
/* In de bron staat de kop voor het weeklabel, zodat wie per kop door de pagina
   springt de week meteen erna hoort; in beeld staat het label erboven. */
.fase__tekst { display: flex; flex-direction: column; align-items: flex-start; }
.fase__tekst .fase__label { order: -1; }
.fase h3 { margin-bottom: 0.4rem; }
.fase p { margin: 0; }

/* Afsluitend blok met knoppen */
.actie { display: flex; align-items: center; justify-content: space-between; gap: 1rem 2rem; flex-wrap: wrap; }
.actie h2 { margin-bottom: 0.25rem; }
.actie p { margin: 0; color: var(--beton); }
.actie__knoppen { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* Voet */
.site-voet { background: var(--bouwblauw); color: var(--zandsteen); padding: clamp(2.25rem, 5vw, 3.5rem) var(--rand); border-top: 1px solid var(--lijn-licht); }
.site-voet__inner { max-width: var(--maat); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.5rem 2rem; align-items: end; }
:where(.site-voet) p { margin: 0; }
.site-voet__naam { font-family: var(--kop); font-size: 1.45rem; font-weight: 700; margin-bottom: 0.25rem; }
.site-voet a { color: var(--zandsteen); text-decoration-color: var(--steigerhout); }
.site-voet__joepa { grid-column: 1 / -1; margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--lijn-licht); font-size: 0.9rem; color: var(--beton); }

/* De melding achter afspraak, bellen en mailen. */
.melding { border: 0; border-radius: var(--rond); padding: 1.75rem; max-width: 27rem; width: calc(100% - 2rem); color: var(--bouwblauw); background: var(--zandsteen); box-shadow: 0 20px 60px rgba(28, 42, 53, 0.3); border-top: 4px solid var(--baksteen); }
.melding::backdrop { background: rgba(28, 42, 53, 0.5); }
.melding__kop { font-family: var(--kop); font-size: 1.35rem; font-weight: 700; margin-bottom: 0.5rem; }
.melding__sluit { margin-top: 0.5rem; }

/* Onder 1100: de werkwijze in twee kolommen. */
@media (max-width: 1099px) {
  .stappen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Van 760 tot 1100 blijven de fasen één strook naast elkaar, een tijdlijn met
   de maatlijn eronder; de naam iets kleiner, zodat "Dak en kozijnen" op één
   regel blijft. */
@media (min-width: 760px) and (max-width: 1099px) {
  .fasen__label { font-size: 0.95rem; }
}

/* Van 560 tot 760: de fasen in twee rijen (drie en twee), zodat de foto's groot
   genoeg blijven om het verschil te zien. */
@media (min-width: 560px) and (max-width: 759px) {
  .fasen { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .fasen__item { grid-column: span 2; }
  .fasen__item:nth-child(4) { grid-column: 2 / span 2; }
  .fasen__item:nth-child(5) { grid-column: 4 / span 2; }
}

/* Onder 960: de kop naast de foto past niet meer (alles onder elkaar), het
   menu met de afspraakknop ook niet (menu achter een knop, onderin altijd
   Afspraak en Bel). */
.onderbalk { display: none; }
@media (max-width: 959px) {
  .hero__inner { grid-template-columns: minmax(0, 1fr); }
  .hero__beeld { grid-row: 1; margin: 0 calc(-1 * var(--rand)); }
  /* Hooguit iets minder dan de helft van het scherm, zodat kop en knop op een
     staande tablet boven de vouw blijven. Op lage schermen valt de knop soms
     achter de onderbalk; daar staat dan onderin in elk geval Afspraak. */
  .hero__beeld img { border-radius: 0; aspect-ratio: 16 / 9; max-height: 45svh; }
  .hero { padding-top: 0; }
  .fase { grid-template-columns: minmax(0, 1fr); }
  /* Ruimte voor de onderbalk, die op een iPhone met thuisbalk hoger wordt. */
  body { padding-bottom: calc(4.6rem + env(safe-area-inset-bottom)); }
  .onderbalk { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; padding: 0.6rem 0.8rem calc(0.6rem + env(safe-area-inset-bottom)); background: var(--zandsteen); border-top: 1px solid var(--lijn); box-shadow: 0 -6px 18px rgba(28, 42, 53, 0.08); }
  .site-kop__afspraak { display: none; }
  .site-kop__menu { display: inline-block; margin-left: auto; font: inherit; font-weight: 700; color: var(--bouwblauw); background: none; border: 2px solid var(--bouwblauw); border-radius: var(--rond); padding: 0.45rem 0.9rem; cursor: pointer; }
  .site-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; gap: 0; background: var(--zandsteen); padding: 0.25rem var(--rand) 1rem; border-bottom: 1px solid var(--lijn); }
  .site-kop--open .site-nav { display: flex; }
  .site-nav a { padding: 0.75rem 0; border-bottom: 1px solid var(--lijn); font-weight: 500; }
  /* De huidige pagina niet alleen in kleur, ook vet (WCAG 1.4.1). */
  .site-nav a[aria-current="page"] { border-bottom-color: var(--lijn); color: var(--baksteen-diep); font-weight: 700; }
}

@media (max-width: 759px) {
  .split, .split--gelijk, .rijen li { grid-template-columns: minmax(0, 1fr); }
  .rijen li { gap: 0.4rem; padding: 1.25rem 0; }
  .stappen { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
  .feiten div { grid-template-columns: minmax(0, 1fr); }
  .site-voet__inner { grid-template-columns: minmax(0, 1fr); }
}

/* Smalle telefoons: de fasen als lijst onder elkaar, met een kleine foto naast
   naam en week. Zo staat de hele reeks, tot en met Opgeleverd, compact in
   beeld; de grote foto's staan op Projecten. De maatlijn vervalt, want die
   loopt hier nergens langs. De plaats en de klus onder elkaar. */
@media (max-width: 559px) {
  .fasen { grid-template-columns: minmax(0, 1fr); gap: 0.75rem; }
  .fasen__item { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); column-gap: 1rem; align-items: center; }
  .fasen__item picture { grid-row: 1 / span 2; }
  .fasen__label { margin-top: 0; align-self: end; }
  .fasen__week { align-self: start; }
  .fasen__maat, .fasen__maat-tekst { display: none; }
  .buurt li { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .fase { padding-left: 1.6rem; }
}

/* Heel smalle telefoons: de voorbeeldbalk blijft op twee regels. */
@media (max-width: 359px) {
  .voorbeeldbalk { font-size: 0.8rem; padding-inline: 0.75rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.001ms !important; animation-duration: 0.001ms !important; }
}