/*
Theme Name: De Slimme Slotenmaker
Description: Eigen thema voor deslimmeslotenmaker.nl
Version: 1.2
Text Domain: slotenmaker
*/

/* De lettertypen staan in het thema zelf. Een site die uitlegt wat de AVG van
   gegevensdeling vindt, hoort niet het IP-adres van elke bezoeker naar een
   externe lettertypeserver te sturen. */
@font-face{font-family:'Archivo';font-style:normal;font-weight:400 900;font-display:swap;src:url('letters/archivo.woff2') format('woff2')}
@font-face{font-family:'Kalam';font-style:normal;font-weight:400;font-display:swap;src:url('letters/kalam-400.woff2') format('woff2')}
@font-face{font-family:'Kalam';font-style:normal;font-weight:700;font-display:swap;src:url('letters/kalam-700.woff2') format('woff2')}


:root{
  --kozijn:#0f1f18;        /* diep deurgroen-zwart, i.p.v. gooische's warme inkt */
  --kozijn-zacht:#40534a;
  --groen:#12704a;
  --groen-diep:#0b4d33;
  --groen-licht:#9fe3bf;   /* het "toegangslabel" */
  --groen-tekst:#0b4d33;
  --staal:#f5f7f4;         /* koel papier i.p.v. warm papier */
  --staal-2:#e7ece7;
  --wit:#fff;
  --lijn:#cfd8d1;
  --kop:"Archivo","Arial Black",sans-serif;
  --body:"Segoe UI",system-ui,-apple-system,sans-serif;
  --hand:"Kalam","Segoe Script",cursive;
  --r:22px;
}
*{box-sizing:border-box}
html{hyphens:auto}
h1,h2,h3,h4,.kop-uit{hyphens:manual;-webkit-hyphens:manual}
body{margin:0;background:var(--staal);color:var(--kozijn);font-family:var(--body);
  font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased}
.wrap{max-width:1240px;margin:0 auto;padding:0 28px;position:relative}

/* ---- DE KOZIJNLIJN: de eigen draai op het stippenraster ---- */
.kozijn{position:fixed;inset:0;pointer-events:none;z-index:0}
.kozijn::before{content:"";position:absolute;top:0;bottom:0;left:calc(50% - 620px + 28px);
  width:1px;background:linear-gradient(var(--lijn),var(--lijn));opacity:.85}
.kozijn::after{content:"";position:absolute;top:0;bottom:0;right:calc(50% - 620px + 28px);
  width:1px;background:var(--lijn);opacity:.85}
.merk{position:absolute;left:calc(50% - 620px + 22px);top:0;bottom:0;width:11px}
.merk i{position:absolute;left:0;width:11px;height:1px;background:var(--lijn)}
main{position:relative;z-index:1}
/* de kop moet boven de inhoud staan, anders valt het uitklapmenu erachter:
   met dezelfde z-index wint het element dat later in de DOM komt */
header{position:relative;z-index:60}
.nav{position:relative;z-index:61}

/* ---- NAVIGATIE: zwevende pill, zoals gooische, maar rechthoekiger ---- */
header{padding:22px 0 0}
.nav{background:var(--wit);border:1.5px solid var(--kozijn);border-radius:var(--r);
  display:flex;align-items:center;gap:20px;padding:12px 14px 12px 20px;
  hyphens:manual;-webkit-hyphens:manual;
  box-shadow:0 18px 40px -30px rgba(15,31,24,.6)}
.logo{display:flex;align-items:center;gap:11px;text-decoration:none;color:inherit;margin-right:auto}
.logo svg{flex:0 0 auto}
.logo b{font-family:var(--kop);font-weight:900;font-size:1.06rem;letter-spacing:-.02em;display:block;line-height:1.05}
.logo span{font-size:.62rem;letter-spacing:.17em;text-transform:uppercase;color:var(--kozijn-zacht);font-weight:600}
.nav .m>a,.megaknop{color:var(--kozijn);text-decoration:none;font-weight:600;font-size:.93rem}
.nav .m>a:hover,.megaknop:hover{color:var(--groen)}
/* de silo-opener is een knop, geen link naar '#': anders springt de pagina naar boven
   en belooft de adresbalk een bestemming die er niet is */
.megaknop{background:none;border:0;padding:0;margin:0;font-family:inherit;line-height:inherit}
.tel{font-family:var(--kop);font-weight:800;font-size:.95rem;white-space:nowrap}
.knop{background:var(--groen);color:#fff;border:0;border-radius:999px;padding:12px 20px;
  font-family:var(--kop);font-weight:800;font-size:.9rem;text-decoration:none;white-space:nowrap;display:inline-block}
.knop:hover{background:var(--groen-diep)}
.knop--zwart{background:var(--kozijn)}

/* ---- HERO ---- */
.hero{padding:74px 0 60px;display:grid;grid-template-columns:1.15fr.85fr;gap:52px;align-items:start}
h1{font-family:var(--kop);font-weight:900;font-size:clamp(2.1rem,4.05vw,3.35rem);line-height:1.04;
  letter-spacing:-.032em;margin:0 0 18px}
