/* ==========================================================================
   Heesbeen Dakwerken — huisstijl
   Palet: marineblauw #0B1F3A · helderblauw #155EEF · ijsblauw #73C8FF · licht #EAF2FF
   Typografie: Manrope (koppen) · Inter (tekst), lokaal geladen via fonts.css
   ========================================================================== */
/* Lokaal gehoste variabele lettertypen (Google Fonts, latin-subset) */
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 600 800; font-display: swap; src: url('fonts/manrope-var-latin.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('fonts/inter-var-latin.woff2') format('woff2'); }

:root {
  --navy: #0B1F3A;
  --navy-2: #102a4d;
  --blue: #155EEF;
  --blue-h: #1047BD;
  --sky: #EAF2FF;
  --ice: #73C8FF;
  --bg: #F8FAFC;
  --white: #FFFFFF;
  --ink: #172B4D;
  --muted: #526277;
  --line: rgba(23, 43, 77, .1);
  --line-d: rgba(255, 255, 255, .12);
  --shadow-s: 0 1px 2px rgba(11, 31, 58, .05), 0 6px 18px rgba(11, 31, 58, .06);
  --shadow-m: 0 14px 40px rgba(11, 31, 58, .12);
  --shadow-l: 0 30px 80px rgba(11, 31, 58, .22);
  --r-s: 12px;
  --r: 16px;
  --r-l: 20px;
  --maxw: 1280px;
  --gutter: 24px;
  --sec: clamp(56px, 8vw, 120px);
  --ease: cubic-bezier(.22, 1, .36, 1);
  --dur: 550ms;
  --font-h: "Manrope", "Segoe UI", system-ui, sans-serif;
  --font-b: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --hdr-h: 84px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 90px; }
body { font-family: var(--font-b); font-size: 17px; line-height: 1.65; color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, video, svg { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul { list-style: none; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
::selection { background: var(--ice); color: var(--navy); }

h1, h2, h3, h4 { font-family: var(--font-h); color: var(--ink); font-weight: 800; line-height: 1.04; letter-spacing: -.03em; text-wrap: balance; }
h1 { font-size: clamp(2.5rem, 6vw, 5.4rem); }
h2 { font-size: clamp(2rem, 4vw, 3.4rem); }
h3 { font-size: 1.35rem; letter-spacing: -.02em; line-height: 1.2; }
h4 { font-size: 1.05rem; letter-spacing: -.01em; }
p { color: var(--muted); }
p.lead { font-size: 1.2rem; line-height: 1.6; }
strong { color: var(--ink); font-weight: 600; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: var(--sec) 0; }
.section--sky { background: var(--sky); }
.section--white { background: var(--white); }
.section--navy { background: var(--navy); color: #e6eefb; }
.section--navy h2, .section--navy h3, .section--navy h4 { color: #fff; }
.section--navy p { color: rgba(230, 238, 251, .78); }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-h); font-size: .78rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--blue); margin-bottom: 18px; }
.eyebrow::before { content: ""; width: 22px; height: 2px; background: currentColor; border-radius: 2px; }
.section--navy .eyebrow { color: var(--ice); }
.head { max-width: 720px; }
.head.center { margin: 0 auto; text-align: center; }
.head p { margin-top: 18px; font-size: 1.15rem; }
.head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.head-row p { max-width: 440px; margin-top: 0; }

/* ---------- Knoppen en links ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 13px 24px; border-radius: 999px; font-family: var(--font-h); font-weight: 700; font-size: 1rem; white-space: nowrap; transition: transform var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.btn svg { width: 18px; height: 18px; flex: none; transition: transform var(--dur) var(--ease); }
.btn:hover svg.pijl { transform: translateX(4px); }
.btn-primary { background: var(--blue); color: #fff; box-shadow: 0 8px 22px rgba(21, 94, 239, .28); }
.btn-primary:hover { background: var(--blue-h); transform: translateY(-2px); box-shadow: 0 12px 28px rgba(21, 94, 239, .34); }
.btn-outline-light { color: #fff; border: 1.5px solid rgba(255, 255, 255, .7); }
.btn-outline-light:hover { background: rgba(255, 255, 255, .12); border-color: #fff; transform: translateY(-2px); }
.btn-outline { color: var(--ink); border: 1.5px solid var(--line); background: #fff; }
.btn-outline:hover { border-color: var(--ink); transform: translateY(-2px); }
.btn-navy { background: var(--navy); color: #fff; }
.btn-navy:hover { background: var(--navy-2); transform: translateY(-2px); }
.btn-lg { min-height: 56px; padding: 16px 30px; font-size: 1.05rem; }
.btn-sm { min-height: 44px; padding: 10px 18px; font-size: .93rem; }
.link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-family: var(--font-h); font-weight: 700; color: var(--blue); }
.link svg { width: 18px; height: 18px; transition: transform var(--dur) var(--ease); }
.link:hover svg { transform: translateX(4px); }
.link:hover { color: var(--blue-h); }
.section--navy .link { color: var(--ice); }

/* ---------- Header ---------- */
.hdr { position: fixed; inset: 0 0 auto 0; z-index: 90; height: var(--hdr-h); display: flex; align-items: center; transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease), height var(--dur) var(--ease); }
.hdr .wrap { width: 100%; display: flex; align-items: center; gap: 24px; }
.hdr.scrolled, .hdr.licht { background: rgba(255, 255, 255, .94); backdrop-filter: blur(12px); box-shadow: 0 1px 0 var(--line), 0 8px 30px rgba(11, 31, 58, .08); height: 68px; }
.brand { display: inline-flex; align-items: center; flex: none; }
.brand img { height: 40px; width: auto; transition: height var(--dur) var(--ease); }
.hdr.scrolled .brand img, .hdr.licht .brand img { height: 34px; }
.brand .logo-donker { display: none; }
.hdr.scrolled .brand .logo-donker, .hdr.licht .brand .logo-donker { display: block; }
.hdr.scrolled .brand .logo-licht, .hdr.licht .brand .logo-licht { display: none; }
.nav { display: flex; align-items: center; gap: 2px; margin: 0 auto; }
.nav > li { position: relative; }
.nav a, .nav button { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-h); font-weight: 700; font-size: .95rem; color: #fff; padding: 10px 14px; border-radius: 999px; white-space: nowrap; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
.nav a:hover, .nav button:hover, .nav a[aria-current="page"], .nav > li.open > button { background: rgba(255, 255, 255, .12); }
.hdr.scrolled .nav a, .hdr.scrolled .nav button, .hdr.licht .nav a, .hdr.licht .nav button { color: var(--ink); }
.hdr.scrolled .nav a:hover, .hdr.scrolled .nav button:hover, .hdr.scrolled .nav a[aria-current="page"], .hdr.scrolled .nav > li.open > button,
.hdr.licht .nav a:hover, .hdr.licht .nav button:hover, .hdr.licht .nav a[aria-current="page"], .hdr.licht .nav > li.open > button { background: var(--sky); color: var(--blue); }
.nav button svg { width: 14px; height: 14px; transition: transform var(--dur) var(--ease); }
.nav > li.open > button svg { transform: rotate(180deg); }
.dropdown { position: absolute; top: calc(100% + 10px); left: 50%; transform: translate(-50%, 8px); min-width: 300px; background: #fff; border-radius: var(--r); box-shadow: var(--shadow-l); border: 1px solid var(--line); padding: 10px; opacity: 0; visibility: hidden; transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility 0s linear var(--dur); }
.nav > li.open > .dropdown, .nav > li:hover > .dropdown, .nav > li:focus-within > .dropdown { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; }
.dropdown a { display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: center; padding: 10px 12px; border-radius: var(--r-s); color: var(--ink) !important; white-space: normal; }
.dropdown a:hover { background: var(--sky) !important; }
.dropdown a .ico { width: 40px; height: 40px; border-radius: 10px; background: var(--sky); color: var(--blue); display: grid; place-items: center; }
.dropdown a .ico svg { width: 20px; height: 20px; }
.dropdown a span small { display: block; font-family: var(--font-b); font-weight: 400; color: var(--muted); font-size: .82rem; }
.hdr-right { display: flex; align-items: center; gap: 8px; flex: none; }
.hdr-phone { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-h); font-weight: 700; color: #fff; padding: 10px 12px; white-space: nowrap; }
.hdr-phone svg { width: 18px; height: 18px; color: var(--ice); }
.hdr.scrolled .hdr-phone, .hdr.licht .hdr-phone { color: var(--ink); }
.hdr.scrolled .hdr-phone svg, .hdr.licht .hdr-phone svg { color: var(--blue); }
.hdr-right .btn { min-height: 44px; padding: 10px 20px; font-size: .93rem; }
.burger { display: none; width: 46px; height: 46px; border-radius: 999px; align-items: center; justify-content: center; color: #fff; background: rgba(255, 255, 255, .12); }
.hdr.scrolled .burger, .hdr.licht .burger { color: var(--ink); background: var(--sky); }
.burger svg { width: 22px; height: 22px; }
.mobile-menu { position: fixed; inset: 0; z-index: 95; background: var(--navy); color: #fff; padding: 24px var(--gutter) 40px; overflow-y: auto; display: flex; flex-direction: column; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility 0s linear var(--dur); }
.mobile-menu.open { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.mobile-menu .top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 36px; }
.mobile-menu .top img { height: 34px; }
.mobile-menu .sluit { width: 46px; height: 46px; border-radius: 999px; background: rgba(255, 255, 255, .12); display: grid; place-items: center; }
.mobile-menu .sluit svg { width: 22px; height: 22px; }
.mobile-menu nav a { display: block; font-family: var(--font-h); font-weight: 800; font-size: 1.9rem; letter-spacing: -.02em; padding: 12px 0; border-bottom: 1px solid var(--line-d); }
.mobile-menu nav .sub a { font-size: 1.1rem; font-weight: 600; padding: 10px 0 10px 18px; border-bottom: 0; color: rgba(255, 255, 255, .8); }
.mobile-menu nav .sub { border-bottom: 1px solid var(--line-d); padding-bottom: 6px; }
.mobile-menu .m-contact { margin-top: auto; padding-top: 32px; display: grid; gap: 12px; }
.mobile-menu .m-contact .btn { width: 100%; }
.mobile-menu .m-contact p { color: rgba(255, 255, 255, .7); font-size: .95rem; }
.mobile-menu .m-contact p a { color: #fff; font-weight: 600; }
body.menu-open { overflow: hidden; }

/* ---------- Hero ---------- */
.hero { position: relative; min-height: min(100svh, 920px); display: flex; align-items: center; background: var(--navy); color: #fff; overflow: hidden; }
.hero-media { position: absolute; inset: 0; }
.hero-media img, .hero-media video { width: 100%; height: 100%; object-fit: cover; }
.hero-media video { position: absolute; inset: 0; opacity: 0; transition: opacity 900ms var(--ease); }
.hero-media video.speelt { opacity: 1; }
.hero-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(11, 31, 58, .94) 0%, rgba(11, 31, 58, .8) 40%, rgba(11, 31, 58, .35) 100%), linear-gradient(0deg, rgba(11, 31, 58, .9) 0%, rgba(11, 31, 58, 0) 45%); }
.hero .wrap { position: relative; z-index: 1; width: 100%; padding-top: calc(var(--hdr-h) + 48px); padding-bottom: 96px; }
.hero-inner { max-width: 720px; }
.hero .eyebrow { color: var(--ice); }
.hero h1 { color: #fff; }
.hero h1 span { display: block; color: var(--ice); }
.hero .lead { color: rgba(255, 255, 255, .84); margin: 26px 0 32px; max-width: 560px; }
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-tags { margin-top: 30px; font-family: var(--font-h); font-weight: 600; font-size: .95rem; color: rgba(255, 255, 255, .72); display: flex; flex-wrap: wrap; gap: 6px 14px; }
.hero-tags a { display: inline-flex; align-items: center; min-height: 44px; }
.hero-tags a:hover { color: #fff; }
.hero-preview { position: absolute; right: var(--gutter); bottom: 48px; z-index: 2; width: 300px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .18); backdrop-filter: blur(14px); border-radius: var(--r); padding: 12px; display: grid; grid-template-columns: 96px 1fr; gap: 14px; align-items: center; color: #fff; transition: transform var(--dur) var(--ease), background var(--dur) var(--ease); }
.hero-preview:hover { transform: translateY(-3px); background: rgba(255, 255, 255, .14); }
.hero-preview img { width: 96px; height: 96px; object-fit: cover; border-radius: var(--r-s); }
.hero-preview small { display: block; font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ice); font-weight: 700; font-family: var(--font-h); margin-bottom: 4px; }
.hero-preview strong { display: block; color: #fff; font-family: var(--font-h); font-size: .98rem; line-height: 1.3; }
.hero-preview span { font-size: .82rem; color: rgba(255, 255, 255, .7); }
.video-knop { position: absolute; left: var(--gutter); bottom: 48px; z-index: 2; display: inline-flex; align-items: center; gap: 8px; color: rgba(255, 255, 255, .8); font-size: .85rem; font-weight: 500; min-height: 44px; padding: 8px 14px 8px 10px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .25); background: rgba(11, 31, 58, .4); }
.video-knop svg { width: 16px; height: 16px; }
.video-knop:hover { color: #fff; border-color: rgba(255, 255, 255, .6); }
.scroll-hint { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 2; width: 26px; height: 42px; border: 2px solid rgba(255, 255, 255, .4); border-radius: 14px; }
.scroll-hint::before { content: ""; position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: var(--ice); animation: scrollhint 1.8s var(--ease) infinite; }
@keyframes scrollhint { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(14px); opacity: 0; } 100% { opacity: 0; } }

/* ---------- Beeld ---------- */
.foto { overflow: hidden; border-radius: var(--r); background: var(--sky); }
.foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease); }
a.foto:hover img, .kaart:hover .foto img { transform: scale(1.035); }
.foto--parallax img { will-change: transform; }

/* ---------- Sectie A: intro ---------- */
.intro { display: grid; grid-template-columns: 1.05fr .95fr; gap: 64px; align-items: center; }
.intro .foto { aspect-ratio: 3 / 4; box-shadow: var(--shadow-m); }
.intro-tekst p { margin-top: 18px; }
.intro-punten { margin-top: 28px; display: grid; gap: 14px; }
.intro-punten li { display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: start; }
.intro-punten svg { width: 26px; height: 26px; color: var(--blue); }
.intro-punten strong { display: block; font-family: var(--font-h); font-weight: 700; }
.intro-punten span { color: var(--muted); font-size: .97rem; }
.daklijn { color: var(--ice); }
.daklijn path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.daklijn.in path { animation: teken 1.6s var(--ease) forwards; }
@keyframes teken { to { stroke-dashoffset: 0; } }
.intro-deco { position: absolute; right: -20px; top: -40px; width: 260px; opacity: .5; pointer-events: none; }

/* ---------- Sectie B: diensten ---------- */
.diensten { display: grid; grid-template-columns: 1.25fr 1fr; grid-template-rows: 1fr 1fr; gap: 20px; margin-top: 52px; }
.dienst { position: relative; display: block; border-radius: var(--r-l); overflow: hidden; background: var(--navy); color: #fff; min-height: 300px; }
.dienst.groot { grid-row: span 2; min-height: 560px; }
.dienst.breed { grid-column: 1 / -1; min-height: 300px; }
.dienst.breed .foto img { object-position: 50% 40%; }
.dienst.breed .txt { max-width: 720px; }
.dienst.breed h3 { font-size: 1.8rem; }
.dienst .foto { position: absolute; inset: 0; border-radius: 0; }
.dienst .foto img { height: 100%; }
.dienst::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(11, 31, 58, .92) 0%, rgba(11, 31, 58, .35) 45%, rgba(11, 31, 58, .05) 100%); transition: opacity var(--dur) var(--ease); }
.dienst .txt { position: absolute; inset: auto 0 0 0; z-index: 1; padding: 28px; }
.dienst h3 { color: #fff; font-size: 1.6rem; margin-bottom: 8px; }
.dienst.groot h3 { font-size: 2rem; }
.dienst p { color: rgba(255, 255, 255, .8); font-size: .98rem; max-width: 420px; }
.dienst .link { margin-top: 14px; color: var(--ice); }
.dienst:hover .foto img { transform: scale(1.035); }
.dienst-extra { margin-top: 20px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 28px; background: #fff; border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-s); }
.dienst-extra .ico { width: 48px; height: 48px; border-radius: 12px; background: var(--sky); color: var(--blue); display: grid; place-items: center; flex: none; }
.dienst-extra .ico svg { width: 24px; height: 24px; }
.dienst-extra > div { display: flex; align-items: center; gap: 16px; }
.dienst-extra p { font-size: .95rem; }

/* ---------- Sectie C: uitgelicht project ---------- */
.uitgelicht { display: grid; grid-template-columns: 1.15fr .85fr; gap: 0; border-radius: var(--r-l); overflow: hidden; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-m); margin-top: 52px; }
.uitgelicht .fotos { position: relative; min-height: 460px; }
.uitgelicht .fotos > .foto:first-child { position: absolute; inset: 0; border-radius: 0; }
.uitgelicht .info { padding: clamp(28px, 4vw, 52px); display: flex; flex-direction: column; }
.uitgelicht .tags { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.tag { display: inline-flex; align-items: center; font-family: var(--font-h); font-weight: 700; font-size: .78rem; letter-spacing: .04em; padding: 6px 12px; border-radius: 999px; background: var(--sky); color: var(--blue); }
.tag--licht { background: rgba(255, 255, 255, .14); color: #fff; backdrop-filter: blur(6px); }
.uitgelicht h3 { font-size: 1.8rem; margin-bottom: 20px; }
.uitgelicht dl { display: grid; gap: 14px; }
.uitgelicht dt { font-family: var(--font-h); font-weight: 700; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--blue); margin-bottom: 2px; }
.uitgelicht dd { color: var(--muted); font-size: .97rem; }
.uitgelicht .link { margin-top: auto; padding-top: 24px; }
.uitgelicht .detail { position: absolute; right: 24px; bottom: 24px; width: 140px; height: 140px; border-radius: var(--r-s); border: 3px solid #fff; box-shadow: var(--shadow-m); z-index: 1; }

/* ---------- Sectie D: waarom (navy) ---------- */
.waarom { position: relative; overflow: hidden; }
.waarom .pan-patroon { position: absolute; inset: 0; opacity: .06; pointer-events: none; color: var(--ice); }
.waarom .daklijn-groot { position: absolute; right: -40px; top: 40px; width: min(640px, 60vw); opacity: .35; pointer-events: none; }
.waarom .wrap { position: relative; z-index: 1; }
.punten { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 52px; }
.punt { padding: 32px; border-radius: var(--r-l); background: rgba(255, 255, 255, .05); border: 1px solid var(--line-d); transition: background var(--dur) var(--ease), transform var(--dur) var(--ease); }
.punt:hover { background: rgba(255, 255, 255, .08); transform: translateY(-3px); }
.punt .num { font-family: var(--font-h); font-weight: 800; font-size: .85rem; letter-spacing: .12em; color: var(--ice); display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.punt .num::after { content: ""; flex: 1; height: 1px; background: var(--line-d); }
.punt h3 { font-size: 1.35rem; margin-bottom: 10px; }
.punt p { font-size: 1rem; }

/* ---------- Sectie E: dakgraphics ---------- */

/* ---------- Sectie F: werkwijze ---------- */
.stappen { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; margin-top: 60px; }
.stap { position: relative; text-align: center; }
.stap-beeld { position: relative; width: 132px; height: 132px; margin: 0 auto 24px; border-radius: 50%;
  background: var(--sky); display: grid; place-items: center; }
.stap-beeld > svg { width: 52px; height: 52px; stroke-width: 1.5; color: var(--blue); }
.stap-nr { position: absolute; right: 2px; bottom: 2px; width: 36px; height: 36px; border-radius: 50%;
  background: var(--navy); color: #fff; border: 3px solid #fff; display: grid; place-items: center;
  font-family: var(--font-h); font-weight: 800; font-size: .85rem; }
.stap h3 { font-size: 1.15rem; margin-bottom: 8px; }
.stap p { font-size: .96rem; color: var(--muted); max-width: 30ch; margin-inline: auto; }
/* de boog tussen twee stappen; hij hangt aan de linker stap en wijst naar rechts */
.stap-pijl { position: absolute; top: 44px; left: calc(50% + 78px); width: 78px; color: var(--ice);
  opacity: 0; transition: opacity .5s var(--ease); transition-delay: calc(var(--d, 0ms) + 260ms); }
.stap-pijl svg { width: 100%; height: auto; display: block; }
.stap.in .stap-pijl { opacity: 1; }

/* ---------- Sectie G: projectgalerij ---------- */
.filters { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 32px; }
.filters button { min-height: 44px; padding: 9px 18px; border-radius: 999px; border: 1.5px solid var(--line); background: #fff; font-family: var(--font-h); font-weight: 700; font-size: .93rem; color: var(--muted); transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.filters button[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.galerij { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 28px; }
.kaart { display: block; border-radius: var(--r-l); overflow: hidden; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-s); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), opacity var(--dur) var(--ease); }
.kaart:hover { transform: translateY(-4px); box-shadow: var(--shadow-m); }
.kaart .foto { aspect-ratio: 4 / 5; border-radius: 0; position: relative; }
.kaart .tags { position: absolute; top: 14px; left: 14px; display: flex; gap: 6px; flex-wrap: wrap; z-index: 1; }
.kaart .txt { padding: 20px 22px 22px; }
.kaart h3 { font-size: 1.12rem; margin-bottom: 6px; }
.kaart p { font-size: .93rem; }
.kaart.verberg { opacity: 0 !important; visibility: hidden; transform: scale(.98); pointer-events: none; position: absolute; }
.galerij--breed .kaart:first-child { grid-column: span 2; }
.galerij--breed .kaart:first-child .foto { aspect-ratio: 8 / 5; }
.galerij--diensten { grid-template-columns: repeat(5, 1fr); }
.galerij--diensten .foto { aspect-ratio: 4 / 3; }
.galerij--diensten h3 { font-size: 1.02rem; }
.galerij--diensten p { font-size: .88rem; }
.galerij-leeg { padding: 40px; text-align: center; color: var(--muted); }

/* ---------- Sectie H: beoordelingen ---------- */
.review { display: grid; grid-template-columns: 1.3fr .7fr; gap: 48px; align-items: center; margin-top: 44px; }
.review blockquote { font-family: var(--font-h); font-weight: 600; font-size: clamp(1.25rem, 2.2vw, 1.7rem); line-height: 1.4; letter-spacing: -.01em; color: var(--ink); }
.review .sterren { color: #F5B301; font-size: 1.2rem; letter-spacing: 3px; margin-bottom: 16px; }
.review .wie { display: flex; align-items: center; gap: 14px; margin-top: 22px; }
.review .wie .av { width: 48px; height: 48px; border-radius: 50%; background: var(--navy); color: #fff; font-family: var(--font-h); font-weight: 800; display: grid; place-items: center; }
.review .wie strong { display: block; }
.review .wie span { font-size: .88rem; color: var(--muted); }
.review-bron { background: #fff; border: 1px solid var(--line); border-radius: var(--r-l); padding: 28px; box-shadow: var(--shadow-s); }
.review-bron p { font-size: .95rem; margin-top: 8px; }
.review-bron .btn { margin-top: 18px; }

/* ---------- Sectie I: werkgebied ---------- */
.werkgebied { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.kaart-svg { background: #fff; border: 1px solid var(--line); border-radius: var(--r-l); padding: 12px; box-shadow: var(--shadow-s); }
.kaart-svg svg { width: 100%; height: auto; }
.kaart-svg .straal { fill: var(--sky); stroke: var(--blue); stroke-width: 1.5; stroke-dasharray: 6 6; }
.kaart-svg .plaats circle { fill: #fff; stroke: var(--blue); stroke-width: 2; }
.kaart-svg .plaats text { font-family: var(--font-b); font-size: 11px; font-weight: 500; fill: var(--ink); }
.kaart-svg .centrum circle { fill: var(--blue); stroke: #fff; stroke-width: 3; }
.kaart-svg .centrum text { font-family: var(--font-h); font-weight: 800; font-size: 14px; fill: var(--navy); }
.kaart-svg .kaart-noot { font-size: 10px; fill: var(--muted); }
.kaart-svg .kaart-achtergrond { fill: #F4F8FD; }
.kaart-svg .kaart-land path { fill: #fff; stroke: #D4E2F4; stroke-width: .8; stroke-linejoin: round; }
.kaart-svg .kaart-provincie path { fill: none; stroke: #B4CCEA; stroke-width: 1.4; stroke-linejoin: round; }
.kaart-svg .kaart-water path { fill: none; stroke: #9AC6EF; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.kaart-svg .kaart-water-naam { font-family: var(--font-b); font-size: 10px; font-style: italic; fill: #5B91C7; }
.kaart-svg .straal { fill: rgba(21, 94, 239, .07); }
.kaart-svg .plaats text, .kaart-svg .centrum text { paint-order: stroke; stroke: #fff; stroke-width: 3; stroke-linejoin: round; }
.plaatsen { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.plaatsen li a, .plaatsen li span { display: inline-flex; align-items: center; min-height: 44px; padding: 6px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--line); font-size: .92rem; font-weight: 500; color: var(--ink); transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease); }
.plaatsen li a:hover { border-color: var(--blue); color: var(--blue); }

/* ---------- Sectie J: FAQ ---------- */
.faq { max-width: 820px; margin: 40px auto 0; display: grid; gap: 10px; }
.faq details { background: #fff; border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-s); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 22px; font-family: var(--font-h); font-weight: 700; font-size: 1.05rem; color: var(--ink); min-height: 44px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .plus { width: 30px; height: 30px; border-radius: 50%; background: var(--sky); color: var(--blue); flex: none; display: grid; place-items: center; transition: transform var(--dur) var(--ease), background var(--dur) var(--ease); }
.faq summary .plus svg { width: 16px; height: 16px; }
.faq details[open] summary .plus { transform: rotate(45deg); background: var(--navy); color: #fff; }
.faq .antwoord { padding: 0 22px 22px; }
.faq .antwoord p { font-size: 1rem; }
.faq details.animeert .antwoord { overflow: hidden; }

/* ---------- Sectie K: contact ---------- */
.contact h1 { font-size: clamp(2rem, 4vw, 3.4rem); }
.contact { display: grid; grid-template-columns: .85fr 1.15fr; gap: 56px; align-items: start; }
.contact-kaart { background: #fff; border: 1px solid var(--line); border-radius: var(--r-l); padding: clamp(24px, 3vw, 40px); box-shadow: var(--shadow-m); }
.contact-lijst { display: grid; gap: 16px; margin-top: 30px; }
.contact-lijst li { display: flex; gap: 14px; align-items: center; }
.contact-lijst .ico { width: 48px; height: 48px; border-radius: 12px; background: var(--sky); color: var(--blue); display: grid; place-items: center; flex: none; }
.contact-lijst .ico svg { width: 22px; height: 22px; }
.contact-lijst strong { display: block; font-family: var(--font-h); }
.contact-lijst strong a { display: inline-block; padding: 10px 0; margin: -10px 0; }
.contact-lijst span { font-size: .9rem; color: var(--muted); }
.form { display: grid; gap: 14px; }
.form .rij { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form label { display: grid; gap: 6px; font-family: var(--font-h); font-weight: 700; font-size: .88rem; color: var(--ink); }
.form label .opt { font-family: var(--font-b); font-weight: 400; color: var(--muted); }
.form input, .form textarea, .form select { font: inherit; font-size: 1rem; min-height: 48px; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: var(--r-s); background: var(--bg); color: var(--ink); width: 100%; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease); }
.form input:focus, .form textarea:focus, .form select:focus { outline: 0; border-color: var(--blue); background: #fff; box-shadow: 0 0 0 4px rgba(21, 94, 239, .14); }
.form input[aria-invalid="true"], .form textarea[aria-invalid="true"] { border-color: #C62828; }
.form .fout { display: none; font-family: var(--font-b); font-weight: 500; font-size: .84rem; color: #B42318; }
.form label.heeft-fout .fout { display: block; }
.form textarea { min-height: 130px; resize: vertical; }
.form input[type="file"] { padding: 10px; background: #fff; border-style: dashed; }
.form .btn { width: 100%; }
.form-noot { font-size: .84rem; color: var(--muted); }
.form-status { display: none; padding: 14px 16px; border-radius: var(--r-s); font-weight: 500; }
.form-status.ok { display: block; background: #E6F6EC; color: #0F5132; }
.form-status.err { display: block; background: #FDECEC; color: #8A1C1C; }
.form-status.info { display: block; background: var(--sky); color: var(--navy); }
.honing { position: absolute; left: -9999px; }

/* ---------- Footer ---------- */
.footer { background: var(--navy); color: rgba(230, 238, 251, .75); padding: 72px 0 max(28px, env(safe-area-inset-bottom)); position: relative; overflow: hidden; }
.footer .daklijn-footer { position: absolute; left: -40px; bottom: -20px; width: 420px; opacity: .12; pointer-events: none; }
.footer .wrap { position: relative; z-index: 1; }
.footer-grid { display: grid; grid-template-columns: 1.6fr .9fr .9fr 1.45fr 1.05fr; gap: 40px; }
.footer .logo { height: 44px; width: auto; margin-bottom: 18px; }
.footer p { color: rgba(230, 238, 251, .7); font-size: .97rem; }
.footer .footer-kop { color: #fff; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 18px; }
.footer ul { display: grid; gap: 10px; }
.footer a { transition: color var(--dur) var(--ease); }
.footer a:hover { color: #fff; }
.footer .vca { display: inline-flex; align-items: center; gap: 12px; background: #fff; border-radius: 12px; padding: 8px 14px; margin-top: 22px; }
.footer .vca img { height: 30px; width: auto; }
.footer .vca span { color: var(--navy); font-family: var(--font-h); font-weight: 700; font-size: .82rem; }
.footer-plaatsen { grid-template-columns: 1fr 1fr; gap: 10px 20px; }
.footer-plaatsen a { white-space: nowrap; }
.footer-straal { margin-top: 16px; font-size: .86rem; color: rgba(230, 238, 251, .55); }

.footer-contact { gap: 14px; }
.footer-contact li { display: grid; grid-template-columns: 18px 1fr; align-items: start; gap: 11px; }
.footer-contact svg { width: 18px; height: 18px; color: var(--ice); margin-top: .18em; }
.footer-sociaal { display: flex; gap: 10px; margin-top: 22px; }
.footer-sociaal a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px;
  border: 1px solid var(--line-d); background: rgba(255, 255, 255, .04); color: #fff;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease); }
.footer-sociaal a:hover { background: var(--blue); border-color: var(--blue); transform: translateY(-2px); }
.footer-sociaal svg { width: 21px; height: 21px; }

.footer-bottom { margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--line-d); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: .86rem; }
.footer-bottom nav { display: flex; gap: 18px; flex-wrap: wrap; }

/* ---------- Mobiele contactbalk ---------- */
.mobile-bar { display: none; position: fixed; inset: auto 0 0 0; z-index: 85; background: rgba(255, 255, 255, .96); backdrop-filter: blur(10px); border-top: 1px solid var(--line); padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom)); gap: 10px; box-shadow: 0 -8px 30px rgba(11, 31, 58, .1); }
.mobile-bar .btn { flex: 1; min-height: 50px; padding: 12px 10px; font-size: .97rem; }

/* ---------- Subpagina's ---------- */
.page-hero { position: relative; background: var(--navy); color: #fff; padding: calc(var(--hdr-h) + 56px) 0 80px; overflow: hidden; }
.page-hero .bg { position: absolute; inset: 0; }
.page-hero .bg img { width: 100%; height: 100%; object-fit: cover; opacity: .32; }
.page-hero .bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--navy) 25%, rgba(11, 31, 58, .5) 100%), linear-gradient(0deg, var(--navy) 0%, transparent 50%); }
.page-hero--beeld .bg img { opacity: .5; }   /* kop waar het beeld zelf iets mag vertellen */
.page-hero .wrap { position: relative; z-index: 1; }
.page-hero .eyebrow { color: var(--ice); }
.page-hero h1 { color: #fff; max-width: 800px; font-size: clamp(2.3rem, 5vw, 4.2rem); }
.page-hero .lead { color: rgba(255, 255, 255, .84); max-width: 620px; margin-top: 20px; }
.page-hero .hero-cta { margin-top: 30px; }
.crumbs { display: flex; gap: 8px; font-size: .86rem; color: rgba(255, 255, 255, .6); margin-bottom: 22px; flex-wrap: wrap; }
.crumbs a:hover { color: #fff; }
.tekst-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 64px; align-items: start; }
.prose { max-width: 740px; }
.prose h2 { font-size: clamp(1.6rem, 2.8vw, 2.3rem); margin: 48px 0 16px; }
.prose > h2:first-child { margin-top: 0; }
.prose h3 { margin: 30px 0 10px; }
.prose p { margin-bottom: 16px; font-size: 1.05rem; }
.prose ul { margin: 0 0 20px; display: grid; gap: 8px; }
.prose ul li { position: relative; padding-left: 28px; color: var(--muted); }
.prose ul li::before { content: ""; position: absolute; left: 0; top: .5em; width: 16px; height: 8px; border-left: 2.5px solid var(--blue); border-bottom: 2.5px solid var(--blue); transform: rotate(-45deg); }
.prose .faq { margin-top: 20px; max-width: none; }

/* --- Kennispagina's: antwoord vooraan, tabel, bronnen --------------------- */
.prose ol { margin: 0 0 20px 0; padding-left: 0; list-style: none; counter-reset: stap; display: grid; gap: 10px; }
.prose ol li { position: relative; padding-left: 38px; color: var(--muted); counter-increment: stap; }
.prose ol li::before { content: counter(stap); position: absolute; left: 0; top: -1px; width: 24px; height: 24px; border-radius: 50%;
  background: var(--blue); color: #fff; font-family: var(--font-h); font-weight: 800; font-size: .78rem; display: grid; place-items: center; }
.kort-antwoord { background: var(--licht); border-left: 4px solid var(--blue); border-radius: 0 var(--r-s) var(--r-s) 0; padding: 22px 26px; margin-bottom: 36px; }
.kort-antwoord h2 { margin: 0 0 8px; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--blue); font-weight: 800; }
.kort-antwoord p { margin: 0; font-size: 1.1rem; line-height: 1.6; color: var(--ink); font-weight: 500; }
.tabel-wrap { overflow-x: auto; margin: 0 0 24px; -webkit-overflow-scrolling: touch; }
.tabel { width: 100%; border-collapse: collapse; font-size: .97rem; min-width: 520px; }
.tabel th { text-align: left; padding: 12px 14px; background: var(--navy); color: #fff; font-family: var(--font-h); font-size: .8rem;
  letter-spacing: .06em; text-transform: uppercase; font-weight: 800; }
.tabel th:first-child { border-radius: var(--r-s) 0 0 0; }
.tabel th:last-child { border-radius: 0 var(--r-s) 0 0; }
.tabel td { padding: 12px 14px; border-bottom: 1px solid var(--line); color: var(--muted); vertical-align: top; }
.tabel tbody tr:nth-child(even) { background: #FAFCFF; }
.tabel td strong { color: var(--ink); }
.bronnen { margin-top: 52px; padding-top: 28px; border-top: 2px solid var(--line); }
.bronnen h2 { font-size: 1.15rem; margin: 0 0 12px; }
.bronnen ul { margin-bottom: 16px; }
.bronnen ul li { font-size: .95rem; }
.bronnen a { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }
.disclaimer { font-size: .9rem; color: var(--muted); background: #F7F9FC; border-radius: var(--r-s); padding: 14px 16px; }
.bijgewerkt { font-size: .88rem; color: var(--muted); margin-bottom: 0; }

/* --- Kennisbank: hub met sprongmenu, rubrieken en vragen -------------------
   Zelfde opbouw als de kennisbank van Westrik: links waar je verder leest,
   rechts de vragen als uitklapper. De antwoorden hier zijn kort; het hele
   verhaal staat in het artikel. */
.kb-hero { display: grid; grid-template-columns: 1.35fr .85fr; gap: 48px; align-items: center; }
.kb-sprong { align-self: center; background: rgba(255, 255, 255, .05); border: 1px solid var(--line-d);
  border-radius: var(--r-l); padding: 24px; }
.kb-sprong-lbl { display: block; font-family: var(--font-h); font-size: .72rem; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ice); margin-bottom: 14px; }
.kb-sprong-lijst { display: grid; gap: 8px; }
.kb-sprong-item { display: flex; align-items: center; gap: 12px; padding: 10px 13px; border-radius: var(--r-s);
  background: rgba(255, 255, 255, .04); color: rgba(230, 238, 251, .86); font-size: .94rem; font-weight: 600;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
.kb-sprong-item:hover { background: rgba(21, 94, 239, .3); color: #fff; }
.kb-sprong-ic { flex: none; width: 34px; height: 34px; border-radius: 10px; background: rgba(115, 200, 255, .14);
  color: var(--ice); display: grid; place-items: center; }
.kb-sprong-ic svg { width: 18px; height: 18px; }

.kb-noot { display: flex; gap: 16px; align-items: flex-start; background: var(--sky);
  border: 1px solid #D4E4FF; border-radius: var(--r); padding: 20px 22px; }
.kb-noot-ic { flex: none; width: 38px; height: 38px; border-radius: 10px; background: #fff;
  color: var(--blue); display: grid; place-items: center; }
.kb-noot-ic svg { width: 20px; height: 20px; }
.kb-noot p { margin: 0; font-size: .93rem; line-height: 1.7; color: var(--ink); }

.kb-rubrieken { padding-top: 56px; }
.kb-rubriek { padding: 56px 0; border-top: 1px solid var(--line); }
.kb-rubriek:first-child { border-top: 0; padding-top: 8px; }
.kb-rubriek .wrap { padding-inline: 0; }
.kb-kop { display: flex; align-items: flex-start; gap: 18px; margin-bottom: 32px; }
.kb-kop-ic { flex: none; width: 60px; height: 60px; border-radius: var(--r); background: var(--sky);
  color: var(--blue); display: grid; place-items: center; }
.kb-kop-ic svg { width: 29px; height: 29px; }
.kb-kop h2 { font-size: clamp(1.4rem, 2.2vw, 1.85rem); margin: 0; }
.kb-kop p { color: var(--muted); margin: 6px 0 0; max-width: 62ch; }

.kb-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(24px, 3vw, 44px); align-items: start; }
.kb-artikelen { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-l); padding: 26px 28px;
  position: sticky; top: 96px; }
.kb-artikelen h3, .kb-vragen h3 { font-size: 1.05rem; margin-bottom: 16px; }
.kb-artikelen ul { display: grid; gap: 4px; }
.kb-artikelen li { padding: 14px 0; border-bottom: 1px solid var(--line); }
.kb-artikelen li:last-child { border-bottom: 0; padding-bottom: 0; }
.kb-artikelen li a { display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  font-family: var(--font-h); font-weight: 700; color: var(--navy); line-height: 1.3; }
.kb-artikelen li a:hover { color: var(--blue); }
.kb-artikelen li a svg { flex: none; width: 17px; height: 17px; color: var(--blue); transform: translateY(2px); }
.kb-artikelen li p { margin: 6px 0 0; font-size: .88rem; line-height: 1.65; color: var(--muted); }

.faq-lijst { display: grid; gap: 10px; }
.faq-item { background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.faq-item[open] { border-color: #D4E4FF; box-shadow: var(--shadow-s); }
.faq-item summary { list-style: none; cursor: pointer; display: flex; align-items: center;
  justify-content: space-between; gap: 18px; padding: 17px 20px;
  font-family: var(--font-h); font-weight: 700; font-size: 1rem; color: var(--navy); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--blue); }
.faq-item summary:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; border-radius: var(--r); }
.faq-plus { position: relative; flex: none; width: 18px; height: 18px; }
.faq-plus::before, .faq-plus::after { content: ""; position: absolute; background: var(--blue); border-radius: 2px;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease); }
.faq-plus::before { left: 0; right: 0; top: 8px; height: 2px; }
.faq-plus::after { top: 0; bottom: 0; left: 8px; width: 2px; }
.faq-item[open] .faq-plus::after { transform: rotate(90deg); opacity: 0; }
.faq-antwoord { padding: 0 20px 18px; }
.faq-antwoord p { margin: 0 0 10px; font-size: .96rem; line-height: 1.7; color: var(--muted); max-width: 68ch; }
.faq-antwoord .link { font-size: .88rem; }

.kb-verwant { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.kb-verwant-item { display: flex; align-items: center; justify-content: space-between; gap: 14px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 16px 18px;
  font-weight: 600; font-size: .95rem; color: var(--navy); box-shadow: var(--shadow-s);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.kb-verwant-item:hover { transform: translateY(-2px); border-color: #DCE7F7; box-shadow: 0 18px 36px rgba(29,78,216,.10); }
.kb-verwant-item svg { flex: none; width: 17px; height: 17px; color: var(--blue); }

@media (max-width: 1024px) {
  .kb-hero { grid-template-columns: 1fr; gap: 32px; }
  .kb-grid { grid-template-columns: 1fr; }
  .kb-artikelen { position: static; }
}
@media (max-width: 680px) {
  .kb-sprong { padding: 18px; }
  .kb-rubriek { padding: 40px 0; }
  .kb-kop { gap: 14px; margin-bottom: 24px; }
  .kb-kop-ic { width: 48px; height: 48px; }
  .kb-kop-ic svg { width: 24px; height: 24px; }
  .kb-artikelen { padding: 22px 20px; }
  .faq-item summary { padding: 15px 17px; font-size: .96rem; }
  .faq-antwoord { padding: 0 17px 16px; }
}

/* --- Dakopbouw: nok, goot, dakrand en afvoer ------------------------------
   Twee soorten informatie per kaart: wat het onderdeel is, en waaraan je het
   ziet. Die moeten uit elkaar te houden zijn, anders wordt het een lap tekst.
   Vier kaarten in een 2x2, want met deze tekstlengte worden vier kolommen
   te smal. */
.onderdelen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.onderdeel { position: relative; display: grid; grid-template-rows: auto auto 1fr auto; gap: 10px;
  padding: 30px 32px 26px; background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-l); box-shadow: var(--shadow-s); }
.onderdeel-nr { font-family: 'Manrope', system-ui, sans-serif; font-size: .8rem; font-weight: 800;
  letter-spacing: .08em; color: var(--blue); }
.onderdeel h3 { font-size: 1.22rem; line-height: 1.25; color: var(--navy); margin: 0; }
.onderdeel p { margin: 0; color: var(--muted); font-size: .97rem; line-height: 1.75; }
.onderdeel-signaal { display: grid; gap: 4px; margin-top: 6px !important; padding: 16px 18px;
  background: var(--sky); border-radius: var(--r-s); color: var(--ink) !important; font-size: .93rem !important; }
.onderdeel-signaal span { font-family: 'Manrope', system-ui, sans-serif; font-weight: 700; font-size: .72rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--blue); }

.meer { margin-top: 30px; }

@media (max-width: 860px) { .onderdelen { grid-template-columns: 1fr; gap: 16px; } }
@media (max-width: 720px) {
  .onderdeel { padding: 24px 24px 22px; border-radius: var(--r); }
  .onderdeel h3 { font-size: 1.12rem; }
  .onderdeel-signaal { padding: 14px 16px; }
}

/* --- Werkgebied: per plaats een blok in plaats van een kale naam --------- */
.plaats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; }
.plaats-kaart { scroll-margin-top: 96px; background: #fff; border: 1px solid var(--line);
  border-radius: var(--r); padding: 24px 26px 22px; box-shadow: var(--shadow-s);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.plaats-kaart:target { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(21, 94, 239, .12), var(--shadow-s); }
.plaats-kaart h3 { font-size: 1.18rem; margin: 0 0 4px; color: var(--navy); }
.plaats-meta { margin: 0 0 10px !important; font-family: var(--font-h); font-weight: 700; font-size: .78rem;
  letter-spacing: .04em; color: var(--blue); }
.plaats-kaart p { margin: 0; color: var(--muted); font-size: .95rem; line-height: 1.7; }

@media (max-width: 680px) { .plaats-kaart { padding: 20px 20px 18px; } }

/* --- Plaatspagina's: feitenstrip en dienstenrij ---------------------------- */
.plaatsfeiten { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1px;
  background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.plaatsfeit { background: #fff; padding: 20px 24px; display: grid; gap: 4px; }
.plaatsfeit span { font-family: var(--font-h); font-weight: 700; font-size: .72rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); }
.plaatsfeit strong { font-family: var(--font-h); font-size: 1.05rem; color: var(--navy); line-height: 1.3; }

.plaatsdiensten { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.plaatsdienst { display: grid; justify-items: center; text-align: center; gap: 12px; padding: 26px 18px;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--r); color: var(--navy);
  font-family: var(--font-h); font-weight: 700; font-size: .98rem;
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.plaatsdienst:hover { transform: translateY(-3px); border-color: #DCE7F7; box-shadow: 0 18px 36px rgba(29,78,216,.10); }
.plaatsdienst svg { width: 30px; height: 30px; color: var(--blue); }

@media (max-width: 680px) {
  .plaatsfeit { padding: 16px 18px; }
  .plaatsdienst { padding: 20px 14px; font-size: .92rem; }
  .plaatsdienst svg { width: 26px; height: 26px; }
}

.aside { position: sticky; top: 96px; display: grid; gap: 16px; }
.aside-kaart { background: #fff; border: 1px solid var(--line); border-radius: var(--r-l); padding: 26px; box-shadow: var(--shadow-s); }
.aside-kaart h3 { font-size: 1.1rem; margin-bottom: 8px; }
.aside-kaart p { font-size: .95rem; margin-bottom: 16px; }
.aside-kaart .btn { width: 100%; }
.aside-kaart--navy { background: var(--navy); border-color: transparent; color: #fff; }
.aside-kaart--navy h3 { color: #fff; }
.aside-kaart--navy p { color: rgba(255, 255, 255, .75); }
.aside-links { display: grid; gap: 4px; }
.aside-links a { display: flex; justify-content: space-between; align-items: center; min-height: 44px; padding: 10px 12px; border-radius: var(--r-s); font-family: var(--font-h); font-weight: 700; font-size: .95rem; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
.aside-links a:hover { background: var(--sky); color: var(--blue); }
.aside-links a[aria-current="page"] { background: var(--navy); color: #fff; }
.aside-links svg { width: 16px; height: 16px; }
.factoren { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin: 24px 0 8px; }
.factor { background: var(--sky); border-radius: var(--r); padding: 20px; }
.factor strong { display: block; font-family: var(--font-h); margin-bottom: 4px; }
.factor span { font-size: .93rem; color: var(--muted); }
.cta-band { display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; background: var(--navy); color: #fff; border-radius: var(--r-l); overflow: hidden; }
.cta-band .foto { border-radius: 0; height: 100%; min-height: 320px; }
.cta-band .txt { padding: clamp(32px, 5vw, 64px); }
.cta-band h2 { color: #fff; font-size: clamp(1.7rem, 3vw, 2.5rem); margin-bottom: 14px; }
.cta-band p { color: rgba(255, 255, 255, .8); font-size: 1.08rem; margin-bottom: 26px; }
.cta-band .acties { display: flex; gap: 14px; flex-wrap: wrap; }

/* ---------- Animatiesysteem ---------- */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); transition-delay: var(--d, 0ms); }
.reveal.in { opacity: 1; transform: none; }
.reveal-groep > * { opacity: 0; transform: translateY(20px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); transition-delay: var(--d, 0ms); }
.reveal-groep > .in { opacity: 1; transform: none; }
.hero-inner > * { opacity: 0; transform: translateY(20px); animation: binnen 650ms var(--ease) forwards; }
.hero-inner > :nth-child(1) { animation-delay: 80ms; }
.hero-inner > :nth-child(2) { animation-delay: 160ms; }
.hero-inner > :nth-child(3) { animation-delay: 240ms; }
.hero-inner > :nth-child(4) { animation-delay: 320ms; }
.hero-inner > :nth-child(5) { animation-delay: 400ms; }
.hero-preview, .video-knop { opacity: 0; animation: binnen 650ms var(--ease) 600ms forwards; }
@keyframes binnen { to { opacity: 1; transform: none; } }
html.geen-js .reveal, html.geen-js .reveal-groep > *, html.geen-js .hero-inner > *, html.geen-js .hero-preview, html.geen-js .video-knop { opacity: 1; transform: none; animation: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .reveal-groep > *, .hero-inner > *, .hero-preview, .video-knop { opacity: 1; transform: none; animation: none; transition: none; }
  .daklijn path { stroke-dashoffset: 0; animation: none; }
  .scroll-hint::before { animation: none; }
  .foto img, .btn, .link svg, .kaart, .punt { transition: none; }
  a.foto:hover img, .kaart:hover .foto img, .dienst:hover .foto img { transform: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .nav { display: none; }
  .burger { display: inline-flex; }
  .hdr-phone { display: none; }
  .hdr .wrap { justify-content: space-between; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 960px) {
  :root { --hdr-h: 72px; --gutter: 22px; }
  .intro, .uitgelicht, .review, .werkgebied, .contact, .tekst-grid, .cta-band { grid-template-columns: 1fr; }
  .intro { gap: 36px; }
  .intro .foto { aspect-ratio: 4 / 3; order: -1; }
  .diensten { grid-template-columns: 1fr; grid-template-rows: none; }
  .dienst.breed { min-height: 300px; }
  .galerij--diensten { grid-template-columns: 1fr 1fr; }
  .dienst, .dienst.groot { min-height: 320px; grid-row: auto; }
  .dienst.groot { min-height: 400px; }
  .uitgelicht .fotos { min-height: 0; aspect-ratio: 3 / 2; }
  .punten { grid-template-columns: 1fr; }
  .stappen { grid-template-columns: 1fr 1fr; gap: 40px 24px; margin-top: 44px; }
  .stap-pijl { display: none; }
  .stap-beeld { width: 108px; height: 108px; margin-bottom: 18px; }
  .stap-beeld > svg { width: 44px; height: 44px; }
  .stap-nr { width: 31px; height: 31px; font-size: .78rem; }
  .galerij { grid-template-columns: 1fr 1fr; }
  .galerij--breed .kaart:first-child { grid-column: span 2; }
  .aside { position: static; }
  .cta-band .foto { min-height: 240px; order: -1; }
  .hero-preview { display: none; }
  .hero { min-height: 0; }
  .hero .wrap { padding-top: calc(var(--hdr-h) + 40px); padding-bottom: 88px; }
  .video-knop { bottom: 28px; }
  .scroll-hint { display: none; }
  .factoren { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  :root { --gutter: 20px; }
  body { font-size: 16.5px; padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
  .hero-cta .btn { width: 100%; }
  .galerij, .galerij--diensten { grid-template-columns: 1fr; }
  .galerij--breed .kaart:first-child { grid-column: span 1; }
  .galerij--breed .kaart:first-child .foto { aspect-ratio: 4 / 5; }
  .form .rij { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 30px; }
  .footer-plaatsen { grid-template-columns: 1fr 1fr; }
  .footer-sociaal { margin-top: 18px; }
  .footer-bottom { flex-direction: column; }
  .mobile-bar { display: flex; }
  .hdr-right .btn { display: none; }
  .head-row { gap: 16px; }
  .uitgelicht .detail { width: 96px; height: 96px; right: 14px; bottom: 14px; }
  .dienst-extra { flex-direction: column; align-items: flex-start; }
  .dienst-extra .btn { width: 100%; }
}

/* --- Dakviewer: interactieve dakopbouw ------------------------------------
   Geleverd als losse demo met eigen resets op *, html, body, header, button
   en a. Alles is hier ingekapseld onder .dakviewer, de resets die deze site
   zelf al heeft zijn eruit, en de keyframes hebben het voorvoegsel dv-.
   Niet met de hand aanpassen: zie scripts/ en het bronpakket.            */
.dakviewer{--blue:#155eef;--ink:#102844;--muted:#5b6b80;--line:#dce3eb;--wash:#f5f7fa;--ease:cubic-bezier(.22,1,.36,1)}
.dakviewer *{box-sizing:border-box}
.dakviewer button, .dakviewer a{-webkit-tap-highlight-color:transparent}
.dakviewer button{font:inherit;cursor:pointer}
.dakviewer button:focus-visible, .dakviewer a:focus-visible{outline:3px solid #155eef;outline-offset:4px}
.dakviewer button:disabled{cursor:wait}
.dakviewer button svg, .dakviewer a svg{width:18px;height:18px;flex-shrink:0}
.dakviewer a{color:inherit}
.dakviewer svg{display:block}
.dakviewer header{max-width:1440px;margin:auto;display:flex;align-items:center;justify-content:space-between;padding:25px 48px;border-bottom:1px solid var(--line)}
.dakviewer header img{width:153px;display:block}
.dakviewer header a{font-size:13px;text-decoration:none;display:flex;gap:9px;align-items:center;font-weight:600;color:var(--muted)}
.dakviewer header a svg{width:16px;height:16px}
.dakviewer main{max-width:1440px;margin:auto;padding:51px 48px 24px}
.dakviewer .intro{display:flex;justify-content:space-between;align-items:end;gap:35px;margin-bottom:29px}
.dakviewer h1{font-size:clamp(30px,3.6vw,49px);letter-spacing:-1.75px;line-height:1.09;margin:0 0 15px;font-weight:700}
.dakviewer .intro p{font-size:16px;line-height:1.65;color:var(--muted);max-width:560px;margin:0}
.dakviewer .roof-types{display:flex;gap:3px;background:#edf1f6;padding:5px;border-radius:12px;flex-shrink:0}
.dakviewer .roof-types button{border:0;display:flex;align-items:center;justify-content:center;gap:9px;padding:14px 17px;border-radius:9px;color:var(--muted);background:transparent;font-size:14px;font-weight:700;white-space:nowrap}
.dakviewer .roof-types button[aria-pressed=true]{background:var(--ink);color:#fff;box-shadow:0 3px 7px #12284415}
.dakviewer .explorer{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:32px;align-items:start}
.dakviewer .studio{background:var(--wash);border-radius:19px;overflow:hidden;position:relative;border:1px solid #e6ebf1}
.dakviewer .studio-bar{display:flex;align-items:center;justify-content:space-between;padding:19px 22px 6px;gap:12px}
.dakviewer .model-caption{font-size:13px;display:flex;align-items:center;gap:9px;font-weight:600}
.dakviewer .model-caption:before{content:'';width:6px;height:6px;background:var(--blue);border-radius:50%}
.dakviewer .zoom-button{background:#ffffffbd;border:1px solid #dce3eb;border-radius:50%;width:40px;height:40px;display:grid;place-items:center;color:var(--ink);transition:background .2s}
.dakviewer .zoom-button:hover{background:#fff}
.dakviewer .scene{position:relative;width:100%;aspect-ratio:3/2;isolation:isolate}
.dakviewer .roof-image{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;opacity:0;transform:scale(.965) translateY(9px);transition:opacity .75s var(--ease),transform 1.15s var(--ease);pointer-events:none}
.dakviewer .roof-image.is-visible{opacity:1;transform:scale(1) translateY(0)}
.dakviewer .pins{position:absolute;inset:0;opacity:1;transition:opacity .25s;z-index:2}
.dakviewer .pins.is-hidden{opacity:0;pointer-events:none;visibility:hidden}
.dakviewer .pin{position:absolute;width:44px;height:44px;border:0;padding:0;background:transparent;display:grid;place-items:center;transform:translate(-50%,-50%);color:var(--ink)}
.dakviewer .pin span{width:29px;height:29px;border:2px solid #fff;border-radius:50%;display:grid;place-items:center;background:#fff;color:var(--ink);font-size:12px;font-weight:700;box-shadow:0 2px 12px #10284430;transition:background .22s,color .22s,box-shadow .22s}
.dakviewer .pin[aria-pressed=true] span{background:var(--blue);color:#fff;box-shadow:0 0 0 6px #155eef23,0 3px 16px #10284424}
.dakviewer .pin:hover span{background:var(--blue);color:white}
.dakviewer .scene-note{padding:0 23px;text-align:center;font-size:12px;color:var(--muted);min-height:17px;margin:-1px 0 16px}
.dakviewer .controls{display:flex;gap:9px;justify-content:center;padding:0 22px 24px}
.dakviewer .controls button{min-height:44px;display:flex;gap:9px;align-items:center;justify-content:center;border:1px solid #d2dce7;background:#fff;color:var(--ink);padding:11px 17px;font-size:13px;font-weight:600;border-radius:9px;transition:background .2s,border-color .2s}
.dakviewer .controls button:hover{border-color:#9bacbf;background:#fbfcff}
.dakviewer .controls .play{color:#fff;background:var(--ink);border-color:var(--ink)}
.dakviewer .controls .play:hover{background:#1c3b60;border-color:#1c3b60}
.dakviewer .controls .play[aria-pressed=true]{background:var(--blue);border-color:var(--blue)}
.dakviewer .icon-pause{display:none}
.dakviewer .play[aria-pressed=true] .icon-pause{display:block}
.dakviewer .play[aria-pressed=true] .icon-play{display:none}
.dakviewer .rail{padding-top:8px}
.dakviewer .rail-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.dakviewer .rail-top h2{font-size:16px;margin:0}
.dakviewer .rail-top span{font-size:12px;color:var(--muted)}
.dakviewer .layer-list{padding:0;margin:0;list-style:none}
.dakviewer .layer-list li{border-bottom:1px solid var(--line)}
.dakviewer .layer-button{position:relative;overflow:hidden;width:100%;display:flex;align-items:center;gap:12px;background:transparent;border:0;padding:15px 8px;text-align:left;color:var(--ink);border-radius:7px;min-height:59px}
.dakviewer .layer-button:hover{background:#f6f8fb}
.dakviewer .layer-button[aria-pressed=true]{background:#edf3ff}
.dakviewer .layer-number{font-size:12px;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;color:var(--muted);border:1px solid #cdd7e2;flex-shrink:0}
.dakviewer .layer-button[aria-pressed=true] .layer-number{background:var(--blue);border-color:var(--blue);color:white}
.dakviewer .layer-name{font-size:14px;font-weight:600;line-height:1.35;flex:1}
.dakviewer .material{height:23px;width:23px;border-radius:5px;background-image:var(--material);background-size:500%;border:1px solid #0b1f3a15;flex-shrink:0}
.dakviewer .layer-button:after{content:'';position:absolute;bottom:0;left:0;width:100%;height:2px;background:var(--blue);transform:scaleX(0);transform-origin:left}
body.is-playing .dakviewer .layer-button[aria-pressed=true]:after{animation:dv-progress 3.6s linear forwards}
@keyframes dv-progress {to{transform:scaleX(1)}}
.dakviewer .detail{padding:27px 8px 0}
.dakviewer .detail-label{display:flex;align-items:center;gap:8px;color:var(--blue);font-size:11px;margin:0 0 10px}
.dakviewer .detail-label span{height:1px;width:18px;background:var(--blue)}
.dakviewer .detail h3{font-size:24px;letter-spacing:-.6px;margin:0 0 12px;line-height:1.2}
.dakviewer .detail p{font-size:14px;color:var(--muted);line-height:1.75;margin:0}
.dakviewer .inspect{margin-top:19px;display:flex;gap:9px;border-top:1px solid var(--line);padding-top:16px}
.dakviewer .inspect svg{width:16px;height:16px;flex-shrink:0;margin-top:3px;color:var(--blue)}
.dakviewer .inspect p{font-size:12px;line-height:1.65}
.dakviewer .legal-note{font-size:11px;color:var(--muted);line-height:1.65;max-width:780px;margin:15px 0 0}
.dakviewer dialog{border:0;border-radius:18px;padding:0;width:min(1200px,96vw);max-height:94dvh;background:var(--wash);color:var(--ink);box-shadow:0 30px 100px #0004}
.dakviewer dialog::backdrop{background:#081b31bf;backdrop-filter:blur(6px)}
.dakviewer .dialog-bar{display:flex;align-items:center;justify-content:space-between;padding:15px 20px}
.dakviewer .dialog-bar p{font-size:14px;font-weight:700;margin:0}
.dakviewer .dialog-bar button{width:44px;height:44px;display:grid;place-items:center;border:1px solid #d2dce7;background:#fff;border-radius:50%;color:var(--ink)}
.dakviewer .dialog-img{width:100%;height:auto;max-height:calc(94dvh - 75px);object-fit:contain;display:block;mix-blend-mode:multiply}
.dakviewer .image-error{display:none;position:absolute;inset:20%;padding:20px;text-align:center;background:white;border:1px solid var(--line);border-radius:10px;font-size:14px;z-index:4}
.dakviewer .image-error.is-visible{display:grid;place-items:center}
.dakviewer .image-error button{border:0;background:var(--blue);color:white;padding:10px 16px;border-radius:8px;min-height:44px}
@media(min-width:1600px){.dakviewer main{padding-top:62px}.dakviewer .explorer{grid-template-columns:minmax(0,1fr) 350px;gap:42px}.dakviewer .rail{padding-top:20px}.dakviewer .layer-button{min-height:64px}}
@media(max-width:1100px){.dakviewer main{padding:38px 30px 24px}.dakviewer header{padding:22px 30px}.dakviewer .intro{align-items:start;flex-direction:column;gap:22px}.dakviewer .explorer{grid-template-columns:minmax(0,1fr) 280px;gap:24px}.dakviewer .rail{padding-top:0}.dakviewer .layer-button{padding:12px 6px;gap:9px;min-height:54px}.dakviewer .detail{padding-top:21px}.dakviewer .detail h3{font-size:21px}.dakviewer .detail p{font-size:13px}.dakviewer .material{display:none}}
@media(max-width:760px){.dakviewer header{padding:20px 20px;height:78px}.dakviewer header img{width:132px}.dakviewer header a{font-size:11px}.dakviewer header a svg{width:14px}.dakviewer main{padding:30px 18px 22px}.dakviewer h1{font-size:34px;letter-spacing:-1.2px;max-width:380px}.dakviewer .intro{gap:21px;margin-bottom:20px}.dakviewer .intro p{font-size:14px;line-height:1.65}.dakviewer .roof-types{width:100%}.dakviewer .roof-types button{flex:1;padding:13px 8px;font-size:13px;gap:7px}.dakviewer .explorer{display:flex;flex-direction:column;gap:23px}.dakviewer .studio, .dakviewer .rail{width:100%}.dakviewer .studio{border-radius:15px}.dakviewer .studio-bar{padding:13px 15px 3px}.dakviewer .model-caption{font-size:12px}.dakviewer .zoom-button{width:40px;height:40px}.dakviewer .scene{width:100%}.dakviewer .scene-note{font-size:11px;margin:5px 0 14px;line-height:1.5;min-height:17px;padding:0 13px}.dakviewer .controls{padding:0 12px 17px;gap:7px}.dakviewer .controls button{font-size:12px;gap:6px;padding:10px 12px}.dakviewer .controls button svg{width:16px;height:16px}.dakviewer .pin{pointer-events:none}.dakviewer .pin:not([aria-pressed=true]){opacity:0}.dakviewer .pin span{width:26px;height:26px;font-size:11px}.dakviewer .pin[aria-pressed=true] span{box-shadow:0 0 0 4px #155eef23}.dakviewer .rail-top{margin:0 0 10px}.dakviewer .rail-top h2{font-size:15px}.dakviewer .rail-top span{font-size:11px}.dakviewer .layer-list{display:flex;overflow-x:auto;gap:7px;padding:2px 0 11px;scrollbar-width:thin;scrollbar-color:#ccd9e8 transparent;scroll-snap-type:x proximity}.dakviewer .layer-list li{border:0;flex:0 0 auto;scroll-snap-align:start}.dakviewer .layer-button{border:1px solid var(--line);border-radius:9px;min-height:46px;padding:9px 11px;gap:8px;max-width:220px}.dakviewer .layer-button[aria-pressed=true]{border-color:#bcd0fa}.dakviewer .layer-name{font-size:12px;white-space:nowrap}.dakviewer .layer-number{width:23px;height:23px;font-size:11px}.dakviewer .detail{padding:19px 2px 0}.dakviewer .detail h3{font-size:25px;margin-bottom:10px}.dakviewer .detail p{font-size:14px}.dakviewer .detail-label{margin-bottom:9px}.dakviewer .inspect{margin-top:14px;padding-top:14px}.dakviewer .inspect p{font-size:12px}.dakviewer .legal-note{font-size:10px;line-height:1.7;margin-top:20px}.dakviewer .contact{margin-top:22px;flex-direction:column;align-items:stretch;gap:17px;padding-top:23px}.dakviewer .contact h2{font-size:18px}.dakviewer .contact a{justify-content:center;font-size:13px}.dakviewer .demo-tag{margin-top:18px}.dakviewer .dialog-bar{padding:10px 13px}.dakviewer .dialog-bar p{font-size:12px}.dakviewer .dialog-bar button{width:40px;height:40px}.dakviewer dialog{width:96vw;border-radius:12px}}
@media(prefers-reduced-motion:reduce){.dakviewer *, .dakviewer *:before, .dakviewer *:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.dakviewer .roof-image{transform:none}}

/* rail iets ruimer dan in het losse demopakket: binnen .wrap is de kolom
   smaller, waardoor de materiaalstaaltjes tegen de rand aan kwamen. */
@media (min-width: 1101px) { .dakviewer .explorer { grid-template-columns: minmax(0, 1fr) 360px; } }

/* Nummers op het dak blijven op een telefoon zichtbaar en aantikbaar. Het
   demopakket zette ze onder 760px uit, waardoor er nog één los nummer op het
   dak stond. De punten liggen verticaal ongeveer 30px van elkaar, dus het
   raakvlak is 28px: dan overlappen ze niet. De lijst met lagen eronder blijft
   het ruime alternatief (46px hoog). */
@media (max-width: 760px) {
  /* raakvlak schaalt mee met de tekening: de punten liggen op een telefoon
     maar 11% van de beeldhoogte uit elkaar, dus een vaste 44px overlapt */
  .dakviewer .pin { pointer-events: auto; width: 30px; height: 10%; min-height: 18px; max-height: 30px }
  .dakviewer .pin:not([aria-pressed=true]) { opacity: 1 }
  .dakviewer .pin span { width: 21px; height: 21px; font-size: 10px; border-width: 1.5px; box-shadow: 0 1px 7px #1028443d }
  .dakviewer .pin[aria-pressed=true] span { box-shadow: 0 0 0 3px #155eef2e, 0 2px 10px #10284430 }
  /* op een touchscreen blijft :hover na een tik hangen */
  .dakviewer .pin:hover span { background: #fff; color: var(--ink) }
  .dakviewer .pin[aria-pressed=true]:hover span { background: var(--blue); color: #fff }
}

/* --- Homepage: compacte verwijzing naar de dakopbouw ---------------------- */
.dak-band { background: var(--licht); }
.dakband { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.dakband-beeld img { width: 100%; height: auto; display: block; }
.dakband-tekst h2 { margin-bottom: 14px; }
.dakband-tekst p { color: var(--muted); margin-bottom: 14px; }
.dakband-tekst .btn { margin-top: 12px; }
/* Op een telefoon eerst de kop, dan de render: staand neemt het beeld anders
   het hele scherm in en zie je niet waar de sectie over gaat. */
@media (max-width: 860px) {
  .dakband { grid-template-columns: 1fr; gap: 24px; }
  .dakband-tekst { order: 1; }
  .dakband-beeld { order: 2; }
  .dakband-beeld img { max-height: 46vh; width: auto; max-width: 100%; margin: 0 auto; }
}

/* Onder 620px is een tekstkolom naast een tekstkolom te smal om te lezen:
   elke stap wordt dan een rij met het medaillon ernaast. */
@media (max-width: 620px) {
  .stappen { grid-template-columns: 1fr; gap: 24px; margin-top: 38px; }
  .stap { display: grid; grid-template-columns: 78px 1fr; grid-template-rows: auto 1fr;
    column-gap: 18px; row-gap: 5px; text-align: left; align-items: start; }
  .stap-beeld { grid-row: span 2; width: 78px; height: 78px; margin: 0; }
  .stap-beeld > svg { width: 33px; height: 33px; }
  .stap-nr { width: 27px; height: 27px; font-size: .72rem; border-width: 2px; right: 0; bottom: 0; }
  .stap h3 { font-size: 1.06rem; margin-bottom: 0; align-self: start; }
  .stap p { max-width: none; margin-inline: 0; font-size: .94rem; }
}