/* Lettertypes staan op onze eigen server, niet bij Google. Zie
   zet-fonts-lokaal.js voor het waarom en hoe je ze vernieuwt. */
/* latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/k3kPo8UDI-1M0wlSV9XAw6lQkqWY8Q82sLyTOxK-vA.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/k3kPo8UDI-1M0wlSV9XAw6lQkqWY8Q82sLydOxI.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/k3kPo8UDI-1M0wlSV9XAw6lQkqWY8Q82sLyTOxK-vA.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/k3kPo8UDI-1M0wlSV9XAw6lQkqWY8Q82sLydOxI.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/k3kPo8UDI-1M0wlSV9XAw6lQkqWY8Q82sLyTOxK-vA.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/k3kPo8UDI-1M0wlSV9XAw6lQkqWY8Q82sLydOxI.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/k3kPo8UDI-1M0wlSV9XAw6lQkqWY8Q82sLyTOxK-vA.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/k3kPo8UDI-1M0wlSV9XAw6lQkqWY8Q82sLydOxI.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(fonts/cY9AfjOCX1hbuyalUrK439DyjJBG.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(fonts/cY9AfjOCX1hbuyalUrK4397yjA.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/cY9AfjOCX1hbuyalUrK439DyjJBG.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/cY9AfjOCX1hbuyalUrK4397yjA.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root{
  --ink-900:#141416; --ink-800:#1e1e21; --ink-700:#4a4741; --ink-500:#6a5b50; --ink-400:#b8b4ad; --hero-bg:#141416;
  --accent:#98702f; --accent-hover:#ad8236; --accent-soft:#efe6d4; --accent-tint:#f7f2e8;
  /* kleine goudkleurige tekst: donkerder op licht, lichter op donker — beide 4.5:1 */
  --accent-ink:#8a6428;
  --surface:#f4f2ec; --white:#fff; --line:rgba(20,20,22,.17);
  --r-sm:2px; --r-md:3px;
  --serif:Newsreader,Georgia,serif; --sans:Archivo,system-ui,sans-serif;
  --max:1400px;
  /* Alleen voor de balk bovenaan en de hero. Op een breed scherm stond de kop
     anders 316 px van de rand met een lettergrootte die al op zijn plafond zat,
     en dan oogt hij klein en weggeduwd. Balk en hero delen dezelfde maat, zodat
     het logo en de kop links op één lijn blijven staan. */
  --max-breed:1760px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans);background:var(--white);color:var(--ink-900);-webkit-font-smoothing:antialiased;overflow-x:hidden}
.wrap{max-width:var(--max);margin:0 auto;padding:0 64px}
@media(max-width:800px){.wrap{padding:0 20px}}

h1,h2,h3{font-family:var(--serif);font-weight:300;letter-spacing:-.02em;line-height:1.1}
h1{font-size:clamp(40px,5.4vw,68px);line-height:1.03;letter-spacing:-.018em}
h2{font-size:clamp(32px,3.8vw,50px)}
h3{font-size:clamp(21px,1.9vw,26px);line-height:1.25}
p{font-size:17px;line-height:1.68;max-width:60ch;color:var(--ink-700)}
.over{font:500 12px/1.4 var(--sans);letter-spacing:.15em;text-transform:uppercase;color:var(--accent-ink)}
.dark .over{color:var(--accent-hover)}
.lead{font-size:20px;line-height:1.6}

/* ---------- knoppen: rustiger, met een pijl die meeschuift ---------- */
.btn{position:relative;display:inline-flex;align-items:center;gap:11px;padding:17px 32px;
  border-radius:var(--r-sm);font:500 13px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;
  cursor:pointer;border:1px solid transparent;text-decoration:none;overflow:hidden;
  transition:background .35s cubic-bezier(.22,.8,.3,1),border-color .35s,color .35s,transform .35s,box-shadow .35s}
.btn::after{content:"→";font-size:14px;transform:translateX(-4px);opacity:.6;
  transition:transform .35s cubic-bezier(.22,.8,.3,1),opacity .35s}
.btn:hover::after{transform:translateX(2px);opacity:1}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--accent);color:#fff;border-color:var(--accent);
  box-shadow:0 1px 0 rgba(255,255,255,.14) inset,0 8px 22px rgba(152,112,47,.22)}
.btn-primary:hover{background:var(--accent-hover);border-color:var(--accent-hover);
  transform:translateY(-2px);box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 14px 32px rgba(152,112,47,.30)}
.btn-ghost{background:transparent;color:var(--ink-900);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--ink-900);transform:translateY(-2px)}
.btn-on-dark{background:rgba(255,255,255,.04);color:#fff;border-color:rgba(255,255,255,.34);
  backdrop-filter:blur(6px)}
.btn-on-dark:hover{border-color:rgba(255,255,255,.75);background:rgba(255,255,255,.10);transform:translateY(-2px)}

/* fijne haarlijn boven elke sectiekop — klein detail, veel effect */
.sec-head .over{position:relative;padding-left:52px}
.sec-head .over::before{content:"";position:absolute;left:0;top:50%;width:38px;height:1px;background:var(--accent);opacity:.55}
.dark .sec-head .over::before{opacity:.8}

/* subtiele korrel over donkere vlakken: haalt de digitale vlakheid eruit */
.dark::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  opacity:.16;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E")}
.dark{position:relative}
.dark .wrap{position:relative;z-index:2}

/* ---------- oneindige beeldband ---------- */
.marquee{position:relative;padding:0;overflow:hidden;background:var(--ink-900)}
.marquee .track{display:flex;width:max-content;animation:slide 46s linear infinite}
.marquee:hover .track{animation-play-state:paused}
.marquee figure{position:relative;width:clamp(300px,26vw,460px);aspect-ratio:4/3;margin-right:14px;overflow:hidden;flex:none}
.marquee img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(.15) brightness(.92);transition:filter .5s,transform .8s}
.marquee figure:hover img{filter:none;transform:scale(1.04)}
.marquee figcaption{position:absolute;left:0;right:0;bottom:0;padding:18px 20px;
  background:linear-gradient(transparent,rgba(10,10,12,.85));color:#fff;
  font:500 12px/1.4 var(--sans);letter-spacing:.08em;text-transform:uppercase}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.marquee .track{animation:none}}
.marquee .edge{position:absolute;top:0;bottom:0;width:14vw;z-index:3;pointer-events:none}
.marquee .edge.l{left:0;background:linear-gradient(90deg,var(--ink-900),transparent)}
.marquee .edge.r{right:0;background:linear-gradient(-90deg,var(--ink-900),transparent)}

/* ---------- scroll-reveal ---------- */
.rv{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.22,.8,.3,1),transform .8s cubic-bezier(.22,.8,.3,1)}
.rv.in{opacity:1;transform:none}
.rv[data-d="1"]{transition-delay:.09s}.rv[data-d="2"]{transition-delay:.18s}
.rv[data-d="3"]{transition-delay:.27s}.rv[data-d="4"]{transition-delay:.36s}
.rv[data-d="5"]{transition-delay:.45s}
/* zonder JavaScript blijft alles zichtbaar: de klasse js wordt door script gezet */
html:not(.js) .rv{opacity:1;transform:none;transition:none}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}

/* ================= HEADER ================= */
header{position:fixed;inset:0 0 auto 0;z-index:80;transition:background .35s,backdrop-filter .35s,border-color .35s}
header .bar{display:flex;align-items:center;justify-content:space-between;max-width:var(--max-breed);margin:0 auto;padding:20px 64px}
header.glass{background:rgba(20,20,22,.62);backdrop-filter:blur(20px) saturate(150%);
  -webkit-backdrop-filter:blur(20px) saturate(150%);border-bottom:1px solid rgba(255,255,255,.09)}