/* het toegangslabel, vorm van een sleutelhanger, niet een markeerstiftvlak */
.tag{background:var(--groen-licht);color:var(--groen-tekst);padding:.04em.4em.08em.78em;
  white-space:nowrap;
  border-radius:5px 16px 16px 5px;box-decoration-break:clone;-webkit-box-decoration-break:clone;
  position:relative}
/* het gaatje van een sleutelhanger, links in het label */
.tag::before{content:"";position:absolute;left:.3em;top:50%;width:.2em;height:.2em;
  transform:translateY(-50%);border-radius:50%;border:.055em solid var(--groen-tekst);opacity:.6}
.hero h2{font-family:var(--kop);font-weight:800;font-size:clamp(1.15rem,2vw,1.5rem);
  line-height:1.14;letter-spacing:-.018em;margin:0 0 20px}
.lead{font-size:1.06rem;color:var(--kozijn-zacht);max-width:33em;margin:0 0 26px}
.formulier{border:2px solid var(--kozijn);border-radius:var(--r);padding:16px;background:var(--wit);max-width:430px}
.formulier input{width:100%;border:1.5px solid var(--lijn);border-radius:999px;padding:13px 18px;
  font:inherit;font-size:.97rem;margin-bottom:10px;background:var(--staal)}
.formulier button{width:100%;border:0;border-radius:999px;background:var(--kozijn);color:#fff;
  font-family:var(--kop);font-weight:800;font-size:1rem;padding:14px;cursor:pointer}
.onder{font-size:.86rem;color:var(--kozijn-zacht);margin:12px 0 0}
.chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:20px}
.chip{border:1.5px solid var(--lijn);border-radius:999px;padding:7px 14px;font-size:.82rem;
  background:var(--wit);font-weight:600}

/* ---- BEELD + MAATVOERING-ANNOTATIE (de eigen draai op de handpijl) ---- */
.beeld{position:relative;padding-top:18px}
.beeldkader img{width:100%;height:100%;object-fit:cover;display:block}
.beeldkader{border:2px solid var(--kozijn);border-radius:var(--r);overflow:hidden;background:var(--staal-2);
  aspect-ratio:16/9;display:grid;place-items:center;padding:0}
.bijschrift{font-size:.85rem;color:var(--kozijn-zacht);margin:11px 2px 0;line-height:1.45}
/* de annotatie hangt aan een maatvoeringslijn, zoals op een deurtekening */
.notitie{display:flex;align-items:flex-start;gap:12px;margin:0 0 14px;padding-right:4px}
.notitie .hand{font-family:var(--hand);font-size:1.16rem;line-height:1.24;color:var(--kozijn);
  margin:0;max-width:19em}
.notitie .maat{flex:0 0 auto;width:26px;height:30px;margin-top:4px;position:relative}
.notitie .maat::before{content:"";position:absolute;left:0;top:3px;width:26px;height:1px;background:var(--kozijn)}
.notitie .maat::after{content:"";position:absolute;left:25px;top:3px;width:1px;height:26px;background:var(--kozijn)}
.notitie .maat i{position:absolute;left:22px;top:26px;width:7px;height:7px;border-radius:50%;
  background:var(--kozijn)}

/* ---- TICKER: manieren om binnen te komen ---- */
.ticker{background:var(--kozijn);color:var(--staal);margin-top:34px}
.ticker .rij{display:flex;align-items:center;gap:0;justify-content:space-between;
  padding:15px 28px;max-width:1240px;margin:0 auto;font-family:var(--kop);font-weight:800;
  letter-spacing:.12em;font-size:.82rem;text-transform:uppercase;flex-wrap:wrap;row-gap:8px}
.ticker s{color:var(--groen-licht);text-decoration:none;opacity:.55;font-weight:400;padding:0 4px}
.ticker .accent{color:var(--groen-licht)}
.ticker sup{color:var(--groen-licht);font-size:.7em}

/* ---- SECTIE ---- */
section.vlak{padding:78px 0}
section.vlak--staal{background:var(--staal-2)}
.merkje{display:flex;align-items:center;gap:7px;margin-bottom:16px}
h3{font-family:var(--kop);font-weight:900;font-size:clamp(1.75rem,3.5vw,2.75rem);line-height:1.06;
  letter-spacing:-.028em;margin:0 0 16px;max-width:19em}
