/* Aanvullingen voor de statische site (buiten Elementor). */

/* twee kolommen naast elkaar, zoals de Elementor-kindcontainers op Contact */
.wrap.kolommen{display:flex;flex-wrap:wrap;align-items:flex-start}
.kol{min-width:0}
.kol.aoa-kol-form{flex:1 1 520px}
.kol.aoa-kol-gegevens{flex:1 1 340px;max-width:480px}
@media(max-width:900px){.kol.aoa-kol-form,.kol.aoa-kol-gegevens{flex-basis:100%;max-width:none}}

/* Elementor-formulier zonder Elementor-CSS: velden in twee kolommen */
.elementor-form-fields-wrapper{display:flex;flex-wrap:wrap;gap:0 1rem}
.elementor-field-group{display:flex;flex-direction:column;width:100%}
.elementor-col-50{width:calc(50% - .5rem)}
.elementor-col-100{width:100%}
@media(max-width:600px){.elementor-col-50{width:100%}}
.elementor-field-group .elementor-field-textual{width:100%}
.elementor-form .elementor-button{cursor:pointer;border:0;font:inherit}
.elementor-message{margin-top:1rem}
.elementor-form[hidden]{display:none}
.elementor-screen-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* boxed secties: op staging stonden de widgets in een flex-kolom met 32px tussenruimte
   en 10px boven en onder (Elementor-standaard); zo blijven de hoogtes gelijk */
.wrap.ew{display:flex;flex-direction:column;gap:32px;padding-top:10px;padding-bottom:10px}
.wrap.ew.kolommen{flex-direction:row;gap:32px 48px}
.wrap.ew > *{min-width:0}

/* Elementor-veldgroepen hadden 10px onder elkaar */
.elementor-field-group{margin-bottom:10px}

/* hoofdinhoud mag geen extra ruimte toevoegen */
main#content{display:block}

/* taalschakelaar: vlag naast de taalcode, in dezelfde knopvorm als de rest van de kopbalk,
   maar compact: kleinere vlag, minder ruimte, zelfde hoogte als de menuknoppen */
header .bar .taal-knop{display:inline-flex;align-items:center;gap:.35rem;padding:0 .6rem;font-size:.72rem;letter-spacing:.01em}
.vlag{width:15px;height:11px;border-radius:2px;flex:none;box-shadow:0 0 0 1px rgba(20,24,43,.18)}
.taal-knop.aan .vlag{box-shadow:0 0 0 1px rgba(255,255,255,.3)}
@media(max-width:520px){.vlag{width:14px;height:10px}}

/* Werkwijze en Over ons zetten hun secties op een smallere maat (1280px); de kennismakings-CTA
   uit staging stond op de volle breedte en sprong daardoor uit de lijn */
.p-werkwijze .wrap.ew,.p-over-ons .wrap.ew{max-width:1280px}

/* werkoverzicht: de tegels stonden te ver onder de kopband (sectie-padding + extra marge) */
.p-werk .werkgrid{margin-top:0}

/* logostreep onder de hero: de logo's zijn voorgebakken als licht silhouet met een echt
   alfakanaal (bron/bouw-logos.py), dus zonder filter en zonder mix-blend-mode. De oude
   invert+screen-truc liet in sommige browsers een zwart vlak achter de rasterlogo's staan,
   omdat mask-image en overflow op de strook een eigen blend-groep maken. */
.hs .hs-logos img{filter:none;mix-blend-mode:normal;background:transparent}

/* breder dan de wrap (1480px): de plaat haalt de schermrand niet meer, dus dan wel een
   rechterrand, ronde hoeken rechts en de lijn van het onderschrift tot aan de plaat */
/* hero-knop "Plan een gesprek": oranje in plaats van navy, zonder foto (hover navy).
   .hs ervoor omdat dit blad vóór de inline hero-stijl laadt. */
