/* Kraanstra Bouw — wit, antraciet, signaaloranje; zware hoofdletters, strakke blokken */
:root { --l-donker: #1E2326; --l-accent: #F26B1D; --l-licht: #FCE6D8; --l-vlak: #F4F4F2; --l-lijn: #D9DCDB; --l-tekst: #4A5459; --l-kopfont: "Open Sans", Arial, sans-serif; --l-radius: 0px;
  --bg: #F4F4F2; --wit: #FFFFFF; --antraciet: #1E2326; --staal: #4A5459; --oranje: #F26B1D; --lijn: #D9DCDB;
  --sans: "Open Sans", "Segoe UI", Arial, sans-serif; color-scheme: light; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--antraciet); font-family: var(--sans); line-height: 1.65; font-size: 1.0625rem; }
a { color: inherit; }
h1, h2, h3 { margin: 0; line-height: 1.02; text-transform: uppercase; font-weight: 800; letter-spacing: -.01em; text-wrap: balance; }
p { margin: 0; }
.binnen { max-width: 1180px; margin: 0 auto; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
.label { font-size: .78rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--oranje); }

.kop { background: var(--wit); border-bottom: 4px solid var(--antraciet); }
.kop-in { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-block: 1rem; flex-wrap: wrap; }
.merk { display: flex; align-items: center; gap: .6rem; font-weight: 800; font-size: 1.35rem; letter-spacing: .04em; text-decoration: none; }
.merk b { color: var(--oranje); }
.blok { width: 26px; height: 26px; background: var(--oranje); clip-path: polygon(0 100%, 0 30%, 50% 0, 100% 30%, 100% 100%); }
.kop nav { display: flex; gap: 1.6rem; align-items: center; flex-wrap: wrap; font-weight: 700; font-size: .92rem; text-transform: uppercase; letter-spacing: .05em; }
.kop nav a { text-decoration: none; }
.kop nav a:hover { color: var(--oranje); }
.offerte { background: var(--oranje); color: var(--wit); padding: .6rem 1.1rem; }
.offerte:hover { background: var(--antraciet); color: var(--wit) !important; }

.hero { background:
  repeating-linear-gradient(135deg, transparent 0 22px, rgba(242,107,29,.07) 22px 44px),
  linear-gradient(90deg, var(--wit) 0 58%, var(--antraciet) 58% 100%); }
.hero { position: relative; overflow: hidden; }
.bouwtekening { position: absolute; right: 7%; bottom: 3.5rem; width: min(26%, 320px); height: auto; }
.hero-in { position: relative; padding-block: 5.5rem 6rem; max-width: 1180px; }
.hero h1 { font-size: clamp(2.8rem, 1.5rem + 5.5vw, 6rem); margin: 1rem 0 1.5rem; max-width: 11ch; }
.hero h1 span { color: var(--oranje); }
.intro { max-width: 44ch; color: var(--staal); font-size: 1.15rem; }
.knoppen { display: flex; gap: .8rem; flex-wrap: wrap; margin-top: 2.2rem; }
.knop { display: inline-block; background: var(--oranje); color: var(--wit); text-decoration: none; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; font-size: .9rem; padding: 1rem 1.6rem; }
.knop:hover { background: var(--antraciet); }
.knop-licht { background: var(--antraciet); }
.knop-licht:hover { background: var(--oranje); }