.tweekolom{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:34px}
.kaart{background:var(--wit);border:1.5px solid var(--lijn);border-radius:var(--r);padding:26px 28px}
.kaart--uit{background:var(--kozijn);color:var(--staal);border-color:var(--kozijn)}
.kaart--uit .k-op{color:var(--groen-licht)}
.k-op{font-family:var(--kop);font-weight:800;font-size:.72rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--groen);margin:0 0 9px}
.kaart h4{font-family:var(--kop);font-weight:800;font-size:1.24rem;margin:0 0 11px;letter-spacing:-.015em}
.kaart p{margin:0 0 12px;font-size:.97rem}
.kaart p:last-child{margin-bottom:0}
.kaart--uit p{color:#cfdbd4}
.wat{display:flex;gap:9px;align-items:baseline;font-size:.93rem;margin-top:14px;
  padding-top:14px;border-top:1px solid var(--lijn)}
.kaart--uit .wat{border-top-color:#2c4438}
.wat b{font-family:var(--kop);font-weight:800;white-space:nowrap}

/* kernantwoord-blok (GEO) */
.kern{background:var(--wit);border-left:5px solid var(--groen);border-radius:0 14px 14px 0;
  padding:20px 24px;margin:26px 0 0;max-width:44em}
.kern p{margin:0;font-size:1.02rem}
.kern .v{font-family:var(--kop);font-weight:800;font-size:1.04rem;margin:0 0 7px;display:block}
.herkomst{font-size:.82rem;color:var(--kozijn-zacht);margin-top:14px}

/* ---- links in lopende tekst: browserblauw hoort hier niet ---- */
main a{color:var(--groen-diep);text-decoration:underline;
  text-decoration-color:var(--groen-licht);text-decoration-thickness:2px;
  text-underline-offset:3px}
main a:hover{text-decoration-color:var(--groen)}
main .knop,main .megakaart a,main .blokje a{text-decoration:none}
/* ---- handgeschreven noot naast een kop, als tegenwicht voor het groene label ---- */
.kop-noot{font-family:var(--hand);font-size:1.1rem;color:var(--groen-diep);font-weight:400;
  transform:rotate(-2deg);display:inline-block;margin-left:.7em;vertical-align:middle;
  letter-spacing:0}
/* ---- de favoriet mag eruit springen ---- */
.pk--fav{border:2px solid var(--kozijn);position:relative;
  box-shadow:0 18px 40px -30px rgba(15,31,24,.6)}
.pk--fav::before{content:"onze keuze";position:absolute;top:-13px;left:22px;
  background:var(--groen-licht);color:var(--groen-tekst);font-family:var(--kop);
  font-weight:800;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;
  padding:4px 12px;border-radius:5px 12px 12px 5px}
/* ---- geen wezen meer onderaan een raster ---- */
.gevallen{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
/* Twee en drie stuks vullen hun rij vanzelf, maar vier stuks worden 3+1 en dan
   staat er een eenzaam blokje onderaan. Vier hoort 2+2 te zijn. */
.gevallen:has(> .geval:nth-child(4):last-child){grid-template-columns:repeat(2,1fr)}
/* ---- de aantekening in de huisstijl in plaats van een geel waarschuwingsvlak ---- */
.let{background:var(--wit);border:1.5px solid var(--lijn);border-left:5px solid var(--groen);
  border-radius:0 14px 14px 0}
/* ---- werkband als prikbord, niet als raster ---- */
.werk:first-child{grid-column:span 2}
.werk:first-child img{aspect-ratio:4/3.4}
.werk figcaption{font-family:var(--hand);font-size:.98rem;transform:rotate(-1deg);
  color:var(--kozijn)}
/* ---- auteur met gezicht ---- */
.auteur{display:flex;align-items:center;gap:13px;margin-top:20px}
.auteur img{width:52px;height:52px;border-radius:50%;object-fit:cover;
  border:2px solid var(--lijn);flex:0 0 auto}
.auteur b{font-family:var(--kop);font-weight:800;font-size:.98rem;display:block;
  line-height:1.2}
.auteur span{font-size:.84rem;color:var(--kozijn-zacht)}
/* ---- korte pagina's hoeven geen holle banden ---- */
.vlak--kort{padding:52px 0}
/* ---- het menu mag niet afbreken; "Uitzoe-ken" is geen menu-item ---- */
.nav .m,.nav .m>a,.megaknop,.tel,.knop{white-space:nowrap;hyphens:manual;-webkit-hyphens:manual}
.nav .m>a,.megaknop{font-size:.9rem}
.logo b{white-space:nowrap}
@media(max-width:1180px){
  .nav{gap:15px}
  .nav .m>a,.megaknop{font-size:.85rem}
  /* Het nummer verdween hier helemaal. Tussen 900 en 1180px is er geen menu-
     paneel met belknop, dus dan stond er nergens meer een telefoonnummer.
     Kleiner mag; weg niet. */
  .tel{font-size:.85rem}
}

/* ---- mega-menu ---- */
.nav{position:relative;z-index:61}
.mega{position:static}
.mega>a,.mega>.megaknop{display:inline-flex;align-items:center;gap:.34rem;cursor:pointer}
.mega>a::after,.mega>.megaknop::after{content:"";width:7px;height:7px;border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);opacity:.4;
  transition:transform .18s ease,opacity .18s ease}
.mega:hover>a::after,.mega:focus-within>a::after,
.mega:hover>.megaknop::after,.mega:focus-within>.megaknop::after{transform:rotate(225deg) translateY(-2px);opacity:.85}
.mega:hover>a,.mega:focus-within>a,
.mega:hover>.megaknop,.mega:focus-within>.megaknop{color:var(--groen-diep)}
/* de regel hierboven zet nowrap op de hele silo, zodat "Uitzoeken" niet afbreekt.
   Dat erfde door tot in de uitklapkaart, waardoor de uitleg als een lange lint
   doorliep tot buiten het scherm. Binnen de kaart mag tekst gewoon afbreken. */
.megakaart,.megakaart *{white-space:normal}
.megakaart{position:absolute;left:0;right:0;top:100%;margin-top:12px;z-index:200;
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .17s ease,transform .17s ease,visibility 0s .17s;
  background:var(--wit);border:1.5px solid var(--kozijn);border-radius:var(--r);
  padding:26px 30px;box-shadow:0 30px 70px -30px rgba(15,31,24,.55);
  display:grid;grid-template-columns:1.6fr 1fr;gap:30px}
.mega:hover>.megakaart,.mega:focus-within>.megakaart{opacity:1;visibility:visible;
  transform:translateY(0);transition-delay:0s}
.megalinks{display:grid;grid-template-columns:1fr 1fr;gap:2px 22px;align-content:start;min-width:0}
.megalinks a{min-width:0}
.megakaart a{display:block;text-decoration:none;color:var(--kozijn);padding:.46rem .6rem;
  margin-inline:-.6rem;border-radius:11px;font-size:.94rem;font-weight:600;
  border-bottom:1px solid transparent}
.megakaart a:hover{background:var(--staal-2);color:var(--groen-diep)}
.megauit{background:var(--staal);border-radius:16px;padding:20px 22px;align-self:start;min-width:0}
.megauit .kolomkop{font-family:var(--kop);font-weight:800;font-size:.68rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--groen);margin:0 0 9px;display:block}
.megauit .uitleg{display:block;margin:0;font-size:.9rem;color:var(--kozijn-zacht);line-height:1.55}
.megauit .cijfer{font-family:var(--kop);font-weight:900;font-size:1.45rem;color:var(--kozijn);
  display:block;line-height:1.1;margin-bottom:4px;letter-spacing:-.02em}
/* ---- bewegende uitlegschema's ---- */
.tekening{margin:26px 0 0;max-width:760px}
.tekening svg{width:100%;height:auto;display:block;background:var(--wit);
  border:1.5px solid var(--lijn);border-radius:var(--r);padding:18px}
.vlak--staal .tekening svg{background:var(--wit)}
.tekening figcaption{font-size:.97rem;color:var(--kozijn-zacht);margin-top:14px;
  line-height:1.6;max-width:52em}
.tekening figcaption b{color:var(--kozijn);font-family:var(--kop);font-weight:800}

.tk-deur{fill:var(--staal-2);stroke:var(--kozijn);stroke-width:2}
.tk-kozijn{fill:var(--staal);stroke:var(--kozijn);stroke-width:2}
.tk-kier{fill:var(--wit)}
.tk-plaat{fill:var(--groen-licht);stroke:var(--groen-tekst);stroke-width:2}
.tk-knop{fill:var(--wit);stroke:var(--kozijn);stroke-width:2.5}
.tk-steel{fill:var(--kozijn)}
.tk-schoot{fill:var(--groen);stroke:var(--groen-diep);stroke-width:1.5}
.tk-kast{fill:var(--wit);stroke:var(--kozijn);stroke-width:2}
.tk-opener{fill:var(--groen-licht);stroke:var(--groen-tekst)}
.tk-draad{stroke:var(--kozijn-zacht);stroke-width:2.5;fill:none;opacity:.35}
.tk-contact{stroke:var(--kozijn);stroke-width:3;stroke-linecap:round}
.tk-punt{fill:var(--kozijn)}
.tk-toetsen{fill:var(--staal-2);stroke:var(--kozijn);stroke-width:1.5}
.tk-fon{fill:var(--kozijn)}
.tk-scherm{fill:var(--staal)}
.tk-regel{fill:var(--groen-licht)}
.tekening text{font-family:var(--body);font-size:11px;fill:var(--kozijn-zacht)}
.tk-mid{text-anchor:middle;font-family:var(--kop);font-weight:800;font-size:12px;
  fill:var(--kozijn)}
.tk-uit{text-anchor:middle;font-size:10px;fill:var(--groen);font-weight:700}
.tk-zij{font-family:var(--kop);font-weight:800;font-size:12px;fill:var(--kozijn)}
.tk-label{font-size:10px;text-anchor:middle;fill:var(--kozijn-zacht)}

/* de cilinder draait, de schoot volgt */
.tk-draai{transform-origin:118px 90px;animation:tkDraai 4s ease-in-out infinite}
.tk-schoot{animation:tkSchoot 4s ease-in-out infinite}
@keyframes tkDraai{0%,18%{transform:rotate(0)}42%,72%{transform:rotate(-95deg)}100%{transform:rotate(0)}}
@keyframes tkSchoot{0%,18%{transform:translateX(0)}42%,72%{transform:translateX(-34px)}100%{transform:translateX(0)}}

/* stroom die door een draad loopt */
.tk-draad--puls,.tk-draad--puls2,.tk-draad--puls3{stroke:var(--groen);opacity:1;
  stroke-dasharray:10 90;animation:tkPuls 3s linear infinite}
.tk-draad--puls2{animation-delay:.5s}
.tk-draad--puls3{animation-delay:1s}
@keyframes tkPuls{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}

/* het relaiscontact klapt dicht */
.tk-arm{transform-origin:148px 96px;animation:tkArm 3s ease-in-out infinite}
@keyframes tkArm{0%,30%{transform:rotate(-24deg)}45%,80%{transform:rotate(0)}100%{transform:rotate(-24deg)}}

/* toetsen lichten op */
.tk-toets{animation:tkToets 3s ease-in-out infinite}
@keyframes tkToets{0%,25%{opacity:.35}40%,85%{opacity:1}100%{opacity:.35}}

/* de app werkt zijn rijen bij */
.tk-rij{animation:tkRij 3.6s ease-in-out infinite}
.tk-rij--2{animation-delay:.45s}
.tk-rij--3{animation-delay:.9s}
@keyframes tkRij{0%,20%{opacity:.25}35%,75%{opacity:1}100%{opacity:.25}}

@media(prefers-reduced-motion:reduce){
  .tk-draai,.tk-schoot,.tk-arm,.tk-toets,.tk-rij,
  .tk-draad--puls,.tk-draad--puls2,.tk-draad--puls3{animation:none}
  /* stilstaand eindbeeld dat nog steeds klopt */
  .tk-draai{transform:rotate(-95deg)}
  .tk-schoot{transform:translateX(-34px)}
  .tk-arm{transform:rotate(0)}
  .tk-draad--puls,.tk-draad--puls2,.tk-draad--puls3{stroke-dasharray:none}
}
/* ---- kop van een silopagina: tekst links, beeld rechts ---- */
.silohero{display:grid;grid-template-columns:1.25fr .75fr;gap:48px;align-items:start}
.silohero-tekst{min-width:0}
.silohero-beeld{padding-top:8px;min-width:0}
.silofoto{margin:0}
.silofoto img{width:100%;display:block;border:2px solid var(--kozijn);border-radius:var(--r);
  aspect-ratio:4/3.6;object-fit:cover}
.silofoto figcaption{font-size:.86rem;color:var(--kozijn-zacht);margin-top:11px;line-height:1.5}
@media(max-width:900px){
  .silohero{grid-template-columns:1fr;gap:26px}
  .silohero-beeld{padding-top:0}
  .silofoto img{aspect-ratio:4/3}
}
@media(max-width:900px){
  .tekening svg{padding:10px}
  .tekening figcaption{font-size:.94rem}
}
@media(max-width:900px){
  /* het label mag de kop niet uit beeld duwen */
  .tag{white-space:normal}
  /* kapitalen niet laten afbreken als BE-STAANDE */
  .k-op,.opschrift,.merkstreep,.kolomkop{hyphens:manual;-webkit-hyphens:manual;
    letter-spacing:.09em}
  .blokje{padding:11px 16px}
  .blokje b{display:inline}
  .blokje small{display:inline;margin-left:.4em}
  .kop-noot{display:block;margin:8px 0 0;transform:none}
  .werk:first-child{grid-column:span 2}
}
@media(max-width:900px){
  .hero{grid-template-columns:1fr;gap:34px;padding:40px 0 34px}
  .tweekolom{grid-template-columns:1fr}
  .nav .m,.tel{display:none}
  .kozijn{display:none}
  .notitie .maat{display:none}
  .notitie .hand{max-width:none}
  .wrap{padding:0 18px}
  .ticker .rij{padding:13px 18px;font-size:.72rem;justify-content:flex-start;gap:14px}
  /* het logo mag NOOIT in losse lettergrepen breken op een klein scherm */
  .nav{gap:12px;padding:11px 11px 11px 14px}
  /* GEEN min-width:0 hier: dan krimpt de logo-link tot onder zijn kortste woord
     en schuift "Slotenmaker" onder de knop ernaast. Zonder die regel stopt het
     krimpen precies bij het langste woord, en dat is wat we willen. */
  .logo b{font-size:.92rem;line-height:1.15;hyphens:manual;-webkit-hyphens:manual;
    white-space:normal}
  .logo span span{display:none}          /* de tagline eronder valt weg */
  .logo svg{width:26px;height:26px}
  .knop{padding:11px 15px;font-size:.82rem}
}


section.vlak{padding:76px 0}
section.vlak--staal{background:var(--staal-2)}
section.vlak--donker{background:var(--kozijn);color:var(--staal)}
h2{font-family:var(--kop);font-weight:900;font-size:clamp(1.9rem,3.7vw,2.9rem);line-height:1.05;
  letter-spacing:-.03em;margin:0 0 16px;max-width:19em;text-wrap:balance}
.intro{max-width:41em;color:var(--kozijn-zacht);font-size:1.05rem}
.vlak--donker .intro{color:#b7c8c0}
.opschrift{font-family:var(--kop);font-weight:800;font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--groen);margin:0 0 10px}
.vlak--donker .opschrift{color:var(--groen-licht)}
/* ---- silopagina's ---- */
.paginakop{font-family:var(--kop);font-weight:900;font-size:clamp(2.1rem,4.4vw,3.4rem);
  line-height:1.03;letter-spacing:-.03em;margin:0 0 10px;max-width:16em;text-wrap:balance}
.onderkop{font-family:var(--kop);font-weight:800;font-size:clamp(1.05rem,1.9vw,1.35rem);
  color:var(--groen);margin:0 0 20px;letter-spacing:-.01em}
.lead--breed{max-width:40em;font-size:1.08rem}
.kern{background:var(--wit);border-left:5px solid var(--groen);border-radius:0 14px 14px 0;
  padding:20px 24px;margin:26px 0 0;max-width:44em}
.kern p{margin:0;font-size:1.02rem}
.kern .v{font-family:var(--kop);font-weight:800;font-size:1.04rem;margin:0 0 7px;display:block}
.herkomst{font-size:.82rem;color:var(--kozijn-zacht);margin-top:16px}
/* ---- video ---- */
.video{margin:0;max-width:860px}
.videokader{position:relative;padding-top:56.25%;border:2px solid var(--kozijn);
  border-radius:var(--r);overflow:hidden;background:var(--kozijn)}
.videokader iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video figcaption{font-size:.9rem;color:var(--kozijn-zacht);margin-top:11px;line-height:1.5}
.vlak--staal .video figcaption{color:var(--kozijn-zacht)}
/* Hier stond een tweede, ouder mega-menu-blok. Omdat het NA het echte blok
   hierboven kwam, won het: de kaart werd 270px smal terwijl er een tweekoloms-
   raster in zit, en de rechterkolom hing tot 142px buiten de witte kaart. Weg. */
@media(max-width:900px){
  .paginakop{font-size:clamp(1.8rem,7vw,2.3rem)}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
:focus-visible{outline:3px solid var(--groen);outline-offset:2px;border-radius:6px}
img{max-width:100%;height:auto}
.overslaan{position:absolute;left:-9999px;top:auto}
.overslaan:focus{position:static;display:inline-block;margin:10px;padding:10px 16px;
  background:var(--kozijn);color:#fff;border-radius:8px}
/* voet */
.voet{background:var(--kozijn);color:#b7c8c0;padding:52px 0 34px;font-size:.94rem}
.voet a{color:var(--staal)}
.voet-rij{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:30px}
.voet h3{font-family:var(--kop);font-weight:800;font-size:.74rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--groen-licht);margin:0 0 12px}
.voet ul{list-style:none;margin:0;padding:0}
.voet li{margin-bottom:7px}
.voet .fijn{margin-top:34px;padding-top:20px;border-top:1px solid #2c4438;font-size:.86rem}
@media(max-width:900px){.voet-rij{grid-template-columns:1fr;gap:26px}}

/* ---- SOORTEN: twee families, vier types ---- */
.families{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:36px}
.familie{border:2px solid var(--kozijn);border-radius:var(--r);overflow:hidden;background:var(--wit)}
.familie--kabel{background:var(--kozijn);color:var(--staal);border-color:var(--kozijn)}
.f-kop{padding:20px 24px 16px;border-bottom:1.5px dashed var(--lijn)}
.familie--kabel .f-kop{border-bottom-color:#2c4438}
.f-kop h3{font-family:var(--kop);font-weight:900;font-size:1.4rem;margin:0 0 6px;letter-spacing:-.02em}
.f-kop p{margin:0;font-size:.95rem;color:var(--kozijn-zacht)}
.familie--kabel .f-kop p{color:#b7c8c0}
.type{padding:19px 24px;border-bottom:1px solid var(--lijn)}
.familie--kabel .type{border-bottom-color:#2c4438}
.type:last-child{border-bottom:0}
.type h4{font-family:var(--kop);font-weight:800;font-size:1.06rem;margin:0 0 6px}
.type p{margin:0;font-size:.94rem;color:var(--kozijn-zacht)}
.familie--kabel .type p{color:#b7c8c0}
.merkstreep{display:inline-block;font-family:var(--kop);font-weight:800;font-size:.68rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--groen);margin-bottom:7px}
.familie--kabel .merkstreep{color:var(--groen-licht)}

/* ---- KOPPELKAART ---- */
.koppel{display:grid;grid-template-columns:1fr 220px 1fr;gap:0;align-items:center;margin-top:44px}
.bron,.gevolg{display:flex;flex-direction:column;gap:14px}
.blokje{border:1.5px solid var(--lijn);background:var(--wit);border-radius:16px;padding:14px 18px;
  position:relative;font-size:.95rem}
.blokje b{font-family:var(--kop);font-weight:800;display:block;font-size:1rem;margin-bottom:2px}
.blokje small{color:var(--kozijn-zacht);font-size:.86rem;display:block;line-height:1.45}
.midden{display:grid;place-items:center;padding:0 14px}
.slot{background:var(--kozijn);color:var(--staal);border-radius:20px;padding:26px 20px;text-align:center;
  width:100%;box-shadow:0 22px 46px -26px rgba(15,31,24,.7)}
.slot b{font-family:var(--kop);font-weight:900;font-size:1.18rem;display:block;line-height:1.15}
.slot small{color:var(--groen-licht);font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;
  font-family:var(--kop);font-weight:800;display:block;margin-bottom:9px}
.draad{position:relative}
.bron .blokje::after{content:"";position:absolute;right:-15px;top:50%;width:15px;height:1.5px;
  background:var(--kozijn-zacht);opacity:.5}
.gevolg .blokje::before{content:"";position:absolute;left:-15px;top:50%;width:15px;height:1.5px;
  background:var(--kozijn-zacht);opacity:.5}
.gevolg .blokje{background:transparent;border-style:dashed}
.koppelnoot{font-family:var(--hand);font-size:1.14rem;margin:26px 0 0;text-align:center;color:var(--kozijn)}

/* ---- TEDEE ---- */
.tedee{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:36px}
.pk{background:var(--wit);border:1.5px solid var(--lijn);border-radius:var(--r);padding:22px;
  display:flex;flex-direction:column}
.pk img{width:118px;height:118px;object-fit:contain;align-self:center;margin-bottom:14px}
.pk h4{font-family:var(--kop);font-weight:800;font-size:1.12rem;margin:0 0 4px}
.pk .rol{font-size:.8rem;font-family:var(--kop);font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--groen);margin:0 0 10px}
.pk p{margin:0 0 10px;font-size:.94rem;color:var(--kozijn-zacht)}
.spec{margin-top:auto;padding-top:12px;border-top:1px solid var(--lijn);font-size:.86rem}
.spec div{display:flex;gap:8px;padding:2px 0}
.spec span:first-child{color:var(--kozijn-zacht);flex:0 0 8.4em}
.let{padding:15px 18px;margin-top:22px;font-size:.94rem}
.let b{font-family:var(--kop);font-weight:800}


/* ---- detailfoto bij een slottype ---- */
.type--metbeeld{display:flex;gap:16px;align-items:flex-start}
.type--metbeeld .tekst{flex:1 1 auto;min-width:0}
.type--metbeeld img{flex:0 0 auto;width:132px;border-radius:12px;display:block;
  background:#f5f7f4;padding:8px;border:1.5px solid #2c4438}
/* ---- band met eigen werk ---- */
.werkband{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-top:34px}
.werk figure{margin:0}
.werk img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:14px;
  border:1.5px solid var(--lijn);display:block}
.werk figcaption{margin-top:7px;line-height:1.4}
@media(max-width:900px){.werkband{grid-template-columns:1fr 1fr}
  .type--metbeeld{flex-direction:column}.type--metbeeld img{width:132px}}


/* ---- de buitenpost als bouwdoos ---- */
.bouwdoos{margin-top:34px}
.bouwdoos img{width:100%;max-width:900px;display:block;margin:0 auto}
.bouwrij{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:22px;margin-top:30px}
.bouwpunt h4{font-family:var(--kop);font-weight:800;font-size:1.02rem;margin:0 0 6px}
.bouwpunt p{margin:0;font-size:.94rem;color:var(--kozijn-zacht)}
.bouwpunt{border-top:2px solid var(--groen-licht);padding-top:12px}
/* ---- tweede merk naast de favoriet ---- */
.tweedemerk{display:flex;gap:26px;align-items:center;margin-top:26px;background:var(--wit);
  border:1.5px solid var(--lijn);border-radius:var(--r);padding:22px 26px}
.tweedemerk img{flex:0 0 auto;width:180px;border-radius:14px;display:block}
.tweedemerk h4{font-family:var(--kop);font-weight:800;font-size:1.12rem;margin:0 0 8px}
.tweedemerk p{margin:0 0 8px;font-size:.96rem;color:var(--kozijn-zacht)}
.tweedemerk p:last-child{margin-bottom:0}
@media(max-width:900px){.bouwrij{grid-template-columns:1fr}
  .tweedemerk{flex-direction:column;align-items:flex-start}.tweedemerk img{width:150px}}

/* ---- OPLOSSEN ---- */
.gevallen{display:grid;gap:22px 26px;margin-top:34px}
.geval{border-left:3px solid var(--groen-licht);padding:2px 0 2px 18px}
.geval h4{font-family:var(--kop);font-weight:800;font-size:1.04rem;margin:0 0 7px}
.geval p{margin:0;font-size:.94rem;color:var(--kozijn-zacht)}
.vlak--donker .geval{border-left-color:var(--groen-licht)}
.vlak--donker .geval p{color:#b7c8c0}

@media(max-width:900px){
  .families,.tedee,.gevallen{grid-template-columns:1fr}
  .koppel{grid-template-columns:1fr;gap:16px}
  .midden{padding:6px 0}
  .bron .blokje::after,.gevolg .blokje::before{display:none}
  .wrap{padding:0 18px}
  section.vlak{padding:48px 0}
}


/* ---- MOBIEL MENU ------------------------------------------------------------
   Onder 900px stonden alle vijf de silo's op display:none en was er geen knop
   om ze mee te openen: op een telefoon kon je alleen nog het logo aantikken.
   Bijna de helft van de bezoekers komt op een telefoon binnen.
   Geen JavaScript: <details> klapt uit zonder script en werkt met toetsenbord,
   voorleessoftware en op een aanraakscherm. --------------------------------- */
.mobmenu{display:none;position:static}
.mobopener{list-style:none;cursor:pointer;display:flex;align-items:center;gap:9px;
  border:1.5px solid var(--kozijn);border-radius:999px;padding:9px 15px 9px 13px;
  font-family:var(--kop);font-weight:800;font-size:.8rem;color:var(--kozijn);
  background:var(--wit);white-space:nowrap;-webkit-tap-highlight-color:transparent}
.mobopener::-webkit-details-marker{display:none}
.mobopener::marker{content:""}
.mobstreep{display:block;position:relative;width:16px;height:12px;flex:0 0 auto}
.mobstreep i{position:absolute;left:0;right:0;height:2px;border-radius:2px;
  background:var(--kozijn);transition:transform .18s ease,opacity .18s ease}
.mobstreep i:nth-child(1){top:0}
.mobstreep i:nth-child(2){top:5px}
.mobstreep i:nth-child(3){top:10px}
.mobmenu[open] .mobstreep i:nth-child(1){transform:translateY(5px) rotate(45deg)}
.mobmenu[open] .mobstreep i:nth-child(2){opacity:0}
.mobmenu[open] .mobstreep i:nth-child(3){transform:translateY(-5px) rotate(-45deg)}
.mobmenu[open] .mobopener{background:var(--kozijn);color:var(--wit)}
.mobmenu[open] .mobstreep i{background:var(--wit)}

/* het paneel hangt onder de zwevende balk en loopt precies met de rand mee */
.mobpaneel{position:absolute;top:calc(100% + 12px);left:-1.5px;right:-1.5px;z-index:200;
  background:var(--wit);border:1.5px solid var(--kozijn);border-radius:var(--r);
  padding:12px 14px 14px;box-shadow:0 30px 70px -30px rgba(15,31,24,.55);
  max-height:calc(100vh - 130px);overflow-y:auto;overscroll-behavior:contain}
.mobgroep{border-bottom:1px solid var(--lijn)}
.mobgroep:last-of-type{border-bottom:0}
.mobgroep>summary{list-style:none;cursor:pointer;display:flex;align-items:center;
  justify-content:space-between;gap:10px;padding:13px 4px;
  font-family:var(--kop);font-weight:800;font-size:1rem;color:var(--kozijn)}
.mobgroep>summary::-webkit-details-marker{display:none}
.mobgroep>summary::marker{content:""}
.mobgroep>summary::after{content:"";width:8px;height:8px;flex:0 0 auto;
  border-right:2px solid var(--groen);border-bottom:2px solid var(--groen);
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .18s ease}
.mobgroep[open]>summary::after{transform:rotate(225deg) translate(-2px,-2px)}
.mobgroep[open]>summary{color:var(--groen-diep)}
.moblinks{display:block;padding:0 0 10px}
.moblinks a{display:block;text-decoration:none;color:var(--kozijn);
  padding:10px 12px;border-radius:11px;font-size:.95rem;font-weight:600;
  background:var(--staal);margin-bottom:6px}
.moblinks a:last-child{margin-bottom:0}
.mobbel{display:flex;align-items:center;justify-content:center;gap:9px;margin-top:12px;
  background:var(--groen);color:#fff;border-radius:999px;padding:13px 18px;
  font-family:var(--kop);font-weight:800;font-size:1rem;text-decoration:none}
.mobbel small{font-family:var(--body);font-weight:400;font-size:.8rem;opacity:.85}
.mobbel--zwart{background:var(--kozijn);margin-top:8px}

@media(max-width:1100px){
  .nav .m,.tel{display:none}
  .mobmenu{display:block}
}
@media(max-width:900px){
  /* de knop in de balk mag korter: er staat nu ook een menuknop naast */
  .nav>.knop{padding:11px 14px;font-size:.8rem}
}
/* Op een smalle telefoon past alles er alleen naast als de menuknop zijn woord
   inslikt en de rest een maat kleiner wordt. De afspraakknop blijft staan: bijna
   de helft van de bezoekers komt op een telefoon, dus die knop is de zaak. */
/* De knoptekst wordt korter voordat er iets verdwijnt: "Deurcheck" scheelt ruim
   60px, en dat is precies wat een telefoon van 360-390px tekortkomt. */
.knop-kort{display:none}
@media(max-width:540px){
  .nav>.knop .knop-lang{display:none}
  .nav>.knop .knop-kort{display:inline}
  .mobopener{padding:9px 11px;gap:0}
  .mobwoord{display:none}
  .nav>.knop{padding:10px 13px;font-size:.76rem}
  .nav{gap:9px;padding:10px 10px 10px 12px}
  /* De merknaam mag hier over twee regels: breken op de spatie is prima, het is
     afbreken MIDDEN in een woord dat lelijk is -- vandaar hyphens:manual. */
  .logo b{font-size:.84rem}
}
/* op de allersmalste toestellen verhuist de afspraakknop naar het menupaneel,
   waar hij onderaan alsnog groot in beeld staat */
/* onder 375px eerst nog een maatje kleiner, en pas op de allersmalste toestellen
   verhuist de afspraakknop naar het menupaneel, waar hij onderaan groot staat */
@media(max-width:375px){
  .nav>.knop{padding:9px 11px;font-size:.72rem}
  .logo b{font-size:.8rem}
}
@media(max-width:347px){
  .nav>.knop{display:none}
}
@media(prefers-reduced-motion:reduce){
  .mobstreep i,.mobgroep>summary::after{transition:none}
}