.hs .hs-btn-vol{background:var(--oranje,#F25623);border-color:var(--oranje,#F25623);color:#fff}
@media (hover:hover) and (pointer:fine){
  .hs .hs-btn-vol:hover{background:var(--navy,#14182B);border-color:var(--navy,#14182B);color:#fff}
}

/* kopbalk: logo groter (8 sep 2026, Marwin); stijl.css zet 9.6rem */
header .bar .merk{width:12.6rem}
@media(max-width:980px){header .bar .merk{width:11rem}}
@media(max-width:560px){header .bar .merk{width:9.6rem}}

/* hero-bovenregel "Met ons loop je voorop met AI, Ads & Automation" groter (was .74rem) */
.hs .hs-eyebrow{font-size:1.08rem;letter-spacing:.16em}
@media(max-width:760px){.hs .hs-eyebrow{font-size:.9rem}}

/* ankerlinks (o.a. "Ontdek meer") landen onder de vaste kopbalk in plaats van eronder verstopt */
section[id]{scroll-margin-top:96px}

/* hero op dezelfde binnenmaat als .wrap (max 1480px, 2.4rem zijmarge), zodat kopbalk, hero,
   logostrook en secties op één lijn staan (was clamp(20px,3vw,48px) op max 1440px) */
body .hs{--pad:2.4rem}
.hs .hs-wrap{max-width:1480px}
@media(max-width:760px){body .hs{--pad:1.4rem}}

/* (.hs-stage ervoor: dit blad laadt vóór de inline hero-stijl, dus specifieker zijn) */
@media (min-width:1481px){
  .hs-stage .hs-plate{border-right:1px solid var(--rand,#DCD1BC); border-radius:8px}
  .hs-stage .hs-onderschrift{padding-right:0}
}

/* ══ Cookiebanner ══════════════════════════════════════════════════════════
   Kaart linksonder in het papier van de huisstijl; weigeren staat even groot
   en even zwaar als accepteren. De banner zelf komt uit assets/statisch.js. */
.ck{
  position:fixed;left:1.6rem;bottom:1.6rem;z-index:9000;width:min(30rem,calc(100vw - 3.2rem));
  background:var(--paneel);color:var(--tekst);border:1px solid var(--rand);border-radius:var(--r);
  padding:1.5rem 1.6rem 1.4rem;box-shadow:0 18px 44px rgba(20,24,43,.16);
  opacity:0;transform:translateY(10px);transition:opacity .28s ease,transform .28s ease;
}
.ck.ck-in{opacity:1;transform:none}
/* .ck-opties heeft display:flex en .knop display:inline-flex; beide verslaan het
   hidden-attribuut van de UA-stylesheet, vandaar deze regel */
.ck [hidden]{display:none !important}
.ck-lab{font-size:.82rem;letter-spacing:.15em;text-transform:uppercase;font-weight:800;
  line-height:1.3;margin:0 0 .6rem}
.ck-lab i{font-style:italic;font-weight:900;font-size:1.18em;color:var(--oranje);margin-right:.1em}
.ck-tekst{font-size:.93rem;line-height:1.55;color:var(--tekst-zacht);margin:0}
.ck-tekst a{color:var(--tekst);text-decoration:underline;text-underline-offset:2px}
.ck-tekst a:hover{color:var(--oranje-d)}

.ck-opties{display:flex;flex-direction:column;gap:.9rem;margin-top:1.2rem;
  padding-top:1.1rem;border-top:1px solid var(--rand)}
.ck-opties label{display:grid;grid-template-columns:auto 1fr;gap:.1rem .7rem;cursor:pointer}
.ck-opties input{margin:.25rem 0 0;width:1.05rem;height:1.05rem;accent-color:var(--oranje)}
.ck-opties b{display:block;font-size:.9rem;font-weight:700;color:var(--tekst)}
.ck-opties span{font-size:.85rem;line-height:1.45;color:var(--tekst-zacht)}

.ck-acties{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;margin-top:1.3rem}
.ck-acties .knop{cursor:pointer;border:0;font:inherit;font-weight:700;font-size:.9rem;
  padding:.72rem 1.15rem;flex:1 1 auto;justify-content:center}
.ck-acties .knop-l{border:1px solid var(--rand)}
.ck-link{background:none;border:0;padding:.4rem .2rem;font:inherit;font-size:.86rem;
  color:var(--tekst-zacht);text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.ck-link:hover{color:var(--tekst)}
.ck-link:focus-visible,.ck-acties .knop:focus-visible{outline:3px solid var(--oranje);outline-offset:3px}
.ck-voet{color:inherit;font-size:inherit;padding:0;text-decoration:none}
.ck-voet:hover{text-decoration:underline}

@media(max-width:600px){
  .ck{left:.8rem;right:.8rem;bottom:.8rem;width:auto;padding:1.25rem 1.2rem 1.15rem}
  .ck-acties .knop{flex-basis:100%}
}
@media(prefers-reduced-motion:reduce){
  .ck{transition:none;transform:none}
}