.cijfers { background: var(--antraciet); color: var(--wit); }
.cijfers-in { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cijfers-in div { padding: 2rem 1rem; border-left: 1px solid #39424A; display: grid; gap: .2rem; }
.cijfers-in div:first-child { border-left: 0; padding-left: 0; }
.cijfers strong { font-size: 2.6rem; font-weight: 800; color: var(--oranje); line-height: 1; font-variant-numeric: tabular-nums; }
.cijfers span { color: #B9C1C5; font-size: .9rem; text-transform: uppercase; letter-spacing: .08em; }

.sectie { padding-block: 5.5rem; }
.sectie-kop { display: grid; gap: .8rem; margin-bottom: 3rem; }
.sectie-kop h2 { font-size: clamp(2rem, 1.3rem + 2.6vw, 3.4rem); max-width: 16ch; }
.diensten { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 4px solid var(--antraciet); }
.diensten article { background: var(--wit); padding: 2rem 1.6rem; display: grid; gap: .8rem; align-content: start; border-right: 1px solid var(--lijn); }
.diensten article:last-child { border-right: 0; }
.diensten article:hover { background: var(--antraciet); color: var(--wit); }
.diensten article:hover p { color: #C9D0D3; }
.nr { font-weight: 800; color: var(--oranje); font-size: 1.1rem; }
.diensten h3 { font-size: 1.25rem; }
.diensten p { color: var(--staal); font-size: .95rem; }

.donker { background: var(--antraciet); color: var(--wit); }
.donker h2 { color: var(--wit); }
.projecten { display: grid; grid-template-columns: 1.4fr 1fr; grid-template-rows: auto auto; gap: 1.25rem; }
.projecten figure { margin: 0; display: grid; gap: .8rem; }
.projecten .groot { grid-row: span 2; }
.foto { min-height: 220px; height: 100%; }
.f1 { background: linear-gradient(180deg, transparent 55%, #2A3136 55%), linear-gradient(90deg, #8FA3AD 0 20%, #C7D2D6 20% 22%, #8FA3AD 22% 50%, #C7D2D6 50% 52%, #8FA3AD 52%), linear-gradient(#B9C9D0, #E4ECEE); background-blend-mode: normal; min-height: 460px; }
.f2 { background: repeating-linear-gradient(90deg, #5C6B73 0 30px, #3D484E 30px 34px), #5C6B73; }
.f3 { background: linear-gradient(135deg, #F26B1D 0 30%, #D9DCDB 30% 100%); }
.projecten figcaption { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.projecten figcaption strong { text-transform: uppercase; letter-spacing: .04em; }
.projecten figcaption span { color: #B9C1C5; font-size: .9rem; }

.over { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; align-items: start; }
.over h2 { font-size: clamp(1.8rem, 1.2rem + 2.2vw, 3rem); margin-top: .8rem; }
.over-tekst { display: grid; gap: 1.4rem; color: var(--staal); }
.over-tekst ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.over-tekst li { padding-left: 1.6rem; position: relative; color: var(--antraciet); font-weight: 700; }
.over-tekst li::before { content: ""; position: absolute; left: 0; top: .55em; width: 12px; height: 12px; background: var(--oranje); }

.contact { background: var(--oranje); color: var(--wit); }
.contact-in { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 3rem; padding-block: 5rem; align-items: center; }
.contact .label { color: var(--antraciet); }
.contact h2 { font-size: clamp(2rem, 1.3rem + 2.6vw, 3.4rem); margin: .8rem 0 1rem; }
.gegevens { background: var(--wit); color: var(--antraciet); padding: 2rem; display: grid; gap: 1rem; }
.gegevens strong { display: block; text-transform: uppercase; font-size: .78rem; letter-spacing: .12em; color: var(--staal); }
.gegevens .knop { justify-self: start; }

.voet { background: var(--antraciet); color: #B9C1C5; font-size: .88rem; }
.voet-in { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-block: 1.6rem; }
.voet span:first-child { color: var(--wit); font-weight: 800; letter-spacing: .04em; }
.voet b { color: var(--oranje); }

@media (max-width: 900px) {
  .bouwtekening { display: none; }
  .hero { background: repeating-linear-gradient(135deg, transparent 0 22px, rgba(242,107,29,.07) 22px 44px), var(--wit); }
  .diensten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .diensten article:nth-child(2) { border-right: 0; }
  .cijfers-in { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cijfers-in div:nth-child(3) { border-left: 0; padding-left: 0; }
  .projecten { grid-template-columns: 1fr; }
  .projecten .groot { grid-row: auto; }
  .f1 { min-height: 280px; }
  .over, .contact-in { grid-template-columns: 1fr; }
}
@media (max-width: 520px) { .diensten { grid-template-columns: 1fr; } .diensten article { border-right: 0; border-bottom: 1px solid var(--lijn); } }
.hero-foto { position: absolute; right: 5%; top: 50%; transform: translateY(-50%); width: min(40%, 560px); aspect-ratio: 4 / 3; box-shadow: 14px 14px 0 var(--oranje); }
.hero-foto img, .f1 img { display: block; width: 100%; height: 100%; object-fit: cover; }
.f1 { background: none; }
@media (max-width: 900px) { .hero { display: flex; flex-direction: column; } .hero-foto { position: static; transform: none; width: auto; margin: 0 1.6rem 3rem 1.25rem; display: block; order: 2; } .hero-in { padding-bottom: 2.5rem; } }

/* ---------- Levendig ---------- */
.hero-foto .slides { width: 100%; height: 100%; }
.hero-foto .slide-label { top: -1rem; left: -1rem; transform: rotate(-4deg); text-transform: uppercase; letter-spacing: .06em; font-size: .8rem; border-radius: 0; }
.hero-in { display: grid; gap: .2rem; justify-items: start; }
.hero .nu-open { margin-bottom: .6rem; border-radius: 0; }
.ticker { background: var(--oranje); color: var(--wit); font-weight: 800; text-transform: uppercase; letter-spacing: .06em; font-size: .9rem; }
.ticker span::after { background: var(--antraciet); }
.diensten article { transition: background .25s ease, color .25s ease, transform .25s ease; }
.diensten article:hover { transform: translateY(-6px); }
.calc-sectie { background: var(--wit); }
.calc-in { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 3rem; align-items: start; }
.calc-intro { display: grid; gap: 1rem; }
.calc-intro h2 { font-size: clamp(2rem, 1.3rem + 2.6vw, 3.2rem); }
.calc-intro p:not(.label) { color: var(--staal); }
.calc { border-top: 6px solid var(--oranje); box-shadow: 0 30px 60px -30px rgba(30,35,38,.45); }
.calc .chip span { border-radius: 0; text-transform: uppercase; letter-spacing: .04em; font-size: .82rem; }
.schuif-rij { display: flex; align-items: center; gap: 1rem; }
.schuif-rij input { flex: 1; accent-color: var(--oranje); height: 6px; }
.schuif-rij output { min-width: 4.5rem; font-weight: 800; font-size: 1.2rem; text-align: right; }
.uitkomst { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .8fr); gap: 1rem; background: var(--antraciet); color: var(--wit); padding: 1.25rem 1.4rem; }
.uitkomst .label-klein { color: #B9C1C5; margin-bottom: .3rem; }
.uitkomst strong { font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem); font-weight: 800; color: var(--oranje); font-variant-numeric: tabular-nums; display: block; }
.uitkomst strong.klein { color: var(--wit); }
.uitkomst strong.flits { animation: flits .5s ease; }
@keyframes flits { from { opacity: .3; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.klein-tekst { font-size: .82rem; color: var(--staal); }
.calc .knop { justify-self: start; }
.filter-knoppen { display: flex; gap: .5rem; flex-wrap: wrap; margin: -1.5rem 0 2rem; }
.filter-knoppen button { background: transparent; color: var(--wit); border: 2px solid #4A5459; padding: .55rem 1.1rem; font: 800 .82rem var(--sans); text-transform: uppercase; letter-spacing: .06em; cursor: pointer; transition: all .2s ease; }
.filter-knoppen button[aria-pressed="true"], .filter-knoppen button:hover { background: var(--oranje); border-color: var(--oranje); }
.projecten { grid-template-columns: 1.4fr 1fr 1fr; }
.projecten figure { transition: opacity .35s ease, transform .35s ease; }
.projecten figure.weg { opacity: .12; transform: scale(.97); }
.projecten figure .foto { overflow: hidden; }
.f4 img { display: block; width: 100%; height: 100%; object-fit: cover; }
.projecten figure img { transition: transform .6s ease; }
.projecten figure:hover img { transform: scale(1.05); }
.faq-sectie { padding-top: 0; }
.vragen details { border-radius: 0; }
.voet-in { padding-bottom: 5rem; }
@media (max-width: 900px) {
  .calc-in { grid-template-columns: 1fr; }
  .projecten { grid-template-columns: 1fr 1fr; }
  .projecten .groot { grid-column: span 2; }
  .uitkomst { grid-template-columns: 1fr; }
}
@media (max-width: 520px) { .projecten { grid-template-columns: 1fr; } .projecten .groot { grid-column: auto; } }
.cijfers strong span { font-size: inherit; color: inherit; letter-spacing: 0; text-transform: none; }
.projecten figure:last-child:not(.groot) { grid-column: span 2; }
@media (max-width: 900px) { .projecten figure:last-child:not(.groot) { grid-column: auto; } }
@media (max-width: 900px) { .hero-foto .slide-label { top: .8rem; left: .8rem; } }