/* ==========================================================================
   aim.nu – basisstijl
   Kleuren:  rood #E30613 · rood voor tekst #C00510 · rood in grijze vlakken #CC0512
             koppen #737373 · payoff/grijze band #8A8A8A · tekst #3D3D3D / #4A4A4A
             lichtgrijs #EAEAEA (huidige site) · zacht grijs #F5F5F5 · lijn #ECE7E0
   Letters:  koppen Nunito 800 (subkoppen 700) · tekst Poppins 400/500/600
   Opzet:    vlakken (.kader) over de volle breedte, inhoud max. 1640 px, inhoud lijnt uit op het menu (.lijn)
   Let op:   de pagina's gebruiken nog veel inline stijlen uit het ontwerp. Zet die bij
             de bouw om naar componenten/klassen (zie CLAUDE.md).
   ========================================================================== */

html{scroll-padding-top:96px}
body{margin:0}
a{color:#C00510}
a:hover{color:#8E030B}
:focus-visible{outline:3px solid #E30613;outline-offset:3px}

/* ---- Opzet: vlakken over de volle breedte, inhoud binnen max. 1640 px (de binnenlaag van elk vlak) ---- */
.kader{width:100%;margin:0 0 clamp(12px, 1.4vw, 20px);box-sizing:border-box}
/* Header, vlakken en footer delen één container van max. 1640 px (incl. padding), zodat alles op het menu uitlijnt */
.lijn,.rechts-in,[style*="max-width: 1640px"]{box-sizing:border-box}
.lijn{padding-left:clamp(20px, 3vw, 32px) !important;padding-right:clamp(20px, 3vw, 32px) !important}
@media (min-width: 900px){
  .lijn{padding-left:calc(clamp(20px, 3vw, 32px) + 108px) !important;padding-right:calc(clamp(20px, 3vw, 32px) + 108px) !important}
  .rechts-in{padding-right:calc(clamp(20px, 3vw, 32px) + 108px) !important}
}

/* ---- Sticky header die verkleint bij scrollen (klasse .klein via aim.js) ---- */
.site-hdr{position:sticky;top:0;z-index:50;background:#FFFFFF;border-bottom:1px solid #ECE7E0;transition:box-shadow .3s ease}
.hdr-inner{position:relative;max-width:1640px;margin:0 auto;padding:18px clamp(20px, 3vw, 32px);box-sizing:border-box;display:flex;flex-wrap:nowrap;align-items:center;gap:56px;transition:padding .3s ease}
.hdr-home{display:flex;align-items:center;flex:none;text-decoration:none}
.hdr-logo{display:block;width:52px;height:52px;transition:width .3s ease,height .3s ease}
.hdr-nav{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:24px;font-size:15px;font-weight:500}
.hdr-nav a{color:#737373;text-decoration:none;white-space:nowrap}
.hdr-nav a:hover,.hdr-nav a.actief{color:#C00510}
.hdr-cta{flex:none;margin-left:auto;white-space:nowrap;background:#E30613;color:#FFFFFF;text-decoration:none;padding:12px 20px;border-radius:999px;font-size:15px;font-weight:600;line-height:1.6}
.hdr-cta:hover{background:#C00510;color:#FFFFFF}
.menu-knop{display:none;flex:none;width:44px;height:44px;margin:0 -6px 0 0;padding:0;border:0;border-radius:8px;background:transparent;color:#737373;cursor:pointer;align-items:center;justify-content:center}
.menu-streep,.menu-streep::before,.menu-streep::after{display:block;width:24px;height:2px;border-radius:2px;background:currentColor;transition:transform .25s ease,background-color .25s ease}
.menu-streep{position:relative}
.menu-streep::before,.menu-streep::after{content:"";position:absolute;left:0}
.menu-streep::before{top:-7px}
.menu-streep::after{top:7px}
.menu-open .menu-streep{background:transparent}
.menu-open .menu-streep::before{transform:translateY(7px) rotate(45deg)}
.menu-open .menu-streep::after{transform:translateY(-7px) rotate(-45deg)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Smaller scherm: menu achter een hamburger, de knop blijft altijd op één regel naast het logo */
@media (max-width: 1279px){
  .hdr-inner{gap:16px}
  .menu-knop{display:inline-flex}
  .hdr-nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;padding:8px clamp(20px, 3vw, 32px) 20px;background:#FFFFFF;border-bottom:1px solid #ECE7E0;box-shadow:0 14px 24px rgba(0,0,0,.08);max-height:calc(100vh - 80px);overflow-y:auto;font-size:17px}
  .menu-open .hdr-nav{display:flex}
  .hdr-nav a{padding:14px 0;border-bottom:1px solid #ECE7E0}
  .hdr-nav a:last-child{border-bottom:0}
}
@media (max-width: 899px){
  .hdr-inner{padding-top:12px;padding-bottom:12px}
  .hdr-logo{width:44px;height:44px}
}
@media (max-width: 420px){
  .hdr-inner{gap:10px}
  .hdr-logo{width:38px;height:38px}
  .hdr-cta{padding:9px 14px;font-size:13px}
}
@media (max-width: 330px){
  .hdr-cta{padding:8px 11px;font-size:12px}
}
.site-hdr.klein{box-shadow:0 2px 14px rgba(0,0,0,.08)}
.site-hdr.klein .hdr-inner{padding-top:8px !important;padding-bottom:8px !important}
.site-hdr.klein .hdr-logo{width:38px !important;height:38px !important}

/* ---- Werkoverzicht met mouse-over (zoals aim.nu/werk) ---- */
.werk-tile{position:relative;display:block;overflow:hidden;text-decoration:none}
.werk-tile img{transition:transform .4s ease}
.werk-ov{position:absolute;inset:0;background:rgba(255,255,255,.9);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:20px;text-align:center;opacity:0;transition:opacity .3s ease}
.werk-tile:hover .werk-ov,.werk-tile:focus-visible .werk-ov{opacity:1}
.werk-tile:hover img,.werk-tile:focus-visible img{transform:scale(1.04)}
.werk-ov-t{font-family:Nunito,Poppins,Arial,sans-serif;font-size:20px;font-weight:800;color:#737373;line-height:1.25}
.werk-ov-b{font-size:14px;font-weight:600;color:#FFFFFF;background:#E30613;padding:8px 18px;border-radius:999px}

/* ---- Stappenkaarten (homepage) ---- */
.stap{transition:transform .3s ease,box-shadow .3s ease,background-color .3s ease}
.stap:hover{transform:translateY(-4px);box-shadow:0 12px 28px rgba(0,0,0,.08);background-color:#FFFFFF !important}
.stap-nr{transition:transform .35s cubic-bezier(.34,1.56,.64,1)}
.stap:hover .stap-nr{transform:scale(1.12) rotate(-8deg)}

/* ---- Blokken die rustig in beeld vliegen (klassen via aim.js) ---- */
.anim-klaar .vlieg,.anim-klaar .stap{transition:opacity .9s ease-out,transform 1s cubic-bezier(.22,.8,.3,1),box-shadow .3s ease,background-color .3s ease}
.anim-klaar .vlieg:not(.zichtbaar),.anim-klaar .stap:not(.zichtbaar){opacity:0;transform:translateY(60px) scale(.96)}
.vlieg:nth-child(4n+2),.stap:nth-child(2){transition-delay:.12s}
.vlieg:nth-child(4n+3),.stap:nth-child(3){transition-delay:.24s}
.vlieg:nth-child(4n+4){transition-delay:.36s}

/* ---- Formulieren (contact, gratis eerste peiling; verwerkt door verstuur.php) ---- */
.form-uitleg{margin:0;font-size:14px;color:#5F5F5F}
.veld{display:flex;flex-direction:column;gap:6px}
.veld label{font-size:14px;font-weight:500;color:#3D3D3D}
.veld .opt{font-weight:400;color:#5F5F5F}
.veld-invoer{font:inherit;font-size:16px;color:#3D3D3D;padding:12px 14px;border:1px solid #CFC8BF;border-radius:10px;background:#FFFFFF;width:100%;box-sizing:border-box}
.veld-invoer:focus{border-color:#737373}
.veld-invoer::placeholder{color:#9A9A9A}
.veld-invoer[aria-invalid="true"]{border-color:#C00510;background:#FFF8F8}
.veld-fout{margin:0;font-size:14px;color:#C00510}
.hp{position:absolute !important;left:-10000px;width:1px;height:1px;overflow:hidden}
.form-privacy{margin:0;font-size:13px;color:#5F5F5F}
.form-knop{font:inherit;font-weight:600;background:#E30613;color:#FFFFFF;border:0;border-radius:999px;padding:16px;cursor:pointer;transition:background-color .2s ease}
.form-knop:hover{background:#C00510}
.form-knop[disabled]{opacity:.6;cursor:wait}
.form-melding:empty{display:none}
.form-melding{margin:0;padding:14px 16px;border-radius:10px;font-size:15px;background:#FFF8F8;color:#C00510;border:1px solid #F2C9CB}
.form-melding.ok{background:#F3F8F3;color:#2F6B34;border-color:#CFE3D0}
.form-bedankt{display:flex;flex-direction:column;gap:12px}
.form-bedankt h2{font-family:Nunito,Poppins,Arial,sans-serif;margin:0;font-size:24px;color:#737373;font-weight:800}
.form-bedankt p{margin:0;color:#3D3D3D}

/* ---- Telefoons en tablets: geen vaste (parallax) achtergronden, die werken daar niet goed ---- */
@media (hover: none) and (pointer: coarse){
  [style*="background-attachment: fixed"]{background-attachment:scroll !important}
}

/* ---- Minder beweging als de bezoeker dat heeft ingesteld ---- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important;transition:none !important;scroll-behavior:auto !important}
  .anim-klaar .vlieg,.anim-klaar .stap{opacity:1 !important;transform:none !important}
}