/* Het woordmerk staat in kapitalen via CSS, niet in de HTML. Zo blijft de
   naam in de code leesbaar als "Ata Ramen & Deuren" en kan hij in één keer
   veranderen zonder alle plekken opnieuw te typen. */
.logo{font:700 17px/1 var(--sans);letter-spacing:.18em;color:#fff;text-transform:uppercase;white-space:nowrap}
/* Op een smal scherm passen de naam en de offerteknop niet meer naast elkaar:
   samen 360 px op een scherm van 375. De knop verdwijnt daarom, want onderaan
   staat al een vaste balk met dezelfde knop. Zo houdt de naam de ruimte. */
@media(max-width:600px){
  header .btn{display:none}
  .logo{font-size:14px;letter-spacing:.12em}
}
nav{display:flex;gap:30px}
nav a{font:400 15px/1 var(--sans);color:rgba(255,255,255,.8);text-decoration:none;transition:color .2s}
nav a:hover{color:#fff}
.tel{font:600 15px/1 var(--sans);color:#fff;text-decoration:none;white-space:nowrap}
@media(max-width:1000px){nav,.tel{display:none}header .bar{padding:16px 20px}}

/* ---- Tussenmaat voor de balk (18-09-2026) ----
   De hamburger verschijnt pas onder 1000 px, maar de bureaubladbalk heeft
   minstens 1264 px nodig: logo 248 + menu 517 + rechterblok 371 + 128 randruimte.
   Op alles daartussen — 1280x800, 1152x864, een venster dat niet schermvullend
   staat — liep de inhoud in elkaar: het logo raakte het menu, "Over ons" brak in
   twee regels en de gouden knop werd twee regels hoog.

   Oplossing is krimpen, niet weglaten. Het menu vervangen door een hamburger
   zou op een laptop de zes productpagina's weer wegstoppen, precies wat het
   uitklapmenu moest verhelpen. Het telefoonnummer blijft staan: op een
   dienstpagina is dat het enige wat je bovenaan kunt aantikken.

   nowrap staat buiten de mediaquery: een menu-item hoort nooit te breken. */
nav a,.menu-trigger{white-space:nowrap}
/* De grens ligt op 1360 en niet op de 1264 die strikt nodig is: bij 1300 paste
   de volle maat wel, maar met nog maar 11 px tussen het woordmerk en het menu.
   Technisch heel, visueel geplakt. Boven 1360 blijft er ruim 45 px over. */
@media(min-width:1001px) and (max-width:1360px){
  header .bar{padding:18px 24px}
  nav{gap:18px}
  nav a,.menu-trigger{font-size:14px}
  .logo{font-size:15px;letter-spacing:.10em}
  .tel{font-size:14px}
  header .btn{padding:15px 22px;font-size:12px;gap:8px}
}
/* Onder 1090 px is die ene stap niet genoeg; hier gaat alles nog een maat
   kleiner zodat ook 1024 breed heel blijft. */
@media(min-width:1001px) and (max-width:1090px){
  header .bar{padding:18px 16px}
  nav{gap:12px}
  header .btn{padding:14px 16px;letter-spacing:.04em}
}

/* ---- Gamma-uitklapmenu (17-09-2026) ----
   Waarom: de zes productpagina's waren alleen te vinden via de kaarten op de
   startpagina of via de lijst onderaan een andere dienstpagina. Wie via Google
   op /rolluiken landde — precies waar die pagina voor bedoeld is — zag in de
   balk enkel "Gamma", en dat stuurde hem terug naar de startpagina. Hij moest
   dus weg van de pagina waar hij net was aangekomen om te ontdekken dat we ook
   garagepoorten doen. Nu staan de zes overal in de balk.

   Bewust op klik en niet op zweven: een menu dat vanzelf openklapt zodra je
   muis er langs strijkt, klapt ook open wanneer je dat niet wilde — vooral op
   een laptop met touchpad. Klikken is voorspelbaar.

   Op smalle schermen bestaat dit uitklappen niet: daar staat de lijst gewoon
   ingesprongen open in het hamburgermenu. Zie de regels onder de mediaquery
   verderop. Een tweede verborgen niveau in een menu dat je toch al moet
   openklappen, is een tik te veel. */
.menu-groep{position:relative;display:flex;align-items:center}
.menu-trigger{display:inline-flex;align-items:center;gap:6px;background:none;border:0;padding:0;
  font:400 15px/1 var(--sans);color:rgba(255,255,255,.8);cursor:pointer;transition:color .2s}
.menu-trigger:hover,.menu-trigger[aria-expanded="true"]{color:#fff}
/* Het pijltje kantelt als het paneel openstaat. */
.menu-trigger::after{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);
  transition:transform .25s ease}
.menu-trigger[aria-expanded="true"]::after{transform:translateY(1px) rotate(-135deg)}
@media(prefers-reduced-motion:reduce){.menu-trigger::after{transition:none}}

.submenu{position:absolute;top:calc(100% + 14px);left:-18px;min-width:226px;display:none;
  flex-direction:column;padding:8px;background:var(--ink-900);border:1px solid rgba(255,255,255,.12);
  border-radius:var(--r-sm);box-shadow:0 22px 48px rgba(0,0,0,.42);z-index:90}
.submenu.open{display:flex}
.submenu a{padding:11px 14px;border-radius:6px;font:400 15px/1 var(--sans);
  color:rgba(255,255,255,.82);text-decoration:none;white-space:nowrap;
  transition:background .2s,color .2s}
.submenu a:hover{background:rgba(255,255,255,.08);color:#fff}
/* De pagina waar je nu bent, in het goud van de huisstijl. */
.submenu a[aria-current="page"]{color:var(--accent-hover);font-weight:600}
/* Scheidingslijn onder "Overzicht": dat item gaat naar de kaartenrij op de
   startpagina, de rest naar een eigen pagina. Twee soorten bestemming, dus
   een streepje ertussen. */
.submenu a.overzicht{border-bottom:1px solid rgba(255,255,255,.12);border-radius:6px 6px 0 0;
  margin-bottom:4px;padding-bottom:13px}

/* ---- menuknop (16-09-2026) ----
   Tot vandaag verdween de navigatie onder 1000 px zonder vervanging: op een
   telefoon was er geen enkele manier om naar Vragen, Realisaties of Over ons te
   springen — je kon alleen de hele pagina doorscrollen. Deze knop zet diezelfde
   nav terug als uitklapbaar paneel, zodat er niets nieuws bijkomt dat apart
   onderhouden moet worden: het is dezelfde <nav>, alleen anders getoond.
   De drie streepjes worden een kruis zodra het paneel openstaat. */
.menuknop{display:none;width:44px;height:44px;margin-right:-10px;padding:0;border:0;
  background:transparent;cursor:pointer;flex-direction:column;align-items:center;
  justify-content:center;gap:5px}
.menuknop span{display:block;width:22px;height:2px;background:#fff;border-radius:2px;
  transition:transform .25s ease,opacity .15s ease}
.menuknop[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menuknop[aria-expanded="true"] span:nth-child(2){opacity:0}
.menuknop[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(prefers-reduced-motion:reduce){.menuknop span{transition:none}}

@media(max-width:1000px){
  .menuknop{display:flex}
  /* Het paneel hangt onder de balk. header staat op position:fixed en is dus
     zelf het ankerpunt; top:100% zet het precies onder de balk, ongeacht hoe
     hoog die op dat scherm uitvalt. */
  nav{position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;
    padding:6px 20px 12px;background:var(--ink-900);
    border-bottom:1px solid rgba(255,255,255,.12);box-shadow:0 18px 40px rgba(0,0,0,.34);
    /* 17-09-2026: het menu groeide van zes naar twaalf regels toen de zes
       producten erbij kwamen, en werd daarmee ruim 600 px hoog. Op een toestel
       van 640 px — een gewone Android met de adresbalk in beeld — viel Contact
       onder de onderkant, en omdat dit paneel absoluut gepositioneerd is
       scrolde het niet mee: dat item was simpelweg onbereikbaar. Nu krijgt het
       paneel de resterende schermhoogte als maximum en scrolt het zelf.

       De hoogte van de balk staat in --balk en wordt door het script gemeten,
       niet hier vastgelegd. Een vast getal leek eerst genoeg, maar de balk is
       niet overal even hoog: op deze pagina's 77 px, op de startpagina en op
       smallere schermen minder. Elk vast getal is dus op de helft van de
       pagina's verkeerd. De 80 px hieronder geldt alleen als het script niet
       draait, en is met opzet aan de ruime kant: liever een paneel dat een
       paar pixels korter is dan nodig, dan een item dat je niet kunt bereiken.

       svh en niet vh: bij vh rekent de browser met het scherm zonder
       adresbalk, en dan klopt de grens juist niet op het moment dat die balk
       wél zichtbaar is. -webkit-overflow-scrolling houdt het soepel op iOS,
       overscroll-behavior voorkomt dat de pagina eronder meescrolt zodra je
       binnen het menu het einde bereikt. */
    max-height:calc(100svh - var(--balk, 80px));overflow-y:auto;
    -webkit-overflow-scrolling:touch;overscroll-behavior:contain}
  nav.open{display:flex}
  nav a{padding:15px 2px;font-size:16px;color:#fff;border-bottom:1px solid rgba(255,255,255,.08)}
  nav a:last-child{border-bottom:0}

  /* Gamma op smalle schermen: geen tweede uitklapniveau. De groep wordt een
     gewoon stuk van de lijst en de zes producten staan er ingesprongen onder,
     meteen zichtbaar. Eén tik op het hamburgerteken en je ziet alles. */
  .menu-groep{display:block}
  /* De trigger is hier geen knop meer maar een kopje boven de lijst: hij hoeft
     niets te openen, want de lijst staat al open. Zelfde vorm als de gouden
     bovenschriften elders op de site, zodat het leest als een kopje en niet
     als een knop die niet reageert. */
  .menu-trigger{pointer-events:none;width:100%;padding:15px 2px 9px;
    font:500 12px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;
    color:var(--accent-hover)}
  .menu-trigger::after{display:none}
  .submenu{position:static;display:flex;min-width:0;padding:0 0 6px 14px;margin:0;
    background:none;border:0;border-radius:0;box-shadow:none}
  /* 14 px boven en onder maakt het raakvlak 44 px hoog — de maat die Apple en
     Google aanhouden. Deze items staan tegen elkaar aan zonder tussenruimte,
     dus die paar pixels bepalen of je met een duim het juiste product raakt. */
  .submenu a{padding:14px 2px;border-radius:0;color:#fff;
    border-bottom:1px solid rgba(255,255,255,.08)}
  .submenu a:hover{background:none}
  .submenu a.overzicht{margin-bottom:0;padding-bottom:14px}
  .submenu a:last-child{border-bottom:1px solid rgba(255,255,255,.08)}
}

/* ================= HERO ================= */
/* tall scroll-container: de hero blijft plakken terwijl je erdoorheen scrollt */
/* 19-08-2026: van 450vh naar 550vh. De film speelt niet af maar hangt aan je
   scrollpositie, dus deze hoogte bepaalt hoe lang de bezoeker erover doet — de
   lengte van de clip doet dat niet. Prijs van trager: dezelfde 186 beelden over
   een langere baan, dus 21,8 px scroll per beeld in plaats van 16,9. Mobiel
   draait al jaren op 34,6 zonder klachten, dus dit is ruim veilig. Komt er een
   film met meer beelden, dan mag deze hoogte verder omhoog.

   19-08-2026, tweede stap: 550vh naar 800vh. De scrollbaan is nu 6300 px, dus
   33,9 px per beeld — evenveel als de mobiele versie, waar het stappen nooit
   is opgevallen. Dit is het maximum met 186 beelden. Komt de nieuwe film met
   280 beelden, dan zakt dit vanzelf naar 22,5 en mag 900vh of meer. */
/* 22-08-2026: van 800vh naar één scherm. De film wordt niet meer door de
   scroll aangedreven maar speelt zichzelf af, dus er is geen scrollbaan meer
   nodig. Waarom dat veranderd is staat in docs/OVERDRACHT.md hoofdstuk 11. */
.hero-scroll{position:relative;height:100vh;height:100lvh;background:var(--hero-bg)}
/* Hoogte van de hero: lvh, niet svh.
   svh = small viewport height = de hoogte MET de adresbalk van de browser
   uitgeklapt. Zodra je op een telefoon begint te scrollen, klapt die balk in
   en wordt het zichtbare gebied groter — maar een element van 100svh groeit
   niet mee. Precies de hoogte van die balk bleef over als een strook waar de
   paginakleur (crème) doorheen kwam. Op een laptop zie je het nooit, want daar
   verandert er niets aan de vensterhoogte.

   lvh = large viewport height = de hoogte MET de balk ingeklapt. Daarmee is de
   hero altijd minstens zo hoog als wat er zichtbaar is. Staat de balk wél
   uitgeklapt, dan valt de onderste strook van het beeld erachter — dat is een
   beeldvullende film, dus daar gaat niets verloren.

   Niet dvh: die meet mee tijdens het in- en uitklappen, en dan wijzigt de
   canvasmaat middenin een scrollbeweging. fit() zet de canvas dan opnieuw op
   en tekent alles over, op precies het verkeerde moment.

   De regel staat er twee keer. Browsers die lvh niet kennen negeren de tweede
   regel en houden 100vh — en dat is op iOS van oudsher net de grote maat. Laat
   de eerste regel dus staan; zonder die terugval krijgt een oudere browser
   helemaal geen hoogte en klapt de hero dicht. */
.hero{position:sticky;top:0;height:100vh;height:100lvh;min-height:620px;background:var(--hero-bg);overflow:hidden}
/* Terugvallaag ONDER de video. Dit is met opzet het LAATSTE beeld van de film
   — de gevel — en niet het eerste. Wie geen video krijgt (verminder beweging,
   of een browser die weigert af te spelen) hoort meteen op de eindstand uit te
   komen, want daar hoort de tekst bij. Zolang de video wel speelt ligt hij er
   volledig overheen en zie je deze laag nooit. */
.hero-img{position:absolute;inset:0;background:center center/cover no-repeat}
/* Het beeld wordt pas ingeladen als het ook echt getoond wordt. Zet je het
   hier standaard neer, dan haalt elke bezoeker 182 kB op die volledig achter
   de video verdwijnt — precies in de seconden dat de mp4 om bandbreedte
   vecht. .toon komt van het script (geen video), html:not(.js) vangt de
   bezoeker zonder javascript op. */
.hero-img.toon, html:not(.js) .hero-img{background-image:url('img/hero-eind-smal-v13.webp')}
@media(min-width:901px){
  .hero-img.toon, html:not(.js) .hero-img{background-image:url('img/hero-eind-v4.webp')}
}
/* De donkere sluier ligt er om de kop leesbaar te houden. Zolang er geen kop
   is, hoort hij er ook niet te liggen: het middenstuk van de film speelt binnen
   met het rolluik dicht en is al donker — met de sluier erover werd dat een
   modderig vlak. Hij komt nu mee op met de tekst, in dezelfde beweging. */
.hero-grad{opacity:0;transition:opacity 1.2s ease}
.hero.toon .hero-grad{opacity:1}
.hero-grad{position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(12,12,14,.94) 0%,rgba(12,12,14,.72) 42%,rgba(12,12,14,.28) 72%,rgba(12,12,14,.5) 100%)}
/* Geen opacity-overgang op de video. De poster van het video-element IS het
   eerste beeld van de film, dus er valt niets te overbruggen; een fade zou
   juist de gevel eronder even laten doorschijnen. */
#heroVid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* De tekst wacht tot we op de gevel uitkomen. De reveal-waarnemer zet .in er
   meteen op — de hero staat immers in beeld — maar zolang .wacht op de laag
   staat wint deze regel en blijft alles op zijn beginstand. Weghalen laat de
   bestaande overgang van .rv en de trapjes van data-d hun werk doen, dus de
   tekst komt in dezelfde volgorde binnen als overal elders op de pagina. */
.hero-inner.wacht .rv{opacity:0;transform:translateY(26px)}
.scrollhint{opacity:0;transition:opacity .9s ease .5s}
.scrollhint.toon{opacity:1}
.hero-inner{position:relative;z-index:3;height:100%;display:flex;align-items:center}
.hero-inner .wrap{width:100%;max-width:var(--max-breed)}
/* Eigen trap voor de hero: de algemene h1 loopt vast op 68 px, en dat is op
   1600 px en breder te klein voor een beeldvullende kop. */
.hero h1{color:#fff;max-width:14ch;margin:20px 0 24px;font-size:clamp(44px,6.2vw,96px)}
/* Hangend aanhalingsteken. Een openend " op het begin van een regel duwt de
   letters naar rechts: gemeten 22,6 px op een letter van 68 px, precies de
   breedte van het teken. Regel 2 begon daardoor zichtbaar verder dan regel 1.
   Deze marge laat het teken in de kantlijn hangen, zodat de n van "nieuw"
   onder de N van "Nieuw" uitkomt. In em, dus het klopt op elke schermbreedte:
   de kop schaalt met clamp(). */
.hero h1 .hang{margin-left:-.33em}
.hero p{color:rgba(255,255,255,.74);max-width:44ch}
.hero .cta{display:flex;gap:12px;margin:36px 0 44px;flex-wrap:wrap}
.trust{display:flex;gap:28px;flex-wrap:wrap;padding-top:28px;border-top:1px solid rgba(255,255,255,.16);max-width:660px}
.trust span{font:400 13px/1.4 var(--sans);color:rgba(255,255,255,.68)}
.stars{color:var(--accent);letter-spacing:2px;font-style:normal}
.scrollhint{position:absolute;left:50%;bottom:30px;transform:translateX(-50%);z-index:3;
  font:600 10px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.62);text-align:center}
.scrollhint i{display:block;width:1px;height:28px;background:rgba(255,255,255,.35);margin:10px auto 0;
  transform-origin:top;animation:drop 2s ease-in-out infinite}

/* ---- HERO OP EEN TELEFOON (22-08-2026) ----------------------------------
   Twee klachten van de eigenaar, allebei terug te voeren op hetzelfde:
   "SCROLL" viel buiten het scherm, en de regel met CE-gecertificeerd liep er
   soms overheen.

   Oorzaak. De hero staat op 100lvh. lvh is de hoogte MET de adresbalk
   INGEKLAPT — dat is met opzet, want met svh bleef er een witte strook onder
   de hero staan zodra je begon te scrollen (zie docs/OVERDRACHT.md, "Witte
   strook onder de hero"). Maar zolang die balk nog uitgeklapt staat — en dat
   is precies bij het openen van de pagina — zie je van die 100lvh maar
   ongeveer 85%. De onderste 120 px vielen dus buiten beeld.

   Gemeten op 375x812 zonder balk: inhoud liep tot 690, de hint stond op
   734-782. Dat past. Trek er een adresbalk van 130 px af en de hint staat
   volledig buiten beeld terwijl de inhoud tot tegen de rand komt.

   Oplossing. De ACHTERGROND (video, terugvalbeeld) blijft 100lvh, dus geen
   witte strook. Alleen de INHOUD rekent met svh, de hoogte MET de balk. Dan
   staat alles altijd binnen het zichtbare deel, balk uit of in.

   De padding onderaan houdt plaats vrij voor de hint. Zonder die ruimte
   centreert de tekst over de volle hoogte en schuift hij tot onder de hint —
   dat was de overlapping. Bij een korte adresbalk wordt het geheel gewoon wat
   ruimer; de hint blijft op zijn plek want die rekent met dezelfde svh. */
@media(max-width:1000px){
  /* De vaste balk onderaan (.mobilebar, 45 px) ligt OVER de hero heen, dus de
     onderste 45 px van de film zat erachter — 5 % van het beeld, en juist het
     stuk waar de vloer en de dorpel in zitten. Gemeld 29-08-2026.

     De film stopt nu net boven de balk. Onder de video blijft --hero-bg staan;
     dat is dezelfde donkere kleur als de balk, dus er ontstaat geen strook, ook
     niet terwijl de adresbalk van de browser nog uitgeklapt is. De hero zelf
     blijft op 100lvh — dat mag niet veranderen, anders komt de witte strook
     terug die in hoofdstuk 11 beschreven staat. */
  /* AANGEVULD 30-08-2026. calc(100% - 45px) rekende met de hero, en die
     staat op 100lvh: de hoogte ZONDER adresbalk. Bij het openen van de pagina
     staat die balk er nog wel, dus van de 799 px film zag je er maar 714 — de
     onderste 85 px kwamen pas tevoorschijn zodra je scrolde en de balk wegging.
     Gemeld met twee schermafdrukken naast elkaar.

     dvh beweegt mee met de adresbalk, dus de film past altijd precies. lvh
     blijft als terugval staan voor oudere toestellen (dvh is iOS 16.4+); die
     krijgen het oude gedrag, niet iets kapots.

     De HERO zelf blijft op 100lvh. Daar niet aankomen: met svh of dvh op de
     hero kwam de witte strook terug die in hoofdstuk 11 is opgelost. */
  /* TERUGGEDRAAID 30-08-2026. Hier stond even dvh, een hoogte die meebeweegt
     met de adresbalk. Dat loste op dat de onderkant bij het laden buiten beeld
     viel, maar bracht iets ergers: zodra je begint te scrollen groeit het
     venster van 714 naar 844 px, moet de film mee groeien, en verandert de
     uitsnede. De eigenaar zag dat als meebewegen en licht inzoomen, en zei:
     zo lijkt het alsof het hapert.

     Het kan niet allebei. Een beeldvullende film in een venster dat van
     hoogte verandert, moet ofwel meegroeien (beweging) ofwel blijven staan
     (dan klopt de uitsnede in een van de twee toestanden niet). De eigenaar
     koos vast: een muurvast beeld weegt zwaarder dan de onderste tiende die
     bij het openen onder de rand hangt.

     Niet opnieuw op dvh zetten zonder het hem te vragen.

     Let op bij het nameten: in een nagebootste browser is de vensterhoogte
     vast, dus lvh, svh en dvh zijn daar aan elkaar gelijk. Dit verschil is
     hier niet te reproduceren, alleen op een echt toestel.

     Nog niet geprobeerd, als het gemis onderaan ooit toch stoort: svh in
     plaats van lvh. Dan past de film bij het laden en staat hij ook vast,
     maar verschijnt er een donkere strook zodra de adresbalk wegschuift. */
  /* TERUGGEDRAAID 30-08-2026, tweede keer. Hier stond 45 px minder hoog, om
     de vaste knoppenbalk vrij te houden. Dat werkte zolang de balk er precies
     overheen lag, maar zodra je begint te scrollen schuift die balk mee met
     het scherm en blijft er een zwarte strook achter tussen de film en de
     sectie eronder. De eigenaar zag hem meteen.

     Nu loopt de film weer over de volle hoogte van de hero en ligt de balk
     eroverheen. De onderste 45 px van de film zitten dan achter de knoppen —
     dat is grind of vloer, nooit een deur of raam. Geen scherpteverlies: het
     vak wordt hoger, niet kleiner, dus de telefoon zoomt zelfs iets minder in.

     Wil je dit ooit weer terugzetten: dan komt die strook terug. Los hem dan
     op door de balk mee te laten scrollen of door de hero eronder dezelfde
     kleur te geven, niet door de film korter te maken. */
}
@media(max-width:900px){
  /* 45 px is de vaste balk met Bellen / WhatsApp / Prijsindicatie onderaan
     (.mobilebar). Die ligt over de hero heen, dus die hoogte telt mee bij
     het vrijhouden van ruimte — anders staat de hint eronder. */
  /* padding-top houdt de bovenregel los van het logo in de kopbalk (46 px
     hoog, ligt vast over de hero heen). Zonder die ruimte schoof de regel
     RAMEN & DEUREN OP MAAT er tegenaan zodra de hoogte krap werd. */
  .hero-inner{height:100%;height:100svh;padding:56px 0 112px;box-sizing:border-box}
  .hero p{font-size:15px}
  .scrollhint{bottom:auto;top:calc(100svh - 107px)}
  /* Wat compacter, zodat het ook op een kleine telefoon (SE, 667 px hoog)
     past zonder dat er iets tegen elkaar aan komt. */
  .hero h1{margin:14px 0 18px}
  .hero .cta{margin:26px 0 30px}
  .trust{gap:8px 20px;padding-top:20px}
  .trust span{font-size:12px}
}
/* Korte telefoon (SE, of een groter toestel met de adresbalk uit EN het
   toetsenbord... nee: gewoon een klein scherm). Gemeten op 375x570 kwam de
   bovenregel 4 px boven de rand uit en bleef er 11 px tussen de tekst en de
   hint. Dan gaat de hint eruit — die is versiering, de tekst niet — en de
   ruimte die hij bezet houdt komt vrij voor de inhoud. */
@media(max-width:900px) and (max-height:660px){
  .hero-inner{padding-bottom:60px}
  .scrollhint{display:none}
}
@keyframes drop{0%,100%{transform:scaleY(.3);opacity:.35}50%{transform:scaleY(1);opacity:1}}

/* ================= CIJFERS (donker, sluit aan op hero) ================= */
.stats{background:var(--ink-800);border-top:1px solid rgba(255,255,255,.07)}
.stats .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;padding:64px 0}
.stat b{display:block;font:300 40px/1.05 var(--serif);letter-spacing:-.02em;color:#fff}
.stat span{display:block;margin-top:8px;font:400 14px/1.5 var(--sans);color:rgba(255,255,255,.5)}
@media(max-width:800px){.stats .grid{grid-template-columns:1fr 1fr;gap:28px;padding:44px 0}.stat b{font-size:32px}}

/* ================= SECTIES ================= */
section{padding:140px 0}

/* ---------- KAART (25-08-2026) --------------------------------------------
   Een brede, lage band onderaan de pagina met de werkelijke ligging erin.
   Bewust breder dan hoog: op een kaart van een winkelpand is de straat het
   onderwerp, niet de lucht erboven. Vandaar verhouding 3,4:1 op een breed
   scherm.

   De sectie heeft GEEN padding: de kaart loopt van rand tot rand door. Dat is
   de reden dat hij niet in .wrap staat maar er zelf omheen gaat, met een
   los kaartje erop dat wél op de kolombreedte van de rest uitkomt.

   Het kaartje ligt links omdat de speld van Google midden in het kader valt;
   rechts zou het die afdekken. Op een telefoon gaat het onder de kaart staan,
   want daar is er geen breedte om naast iets te leggen.

   LET OP — dit is een venster van Google. Zodra het laadt gaat het IP-adres
   van de bezoeker naar Google. Daarom staat er loading="lazy" op: het venster
   wordt pas opgehaald als de bezoeker er bijna is, niet bij het openen van de
   pagina. Zie docs/OVERDRACHT.md hoofdstuk 12 voor wat dat betekent voor de
   privacyverklaring. */
.kaart{padding:0;position:relative;background:var(--ink-900)}
.kaart-band{position:relative;width:100%;aspect-ratio:34/10;min-height:340px;max-height:520px;overflow:hidden}
.kaart-band iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;
  filter:grayscale(.32) contrast(1.04)}
/* Verloop links, zodat het kaartje op een rustige ondergrond ligt en niet op
   straatnamen. Klikken moet er dwars doorheen kunnen, anders kun je de kaart
   niet meer verschuiven. */
.kaart-band::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(20,20,22,.88) 0%,rgba(20,20,22,.66) 26%,rgba(20,20,22,0) 52%)}
/* Het kaartje is een BROER van de band, geen kind. Als kind zat het gevangen
   in de vaste hoogte van de band en kon het op een telefoon niet onder de
   kaart gaan staan; het lag dan half over de straatnamen. Nu ligt het op
   een breed scherm absoluut over de sectie heen, en valt het op een smal
   scherm vanzelf terug in de gewone stroom eronder. */
.kaart-kaartje{position:absolute;z-index:2;left:0;right:0;top:0;height:100%;
  display:flex;align-items:center;pointer-events:none}
.kaart-kaartje .wrap{width:100%}
.kaart-kaartje .doos{max-width:360px;pointer-events:auto}
.kaart-kaartje h2{color:#fff;font-size:clamp(26px,2.4vw,36px);margin:14px 0 10px;line-height:1.12}
.kaart-kaartje p{color:rgba(255,255,255,.74);margin-bottom:24px}
.kaart-kaartje .over{color:var(--accent-hover)}
@media(max-width:900px){
  /* Geen breedte om iets naast de kaart te leggen: kaart boven, gegevens
     eronder op de donkere achtergrond van de sectie zelf. */
  .kaart-band{aspect-ratio:auto;height:300px;min-height:0;max-height:none}
  .kaart-band::before{background:linear-gradient(180deg,rgba(20,20,22,.5) 0%,rgba(20,20,22,0) 30%)}
  .kaart-kaartje{position:static;height:auto;display:block;padding:36px 0 46px}
  .kaart-kaartje .doos{max-width:none}
}
@media(max-width:800px){section{padding:80px 0}}
.sec-head{margin-bottom:64px;max-width:660px}
.sec-head h2{margin:20px 0 20px}
.sec-head .lead{color:var(--ink-500)}
.dark .sec-head .lead{color:rgba(255,255,255,.6)}
.dark{background:var(--ink-900);color:#fff}
.dark h2,.dark h3{color:#fff}.dark p{color:rgba(255,255,255,.66)}
.tinted{background:var(--surface)}

/* ---- configurator: eigen vlak, duidelijk afgebakend ---- */
.config{background:var(--accent-tint)}
.cfg{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);
  padding:52px;max-width:920px;box-shadow:0 18px 50px rgba(20,20,22,.06)}
@media(max-width:800px){.cfg{padding:26px}}
.cfg-step{font:600 11px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--accent-ink);margin-bottom:18px}
.cfg h3{margin-bottom:28px}
.bar-progress{height:2px;background:var(--line);margin-bottom:30px;position:relative;overflow:hidden}
.bar-progress i{position:absolute;inset:0 auto 0 0;background:var(--accent);transition:width .45s cubic-bezier(.22,.8,.3,1)}
.opts{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:760px){.opts{grid-template-columns:1fr}}
/* color hoort er expliciet bij: een <button> erft geen kleur van de pagina.
   Zonder deze regel pakt hij de systeemknopkleur — op iOS is dat blauw. */
.opt{text-align:left;background:#fff;color:var(--ink-900);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:20px 22px;cursor:pointer;font-family:var(--sans);transition:border-color .18s,background .18s,transform .18s}
.opt:hover{border-color:var(--accent);background:var(--accent-tint);transform:translateY(-2px)}
.opt.aan{border-color:var(--accent);background:var(--accent-soft)}
.opt.aan b::after{content:" ✓";color:var(--accent-ink)}
.opt[disabled]{opacity:.45;cursor:not-allowed}
.opt[disabled]:hover{border-color:var(--line);background:#fff;transform:none}
.opt-door{border-style:dashed}
.opt b{display:block;font:600 16px/1.3 var(--sans);margin-bottom:6px}
.opt span{font:400 13px/1.45 var(--sans);color:var(--ink-500)}
.cfg-foot{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:28px;
  padding-top:18px;border-top:1px solid var(--line);flex-wrap:wrap}
.cfg-foot small{font:400 13px/1.4 var(--sans);color:var(--ink-500)}
/* "Vorige stap" in de prijsindicatie. De padding staat er voor de duim: zonder
   die regel is het raakvlak 13 px hoog — de hoogte van de letters zelf — en dat
   is met een vinger nauwelijks te raken. Negatieve marges houden de knop
   optisch op dezelfde plaats staan als voorheen. */
.linkish{background:none;border:0;font:400 13px/1 var(--sans);color:var(--ink-500);cursor:pointer;
  text-decoration:underline;padding:14px 10px;margin:-14px -10px}
.result b{display:block;font:300 clamp(34px,4.4vw,52px)/1.05 var(--serif);color:var(--accent);margin:4px 0 16px;letter-spacing:-.02em}
.fields{display:grid;grid-template-columns:1fr 1fr auto;gap:14px;margin-top:28px}
/* korte AVG-regel onder elk formulier — geen opacity, die stapelt op .dark p */
.privacy{margin-top:14px;font-size:13px;line-height:1.5;color:var(--ink-500)}
.dark .privacy{color:rgba(255,255,255,.72)}
@media(max-width:760px){.fields{grid-template-columns:1fr}}
input,textarea{font:400 15px/1.4 var(--sans);padding:14px;border:1px solid var(--line);
  border-radius:var(--r-sm);background:#fff;color:var(--ink-900);width:100%}
input:focus,textarea:focus{outline:none;border-color:var(--accent)}
/* 17-09-2026: op een iPhone zoomt Safari vanzelf in zodra je een invoerveld
   aantikt waarvan de tekst kleiner is dan 16 px. De pagina springt dan scheef
   en de bezoeker moet zelf terugzoeken — precies op het moment dat hij zijn
   gegevens intypt. 16 px is de grens waarboven dat niet gebeurt; het scheelt
   hier één pixel ten opzichte van de 15 die de rest van het formulier gebruikt,
   dus het valt visueel niet op. Alleen op smalle schermen, want op een
   desktop bestaat het probleem niet. */
@media(max-width:1000px){input,textarea{font-size:16px}}
label{display:block;font:500 12px/1.4 var(--sans);letter-spacing:.07em;text-transform:uppercase;color:var(--ink-500);margin-bottom:7px}

/* ---- kaarten ---- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
@media(max-width:1000px){.cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.cards{grid-template-columns:1fr}}
/* Kolom, zodat .body de resterende hoogte krijgt en de voet er met
   margin-top:auto onderaan tegenaan geduwd kan worden. Zonder dit hangt de
   voet direct onder de tekst, en dan staat hij bij een kaart met één regel
   beschrijving hoger dan bij de buren. */
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;
  display:flex;flex-direction:column;
  box-shadow:0 1px 2px rgba(20,20,22,.04),0 8px 24px rgba(20,20,22,.06);
  transition:transform .25s,box-shadow .25s}
.card:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(20,20,22,.09)}
.card .im{display:block;aspect-ratio:16/11;overflow:hidden;background:#e6e3dc}
.card .im img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.22,.8,.3,1)}
.card:hover .im img{transform:scale(1.045)}
.card .ph{width:100%;height:100%;display:grid;place-items:center;
  font:500 10px/1 var(--sans);letter-spacing:.18em;color:var(--ink-500);text-transform:uppercase}
.card .body{padding:24px;display:flex;flex-direction:column;flex:1}
.card h3{font-size:22px;margin:8px 0}
.card p{font-size:15px;color:var(--ink-500);margin-bottom:20px}
.card .foot{display:flex;justify-content:space-between;align-items:baseline;margin-top:auto;padding-top:15px;border-top:1px solid var(--line)}
.card .price{font:600 15px/1 var(--sans)}
.card .price em{font-style:normal;font-weight:400;color:var(--ink-500)}
.card a{font:500 14px/1 var(--sans);color:var(--accent-ink);text-decoration:none}
/* 04-09-2026: de kaarttitel is een link naar de dienstpagina geworden. Hij
   moet er niet als link uitzien — de hele kaart nodigt al uit — dus houdt hij
   de inktkleur en kleurt hij pas goud bij het aanwijzen. */
.card h3 a{color:inherit;text-decoration:none;transition:color .2s}
.card h3 a:hover{color:var(--accent-ink)}
/* Twee links onderaan in plaats van een prijsregel en één link. Op een smalle
   kaart mogen ze onder elkaar vallen in plaats van tegen elkaar te duwen. */
.card .foot{flex-wrap:wrap;gap:10px 18px}
/* 17-09-2026: op een telefoon waren deze twee links 14 px hoog en stonden ze
   naast elkaar — te klein en te dicht bijeen om zeker de juiste te raken. De
   verticale padding maakt er een raakvlak van ruim 40 px van zonder dat de
   kaart er anders uitziet; de negatieve marge vangt de extra hoogte weer op. */
@media(max-width:1000px){
  .card .foot a{padding:13px 0;margin:-13px 0}
  .card .foot{gap:0 18px}
}

/* ---- techniek ---- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}
@media(max-width:900px){.split{grid-template-columns:1fr;gap:40px}}
.diagram{background:#0e0e10;border:1px solid rgba(255,255,255,.09);border-radius:var(--r-md);padding:28px;text-align:center}
.diagram img{width:100%;max-width:340px;height:auto;display:block;margin:0 auto}
.diagram figcaption{font:500 11px/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.66);margin-top:18px}
.diagrams{display:grid;grid-template-columns:1fr 1fr;gap:20px}

/* ---- comfort: ventilatie en zonwering ---- */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:48px}
.duo figure{margin:0}
.duo img{width:100%;height:clamp(220px,30vh,320px);object-fit:cover;
  border-radius:var(--r-md);display:block;margin-bottom:22px}
.duo h3{font-size:24px;margin:0 0 10px}
@media(max-width:800px){.duo{grid-template-columns:1fr;gap:36px}}

/* ---- beeldvullend productmoment ---- */
/* padding-bottom:0 hoort bij .plint hieronder. Het zwarte vlak onder het beeld
   wás de onderste sectiepadding; die rol neemt de plint nu over. Laat je beide
   staan, dan krijg je twee zwarte stroken onder elkaar. */
.product{position:relative;background:var(--ink-900);overflow:hidden;padding-bottom:0}
.product img{display:block;width:100%;height:clamp(420px,68vh,760px);object-fit:cover}
/* De onderrand liep vroeger van doorzichtig naar 90% zwart. Hoe die eruitzag
   hing dus af van het beeld erachter: bij het donkere profielbeeld vloeide dat
   mooi in elkaar, bij het lichtere rolluikbeeld kwam er een harde rand die
   niemand had bedoeld. Nu loopt hij door tot vol --ink-900, zodat elke band er
   hetzelfde uitziet, wat er ook achter zit.
   Meer padding bovenaan geeft de kop lucht en laat de tekst midden in het
   donkere vlak staan in plaats van er tegenaan. */
/* De alinea stond niet netjes in het zwarte vlak onder het beeld. Gemeten op
   20-08-2026: bij de band met drie regels tekst zat er 6 px boven de alinea en
   48 px onder, bij die met twee regels 35 px boven en 48 px onder.

   Oorzaak, en waarom één getal het niet oplost: de tekstlaag hing met
   bottom:0 aan de ONDERkant van de sectie. De ruimte eronder lag dus vast op
   padding-bottom, en de ruimte erboven was gewoon wat er overbleef. Hoe langer
   de alinea, hoe verder hij tegen de bovenrand kroop. Wat de ene band
   rechtzet, duwt de andere scheef.

   Nu staat de alinea in een eigen strook (.plint) met dezelfde padding boven
   en onder. Die klopt bij elk aantal regels, ook als de tekst later verandert.
   De kop blijft over het beeld liggen, in .beeld, dat nu het ankerpunt is voor
   de absolute .cap — daardoor eindigt het verloop precies op de beeldrand en
   sluit het naadloos aan op de plint, want beide eindigen op --ink-900. */
.product .beeld{position:relative}
.product .cap{position:absolute;left:0;right:0;bottom:0;padding:110px 0 22px;
  background:linear-gradient(rgba(12,12,14,0),rgba(12,12,14,.72) 42%,var(--ink-900))}
/* De plint is bewust EEN TIKJE lichter dan --ink-900. Zonder dat verschil
   loopt hij naadloos over in de donkere sectie eronder (beide 20,20,22) en
   leest alles als een doorlopend zwart vlak in plaats van een strook. */
.product .plint{background:#1c1c20;padding:34px 0}
.product h2{color:#fff;margin:14px 0 0}
.product p{color:rgba(255,255,255,.72);max-width:52ch;margin:0}
.product .over{color:rgba(255,255,255,.7)}
@media(max-width:800px){.product img{height:clamp(300px,52vh,460px)}}

/* ---- realisaties: groot beeld ---- */
.showcase{display:grid;grid-template-columns:1.4fr 1fr;gap:28px;margin-bottom:28px}
@media(max-width:900px){.showcase{grid-template-columns:1fr}}
.shot{position:relative;border-radius:var(--r-md);overflow:hidden;background:#e6e3dc;min-height:320px}
.shot img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s cubic-bezier(.22,.8,.3,1)}
.shot:hover img{transform:scale(1.03)}
.shot figcaption{position:absolute;left:0;right:0;bottom:0;padding:26px;
  background:linear-gradient(transparent,rgba(12,12,14,.82));color:#fff}
.shot figcaption b{display:block;font:300 24px/1.2 var(--serif);margin-bottom:5px}
.shot figcaption span{font:400 13px/1.4 var(--sans);color:rgba(255,255,255,.72)}

/* ---- werkwijze ---- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-bottom:56px}
@media(max-width:800px){.steps{grid-template-columns:1fr}}
.step b{display:block;font:300 46px/1 var(--serif);color:var(--accent);opacity:.35;margin-bottom:12px}
.step h3{font-size:20px;margin-bottom:9px}
.step p{font-size:15px}
.step .dur{display:inline-block;margin-top:12px;font:500 11px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--accent-ink)}

/* VEELGESTELDE VRAGEN
   Native <details> in plaats van eigen JavaScript. Toetsenbordbediening,
   voorlezers en Ctrl+F werken dan vanzelf — bij een zelfgebouwde accordeon
   moet je dat alle drie apart nabouwen en gaat er altijd één stuk.
   De vraagregel is bewust ruim: 26px boven en onder plus regelhoogte komt
   boven de 44px die een vinger nodig heeft. */
.faq{max-width:880px}
.qa{border-bottom:1px solid var(--line)}
.qa:first-of-type{border-top:1px solid var(--line)}
.qa summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:32px;
  padding:26px 0;font:500 19px/1.45 var(--sans);color:var(--ink-900)}
.qa summary::-webkit-details-marker{display:none}
/* plusteken uit twee lijntjes; bij open draait het naar een kruisje */
.qa summary::after{content:"";flex:none;margin-left:auto;width:14px;height:14px;
  background:linear-gradient(var(--accent),var(--accent)) center/100% 1.5px no-repeat,
             linear-gradient(var(--accent),var(--accent)) center/1.5px 100% no-repeat;
  transition:transform .22s cubic-bezier(.22,.8,.3,1)}
.qa[open] summary::after{transform:rotate(45deg)}
.qa summary:hover{color:var(--accent-ink)}
.qa summary:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.qa .a{padding:0 46px 30px 0;color:var(--ink-700);font-size:16px;line-height:1.65;max-width:64ch}
.qa .a p+p{margin-top:14px}
.qa .a a{color:var(--accent-ink);text-underline-offset:3px}
.faq-na{margin-top:40px;font-size:15px;color:var(--ink-500)}
/* Vragenblok, 25-08-2026. Staat bewust onderaan de veelgestelde vragen en
   niet in een eigen sectie: wie hier beneden is heeft de lijst gelezen en
   zijn antwoord niet gevonden. Precies twee velden. Elk extra veld kost
   vragen, en voor terugmailen is meer dan een adres niet nodig. */
.vraagblok{margin-top:44px}
.vraagblok h3{margin-bottom:10px}
.vraag-velden{display:grid;gap:14px;margin-top:24px}
.vraag-velden .rij{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:end}
@media(max-width:640px){.vraag-velden .rij{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.qa summary::after{transition:none}}
@media(max-width:800px){
  .qa summary{font-size:17px;padding:22px 0;gap:20px}
  .qa .a{padding-right:0;font-size:15px}
}
.picker{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0 26px}
.slot{padding:12px 18px;min-height:44px;border:1px solid var(--line);border-radius:var(--r-sm);background:#fff;cursor:pointer;
  color:var(--ink-900);font:500 14px/1 var(--sans);transition:border-color .18s,background .18s}
.slot:hover{border-color:var(--accent)}
/* Sinds 25-08-2026 kun je er MEERDERE kiezen. Het vinkje maakt dat zichtbaar:
   met alleen een randkleur zag je bij drie gekozen knoppen niet in één
   oogopslag welke aan stonden. Zelfde teken als in de prijsindicatie. */
.slot[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft)}
.slot[aria-pressed="true"]::after{content:" ✓";color:var(--accent-ink)}
.picker-telling{font:400 14px/1.5 var(--sans);color:var(--ink-500);margin:-14px 0 24px}
.picker-telling b{color:var(--accent-ink);font-weight:600}

/* ---- reviews ---- */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
@media(max-width:900px){.quotes{grid-template-columns:1fr}}
.quote{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:28px;
  box-shadow:0 1px 2px rgba(20,20,22,.04),0 8px 24px rgba(20,20,22,.06)}
.quote .stars{font-size:14px}
.quote p{font-size:16px;margin:12px 0 18px;color:var(--ink-700)}
.dark .quote p{color:var(--ink-700)}
.dark .quote cite{color:var(--ink-900)}
.dark .quote cite span{color:var(--ink-500)}
.quote cite{font-style:normal;font:600 14px/1.4 var(--sans)}
.quote cite span{display:block;font-weight:400;color:var(--ink-500);font-size:13px;margin-top:2px}

/* ---- contact (donker slot) ---- */
.contact{background:var(--ink-900)}
.contact input,.contact textarea{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.16);color:#fff}
.contact label{color:rgba(255,255,255,.55)}
.contact input::placeholder,.contact textarea::placeholder{color:rgba(255,255,255,.3)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.form-grid .full{grid-column:1/-1}
@media(max-width:640px){.form-grid{grid-template-columns:1fr}}

footer{background:#0e0e10;color:rgba(255,255,255,.5);padding:52px 0}
footer .row{display:flex;justify-content:space-between;gap:28px;flex-wrap:wrap;font:400 13px/1.7 var(--sans)}
footer .logo{color:#fff;display:block;margin-bottom:12px}
footer a{color:rgba(255,255,255,.5);text-decoration:none}footer a:hover{color:#fff}

.mobilebar{position:fixed;left:0;right:0;bottom:0;z-index:90;display:none;
  background:rgba(20,20,22,.94);backdrop-filter:blur(16px);border-top:1px solid rgba(255,255,255,.12)}
.mobilebar div{display:grid;grid-template-columns:repeat(3,1fr)}
.mobilebar a{padding:16px 6px;text-align:center;color:#fff;text-decoration:none;font:600 12px/1 var(--sans);border-right:1px solid rgba(255,255,255,.12)}
.mobilebar a:last-child{border-right:0;background:var(--accent)}
/* 17-09-2026: WhatsApp in het eigen groen van die dienst, zoals de knoppen op
   de dienstpagina's. Donkere tekst erop, want wit op dit groen is te licht om
   te lezen. De drie vakken houden zo elk een eigen kleur: zwart voor bellen,
   groen voor WhatsApp, goud voor de prijsindicatie. */
.mobilebar a[href*="wa.me"]{background:#25D366;color:var(--ink-900);border-right-color:rgba(20,20,22,.18)}
@media(max-width:1000px){.mobilebar{display:block}body{padding-bottom:53px}}


/* ============================================================
   Aanvullingen voor de dienstpagina's — 04-09-2026.
   Alles hierboven komt uit site-v2.html. Alles hieronder geldt alleen voor
   /ramen, /deuren, /schuifsystemen, /rolluiken, /garagepoorten en /pergolas.
   ============================================================ */

/* De balk bovenaan is gemaakt voor de homepagina: die begint met een donkere
   videohero, dus de links zijn wit en de balk doorzichtig. Een dienstpagina
   begint licht — wit op wit. De balk staat daar meteen op 'glass', en die
   maken we hier dekkend: halfdoorzichtig zwart op wit geeft vuilgrijs. */
header#hdr.glass{background:var(--ink-900);backdrop-filter:none;-webkit-backdrop-filter:none;
  border-bottom:1px solid rgba(255,255,255,.09)}

/* De balk staat 'fixed' en neemt geen ruimte in. Op de homepagina schuift de
   hero eronder; hier zou de eerste kop erachter verdwijnen. */
main{padding-top:66px}
@media(max-width:1000px){main{padding-top:58px}}

/* Voor een link die rechtstreeks naar een sectie midden op de pagina springt
   (bv. Schuifsystemen -> /deuren#schuif). Zonder dit landt de sectie exact
   onder de vaste balk en is de kop half weggesneden. */
main section[id]{scroll-margin-top:80px}
@media(max-width:1000px){main section[id]{scroll-margin-top:72px}}

/* De opmaak zet alle marges op nul en geeft daarna .sec-head h2 zijn ruimte
   terug. Een dienstpagina begint met een h1, en die stond dus tegen het
   bovenschrift geplakt. Zelfde ruimte als een h2, iets ruimer bovenaan omdat
   het bovenschrift hier de enige regel erboven is. */
.sec-head h1{margin:26px 0 22px}
@media(max-width:600px){.sec-head h1{margin:18px 0 16px}}

/* De gedeelde opmaak verbergt op smalle schermen de navigatie, het
   telefoonnummer én de knop in de balk. Op de homepagina mag dat, want daar
   staat onderaan een vaste balk met een belknop. Een dienstpagina heeft die
   niet, en dan houdt een bezoeker op zijn telefoon bovenaan niets over om op
   te tikken. Het nummer blijft hier dus staan. */
@media(max-width:1000px){header .tel{display:inline-block}}
@media(max-width:420px){header .tel{font-size:14px}header .bar{gap:10px}}

/* Drie knopniveaus, elk met een eigen betekenis:
   goud = prijs berekenen, zwart = bellen, omlijnd = navigatie.

   .btn-ghost was doorzichtig met een rand van 17 % zwart. Naast veel beeld
   oogt dat rustig; op een leeg wit vlak verdwijnt het. Vandaar wit gevuld,
   een rand die je ziet en een lichte schaduw — een knop, geen kader. */
.btn-ghost{background:#fff;border-color:rgba(20,20,22,.42);color:var(--ink-900);
  font-weight:600;box-shadow:0 2px 10px rgba(20,20,22,.07)}
.btn-ghost::after{opacity:.85}
.btn-ghost:hover{background:var(--ink-900);border-color:var(--ink-900);color:#fff;
  box-shadow:0 10px 26px rgba(20,20,22,.18)}

/* Bellen is voor dit bedrijf geen bijzaak: wie tussen drie offertes twijfelt,
   belt — hij vult geen formulier in. Die knop is daarom meteen zwart, niet
   pas bij het aanwijzen. Bewust niet voor de omlijnde knoppen: wordt alles
   een volle knop, dan weegt niets meer zwaarder dan de rest.

   17-09-2026: de terugknop staat er nu bij. Die was wit met een rand, en dat
   las bovenaan een lichte pagina als een half uitgeschakelde knop. Zwart is
   duidelijker en laat zich bovendien beter onderscheiden van de gouden
   prijsknop ernaast. */
.btn-bel,.btn.terug{background:var(--ink-900);border-color:var(--ink-900);color:#fff;
  font-weight:600;box-shadow:0 6px 18px rgba(20,20,22,.18)}
.btn-bel::after,.btn.terug::after{opacity:.7}
.btn-bel:hover,.btn.terug:hover{background:#000;border-color:#000;color:#fff;
  transform:translateY(-2px);box-shadow:0 12px 28px rgba(20,20,22,.28)}

/* Terugknop. Elke .btn krijgt via ::after een pijl naar rechts; deze wijst
   terug, dus draaien we de pijl om en zetten we hem met order vóór de tekst. */
.terug::after{content:"\2190";order:-1;transform:translateX(4px)}
.terug:hover::after{transform:translateX(-2px)}

/* WhatsApp — 17-09-2026. Eerder een omlijnde knop in de huisstijl, maar dit is
   de enige knop op de site die naar een dienst van iemand anders gaat, en die
   herkent men aan de kleur. #25D366 is het groen dat WhatsApp zelf voorschrijft
   in zijn merkrichtlijnen. Wit op dat groen haalt een contrast van ongeveer
   2,3 en dat is te weinig om te lezen, dus staat de tekst er in het donkerste
   grijs van de huisstijl op — daarmee zit het ruim boven de norm. */
.btn-wa{background:#25D366;border-color:#25D366;color:var(--ink-900);
  font-weight:600;box-shadow:0 6px 18px rgba(37,211,102,.28)}
.btn-wa::after{opacity:.75}
.btn-wa:hover{background:#1DAF52;border-color:#1DAF52;color:var(--ink-900);
  transform:translateY(-2px);box-shadow:0 12px 28px rgba(37,211,102,.38)}

/* Op een smal scherm staan de knoppen onder elkaar over de volle breedte:
   makkelijker te raken met een duim dan twee halve knopjes naast elkaar. */
@media(max-width:560px){
  .knoprij{flex-direction:column;align-items:stretch}
  .knoprij .btn{justify-content:center}
}

/* Onderaan elke dienstpagina staan de vier andere diensten. Zo hoeft een
   bezoeker niet terug naar de startpagina om verder te kijken, en heeft
   Google een pad tussen de pagina's onderling. */
.zusjes{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px;padding:0;list-style:none}
.zusjes a{display:inline-block;padding:11px 20px;border:1px solid rgba(20,20,22,.28);
  border-radius:var(--r-sm);background:#fff;color:var(--ink-900);text-decoration:none;
  font:500 14px/1 var(--sans);transition:background .25s,border-color .25s,color .25s}
.zusjes a:hover{background:var(--ink-900);border-color:var(--ink-900);color:#fff}

/* Drie-koloms variant van .duo — nodig zodra een dienst uit drie opties
   bestaat in plaats van twee (bv. garagepoorten: sectionaal/kantel/rol).
   Zelfde look, alleen de kolomtelling verschilt. Klapt eerder samen dan
   .duo (900px in plaats van 800px), want drie kolommen hebben meer breedte
   nodig voor ze knellen. */
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:48px}
.trio figure{margin:0}
.trio h3{font-size:22px;margin:0 0 10px}
@media(max-width:900px){.trio{grid-template-columns:1fr;gap:36px}}