/* Ackermans site: huisstijl (spec §3). Tokens eerst; contrast bewaakt door build/tests/test_contrast.py. */
:root {
  --ack-zwart: #080404;
  --ack-vlak: #242424;
  --ack-tekst: #FFFFFF;
  --ack-tekst-2: #F7F6F6;
  --ack-oranje: #DD7D3D;
  --ack-gap: 24px;
  --ack-radius: 4px;
  --ack-pad: clamp(16px, 4vw, 32px);
  /* Opmaakronde 2 §2: breder en ruimer */
  --ack-zijmarge: clamp(16px, 2.5vw, 40px); /* ruling O2: zichtbaar breder op 1280 (±1216) en 1440 (±1368) */
  --ack-sectie-ruimte: clamp(28px, 4vw, 44px); /* boven + onder: 2 x 44 = 88 px tussen secties op desktop */
  /* Dekkingen (getest in test_lijnen/test_opmaak: witte tekst over lijn + fel logo blijft >= 4,5:1) */
  --ack-bg-op: .15;
  /* Oranje lijnen: lijnsterkte (zoals Odoo) en demping in de tekstzone van de hero; effectief .9 x .6 = .54 */
  --ack-lijnen-op: .9;
  --ack-lijnen-op-gsm: .75;
  --ack-lijnen-tekst-op: .6;
  --ack-lijnen-tekst-op-gsm: .6;
  --ack-lijnen-tekst-tot: 66%; /* tot hier gedempt: onderkant titel + tekst (gemeten, zie test_lijnen) */
  --ack-lijnen-tekst-tot-gsm: 72%;
  --ack-lijnen-tekst: var(--ack-lijnen-tekst-op);
}

body { background: var(--ack-zwart); color: var(--ack-tekst); font-family: "Open Sans", sans-serif; }
html body { font-size: 18px; line-height: 1.7; } /* "html body" wint van Astra's body-regel (16px/1rem) */
h1, h2, h3, h4, .ack-btn, .main-header-menu { font-family: "Oswald", sans-serif; }
a { color: var(--ack-oranje); }

.ack-wrap { max-width: 1400px; margin-inline: auto; padding-inline: var(--ack-zijmarge); box-sizing: border-box; }
/* Elementor-boxed containers begrenzen hun binnenkant zelf met --container-max-width (kit: 1140 px). */
.e-con.ack-wrap, .e-con.ack-band { --container-max-width: 1400px; max-width: none; }

/* ---- Typografie (opmaakronde 2 §2); #content zodat de footer-widgettitels niet meegroeien ---- */
#content h1 { font-size: clamp(2.2rem, 4vw, 3.2rem); line-height: 1.15; }
#content h2 { font-size: 2rem; line-height: 1.2; }
#content h3 { font-size: 1.4rem; line-height: 1.3; }
#content .elementor-widget-text-editor p, #content .elementor-widget-text-editor li { max-width: 75ch; } /* lopende tekst */
#content .ack-troeven li { max-width: none; }
/* Meer lucht tussen secties: Elementor zet --padding-top/-bottom per element (0,3,0); deze selectors wegen zwaarder. */
#content .e-con.ack-sectie:not(.ack-sectie--sub), #content .e-con.ack-tegels, #content .e-con.ack-troeven, #content .e-con.ack-projecten {
  --padding-top: var(--ack-sectie-ruimte); --padding-bottom: var(--ack-sectie-ruimte);
}
#content .e-con.ack-tegels { --gap: var(--ack-gap); --row-gap: var(--ack-gap); --column-gap: var(--ack-gap); } /* tegels 24 px uit elkaar */
#content .e-con.ack-band { --padding-top: calc(var(--ack-sectie-ruimte) * 2); --padding-bottom: calc(var(--ack-sectie-ruimte) * 2); }

/* ---- Oranje lijnen (opmaakronde 2b): draadkunst rond een U-curve over de volle breedte (build/tools/make_lijnen.py).
   Herbruikbaar: .ack-lijnen + .ack-lijnen--hero (groot) of .ack-lijnen--blok (afsluitend offerteblok, lager).
   ::after, want Elementor gebruikt ::before van .e-con voor achtergrond-overlays. mask-image laat het net zacht
   uitvloeien (hero: onderste 25 %, blok: bovenkant) en dempt het in de tekstzone van de hero. ---- */
.ack-lijnen { position: relative; isolation: isolate; }
.ack-lijnen::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: url("../img/ack-lijnen.svg");
  background-repeat: no-repeat; background-position: center bottom;
  background-size: var(--ack-lijnen-breedte, 100%) var(--ack-lijnen-hoogte, 100%);
  opacity: var(--ack-lijnen-op);
}
.ack-lijnen--hero::after {
  -webkit-mask-image: linear-gradient(to bottom, rgb(0 0 0 / var(--ack-lijnen-tekst)) 0 var(--ack-lijnen-tekst-tot), #000 75%, transparent 100%);
  mask-image: linear-gradient(to bottom, rgb(0 0 0 / var(--ack-lijnen-tekst)) 0 var(--ack-lijnen-tekst-tot), #000 75%, transparent 100%);
}
.ack-lijnen--blok { --ack-lijnen-hoogte: 80%; }
.ack-lijnen--blok::after {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, rgb(0 0 0 / var(--ack-lijnen-tekst-op)) 35% 55%, #000 75% 88%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, rgb(0 0 0 / var(--ack-lijnen-tekst-op)) 35% 55%, #000 75% 88%, transparent 100%);
}
@media (max-width: 767px) {
  .ack-lijnen::after { opacity: var(--ack-lijnen-op-gsm); }
  .ack-lijnen { --ack-lijnen-tekst: var(--ack-lijnen-tekst-op-gsm); --ack-lijnen-tekst-tot: var(--ack-lijnen-tekst-tot-gsm); }
  .ack-lijnen--hero { --ack-lijnen-breedte: 200%; --ack-lijnen-hoogte: 75%; } /* middenstuk van de U: geen smalle V */
  .ack-lijnen--blok { --ack-lijnen-breedte: 200%; --ack-lijnen-hoogte: 70%; }
}

.ack-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--ack-oranje);
  color: var(--ack-zwart);
  padding: 12px 22px; border-radius: var(--ack-radius);
  font-weight: 600; text-decoration: none; text-transform: uppercase; letter-spacing: .03em;
}
.ack-btn:hover, .ack-btn:focus-visible { background: var(--ack-tekst); color: var(--ack-zwart); }
.ack-btn--ghost { background: transparent; color: var(--ack-tekst); border: 2px solid var(--ack-oranje); }
.ack-btn--ghost:hover, .ack-btn--ghost:focus-visible { background: var(--ack-oranje); color: var(--ack-zwart); }
:focus-visible { outline: 3px solid var(--ack-oranje); outline-offset: 2px; }

.ack-card { background: var(--ack-vlak); color: var(--ack-tekst); border-radius: var(--ack-radius); }
.ack-band { background: var(--ack-vlak); } /* verticale ruimte: #content .e-con.ack-band (--padding-top/-bottom) */

.ack-uren { display: grid; grid-template-columns: max-content 1fr; gap: 2px 16px; margin: 0; }
.ack-uren dt { font-weight: 600; }
.ack-uren dd { margin: 0; color: var(--ack-tekst-2); }

.elementor-widget-button.ack-btn { background: none; padding: 0; }
.elementor-widget-button.ack-btn .elementor-button { background: var(--ack-oranje); color: var(--ack-zwart); border-radius: var(--ack-radius); font-family: "Oswald", sans-serif; font-weight: 600; text-transform: uppercase; }
.elementor-widget-button.ack-btn .elementor-button:hover { background: var(--ack-tekst); color: var(--ack-zwart); }
.elementor-widget-button.ack-btn--ghost { border: 0; }
.elementor-widget-button.ack-btn--ghost .elementor-button { background: transparent; color: var(--ack-tekst); border: 2px solid var(--ack-oranje); }
.elementor-widget-button.ack-btn--ghost .elementor-button:hover, .elementor-widget-button.ack-btn--ghost .elementor-button:focus-visible { background: var(--ack-oranje); color: var(--ack-zwart); }

/* ---- Fototegels (spec §3): vaste tegelbreedte = 1/4 van de inhoud, gecentreerd, 4:3 ---- */
.ack-fotos { --kol: 4; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--ack-gap); margin-block: 16px 24px; }
.ack-foto { flex: 0 0 calc((100% - (var(--kol) - 1) * var(--ack-gap)) / var(--kol)); display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--ack-radius); }
.ack-foto__img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .2s; }
.ack-foto:hover .ack-foto__img, .ack-foto:focus-visible .ack-foto__img { transform: scale(1.03); }
@media (max-width: 1024px) { .ack-fotos { --kol: 2; } }

/* ---- Achtergrond per pagina (spec §5): eigen logo's groot en sterk gedimd; desktop vast, mobiel scrolt mee ---- */
/* De pseudo-laag ligt op z-index 0, de pagina (#page) erboven op 1: z-index -1 kan achter de body-achtergrond verdwijnen. */
body.ack-bg-stempel, body.ack-bg-ptr { position: relative; }
body.ack-bg-stempel #page, body.ack-bg-ptr #page { position: relative; z-index: 1; }
body.ack-bg-stempel::before, body.ack-bg-ptr::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-repeat: no-repeat; background-position: center 55%; background-size: min(70vw, 760px) auto;
  opacity: var(--ack-bg-op);
}
body.ack-bg-stempel::before { background-image: var(--ack-bg-stempel); }
body.ack-bg-ptr::before { background-image: var(--ack-bg-ptr); }
@media (max-width: 1024px) {
  body.ack-bg-stempel::before, body.ack-bg-ptr::before { position: absolute; bottom: auto; height: 100vh; background-size: 90vw auto; }
}
/* Alleen de Astra-wrappers transparant; .e-con niet, anders verliezen .ack-card en .ack-band hun achtergrond. */
#page, .site-content, .ast-container { background-color: transparent; }

/* ---- Acties (spec §6.1) ---- */
.ack-acties { margin-block: 32px; }
.ack-acties__lijst { display: grid; gap: var(--ack-gap); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.ack-actie { display: flex; flex-direction: column; overflow: hidden; }
.ack-actie__img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.ack-actie__img--logo { object-fit: contain; background: var(--ack-zwart); padding: 24px; box-sizing: border-box; }
.ack-actie__img--leeg { background: var(--ack-zwart); }
.ack-actie__body { padding: 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.ack-actie__body .ack-btn { align-self: flex-start; margin-top: auto; }
.ack-actie__geldig { color: var(--ack-tekst-2); font-size: .9em; }
@media (min-width: 900px) {
  .ack-acties--n1 .ack-actie { flex-direction: row; }
  .ack-acties--n1 .ack-actie__img { width: 50%; }
}

/* ---- Header: sticky (Astra gratis heeft geen sticky header). Telefoonknop niet meer in de header (opmaakronde 2 §3). ---- */
#masthead { position: sticky; top: 0; z-index: 99; background: var(--ack-zwart); }
body.admin-bar #masthead { top: 32px; }
@media (max-width: 782px) { body.admin-bar #masthead { top: 46px; } }
#masthead .ast-button { color: var(--ack-zwart); }
#ast-desktop-header .site-branding { padding-block: 12px; } /* Astra: 18 px; met logo 72 px -> balk 96 px */
#masthead .ast-custom-button { font-family: "Oswald", sans-serif; font-size: 17px; padding: 13px 24px; letter-spacing: .03em; }
#masthead .ast-custom-button, #masthead .main-header-menu .menu-link { white-space: nowrap; }
@media (max-width: 921px) {
  #ast-mobile-header .ast-custom-button { padding: 10px 12px; font-size: 14px; }
  #ast-mobile-header .site-branding { padding-block: 10px; } /* Astra: 18 px; met logo 52 px -> balk 72 px (ruling O2) */
  #ast-mobile-header .site-header-primary-section-right { gap: 6px; }
  #ast-mobile-header .site-header-primary-section-right > .ast-builder-layout-element { padding-inline: 0; }
}
/* Header en footer lijnen uit met de inhoud (.ack-wrap: 1400 px binnenbreedte + zijmarge); Astra's eigen 20 px valt weg. */
#masthead .site-primary-header-wrap, #colophon .ast-builder-grid-row-container-inner {
  max-width: calc(1400px + 2 * var(--ack-zijmarge)); padding-inline: var(--ack-zijmarge); margin-inline: auto; box-sizing: border-box;
}
#masthead .main-header-menu > .menu-item > .menu-link { padding-inline: .8em; text-transform: uppercase; letter-spacing: .05em; }
@media (min-width: 922px) {
  /* Menu-items als blokjes (niet de volle balkhoogte), zodat het actieve item een oranje blokje wordt zoals op Odoo. */
  #masthead .main-header-menu > .menu-item { display: flex; align-items: center; }
  #masthead .main-header-menu > .menu-item > .menu-link { line-height: 1.2; padding-block: .5em; border-radius: var(--ack-radius); }
  #masthead .main-header-menu { gap: 4px; }
}
/* Smalle desktop (922-1199 px): menu moet op één rij blijven; kleiner lettertype (>= 15 px), minder spatiëring en padding. */
@media (min-width: 922px) and (max-width: 1199px) {
  #masthead .main-header-menu > .menu-item > .menu-link { font-size: 15px; letter-spacing: .02em; padding-inline: .55em; }
  #masthead .main-header-menu { gap: 2px; }
  #masthead .ast-custom-button { font-size: 15px; padding: 11px 16px; }
}
@media (min-width: 922px) and (max-width: 1049px) {
  #masthead .main-header-menu > .menu-item > .menu-link { letter-spacing: .01em; padding-inline: .4em; }
  #masthead .main-header-menu { gap: 1px; }
  #masthead .ast-custom-button { padding: 11px 12px; }
}
/* Actieve pagina: oranje blokje met zwarte tekst (6,87:1); hover op andere items = oranje tekst (Astra-instelling). */
#masthead .main-header-menu > .current-menu-item > .menu-link, #masthead .main-header-menu > .current-menu-item > .menu-link:hover,
#masthead .main-header-menu > .current-menu-item > .menu-link:focus-visible { background: var(--ack-oranje); color: var(--ack-zwart); border-radius: var(--ack-radius); }
/* Footer: Astra's widget-linkkleur (oranje) mag de knoptekst op oranje niet overschrijven (contrast, spec §3). */
#colophon a.ack-btn, #colophon a.ack-btn:hover, #colophon a.ack-btn:focus-visible { color: var(--ack-zwart); }
.ack-footer__links { list-style: none; margin: 0 0 16px; padding: 0; }
/* Opmaakronde 3 A4: tekstlinks even groot als hun tekst; knoppen (.ack-btn), menu en icoonlinks blijven zoals ze zijn. */
#content p a:not(.ack-btn), #content li a:not(.ack-btn) { font-size: inherit; }
#colophon p a:not(.ack-btn), #colophon li a { font-size: inherit; }
/* Sociale icoontjes (opmaakronde 2 §5): wit, oranje bij hover/focus, zichtbare focusring (globale :focus-visible). */
.ack-social { display: flex; gap: 16px; align-items: center; }
#colophon .ack-social a { color: var(--ack-tekst); display: inline-flex; padding: 4px; border-radius: var(--ack-radius); }
#colophon .ack-social a:hover, #colophon .ack-social a:focus-visible { color: var(--ack-oranje); }
.ack-social svg { width: 24px; height: 24px; display: block; }

/* ---- Offerte: QR-code (alleen desktop, spec §7) en kaart ---- */
.ack-qr { display: flex; gap: 16px; align-items: center; background: var(--ack-vlak); padding: 16px; border-radius: var(--ack-radius); margin-block: 8px 24px; }
.ack-qr[hidden] { display: none; }
.ack-qr__code { width: 140px; height: 140px; background: #fff; padding: 6px; flex: 0 0 auto; }
.ack-qr__tekst p { margin: 0 0 8px; }
.ack-qr__tekst p:last-child { margin-bottom: 0; }
.ack-qr__code svg { width: 100%; height: 100%; }
.ack-kaart iframe, .ack-kaart img { width: 100%; aspect-ratio: 4 / 3; border: 0; display: block; }
@media (max-width: 921px) { .ack-offerte { flex-direction: column !important; } .ack-offerte > .e-con { width: 100% !important; } }
/* Forminator-formulier op de donkere pagina: Forminator zet zijn kleuren met #forminator-module-<id> (ID verschilt
   lokaal/live), dus hier !important. Contrast ≥ 4,5:1 (spec §3): vinkjesteksten waren zwart op zwart (1,03:1),
   de link in het fotoveld blauw op lichtgrijs (4,05:1). */
.ack-offerte .forminator-ui .forminator-label { color: var(--ack-tekst-2) !important; }
/* Opmaakronde 3 A2: alle formuliertekst in Open Sans 18 px, zoals body (Forminator zet 12-16 px en eigen fonts met #forminator-module-<id>). */
.ack-offerte .forminator-ui .forminator-label,
.ack-offerte .forminator-ui .forminator-required,
.ack-offerte .forminator-ui .forminator-input,
.ack-offerte .forminator-ui .forminator-textarea,
.ack-offerte .forminator-ui .forminator-select,
.ack-offerte .forminator-ui .select2-selection__rendered,
.ack-offerte .forminator-ui .forminator-checkbox,
.ack-offerte .forminator-ui .forminator-checkbox-label,
.ack-offerte .forminator-ui .forminator-radio,
.ack-offerte .forminator-ui .forminator-radio-label,
.ack-offerte .forminator-ui .forminator-description,
.ack-offerte .forminator-ui .forminator-error-message,
.ack-offerte .forminator-ui .forminator-multi-upload-message,
.ack-offerte .forminator-ui .forminator-multi-upload-message p,
.ack-offerte .forminator-ui .forminator-uploaded-files,
.ack-offerte .forminator-ui .forminator-file-name,
.ack-offerte .forminator-ui .forminator-response-message,
.ack-offerte .forminator-ui .forminator-response-message p,
.ack-offerte .forminator-ui .forminator-field-gdprcheckbox p { font-family: "Open Sans", sans-serif !important; font-size: 18px !important; }
.ack-offerte .forminator-ui .forminator-input::placeholder,
.ack-offerte .forminator-ui .forminator-textarea::placeholder { font-family: "Open Sans", sans-serif !important; font-size: 18px !important; }
.ack-offerte .forminator-ui .forminator-multi-upload-message p a:not(.ack-btn) { font-size: inherit !important; }
.ack-offerte .forminator-ui .forminator-checkbox-label,
.ack-offerte .forminator-ui .forminator-checkbox-label p,
.ack-offerte .forminator-ui .forminator-radio-label,
.ack-offerte .forminator-ui .forminator-radio-label p { color: var(--ack-tekst) !important; } /* radio: soort band (20 okt) */
.ack-offerte .forminator-ui .forminator-multi-upload-message p a { color: var(--ack-zwart) !important; font-weight: 600; text-decoration: underline; }
/* Op de gsm maakt ack-offerte.js van die link een knop "Foto's maken of kiezen" (spec §7). */
.ack-offerte .forminator-ui .forminator-multi-upload-message p a.ack-btn { display: inline-block; background: var(--ack-oranje) !important; color: var(--ack-zwart) !important; font-family: "Oswald", sans-serif !important; font-size: 16px !important; font-weight: 600; text-transform: uppercase !important; letter-spacing: .03em; text-decoration: none !important; padding: 12px 22px !important; border-radius: var(--ack-radius) !important; transition: none !important; } /* Forminators "a"-regels (#forminator-module-<id>) en Astra's "a { transition: all .2s }" mogen de knop niet half laten staan */
/* Ruling O4: de uploadzone is lichtgrijs (#EDEDED), dus hover en focusring in zwart: zwart op #EDEDED 17,4:1, wit op zwart 20,4:1. */
.ack-offerte .forminator-ui .forminator-multi-upload-message p a.ack-btn:hover { background: var(--ack-zwart) !important; color: var(--ack-tekst) !important; }
.ack-offerte .forminator-ui .forminator-multi-upload-message p a.ack-btn:focus-visible { outline: 2px solid var(--ack-zwart) !important; outline-offset: 3px; }
.ack-offerte .forminator-ui .forminator-button-submit { background: var(--ack-oranje) !important; color: var(--ack-zwart) !important; font-family: "Oswald", sans-serif !important; font-size: 16px !important; padding: 12px 22px !important; border-radius: var(--ack-radius) !important; font-weight: 600 !important; text-transform: uppercase; letter-spacing: .03em; }
/* Lucht boven de verzendknop (Lotte 12 okt: knop stond te dicht op het privacyvinkje/Turnstile). */
.ack-offerte .forminator-ui .forminator-row-last { margin-top: 32px !important; }
.ack-offerte .forminator-ui .forminator-turnstile { margin-top: 16px; }
/* Melding na verzenden: Forminator scrolt ernaartoe; niet onder de vaste menubalk (96 px) laten verdwijnen. */
.ack-offerte .forminator-ui .forminator-response-message { scroll-margin-top: 120px; }
.ack-offerte .forminator-ui .forminator-button-submit:hover,.ack-offerte .forminator-ui .forminator-button-submit:focus-visible { background: var(--ack-tekst) !important; color: var(--ack-zwart) !important; }

/* ---- Dienstpagina's (Task 12). Selectors met 2 klassen: Elementors ".elementor img { height: auto }" wint anders. ---- */
.ack-sectie + .ack-sectie:not(.ack-sectie--sub) { border-top: 1px solid var(--ack-vlak); }
.ack-sectie--sub { padding-block: 8px !important; }
.ack-merken { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 32px; margin-block: 16px; }
.ack-merken > span { display: contents; }
.ack-merken .ack-merk { height: 48px; width: auto; max-width: 180px; object-fit: contain; filter: grayscale(1); opacity: .85; }
.ack-cerakote-banner { display: flex; justify-content: center; align-items: center; }
.ack-cerakote-banner .ack-cerakote-badge { display: block; margin-inline: auto; width: min(280px, 60vw); height: auto; } /* geen filter, geen opacity, geen link: logo onveranderd (§3) */
/* Infographics (Ruling R10): onbijgesneden, gecentreerd, allemaal even breed, niet in de lightbox. */
.ack-infographic { margin: 8px auto 16px; max-width: 700px; width: 100%; }
.ack-infographic .ack-infographic__img { display: block; width: 100%; height: auto; }

/* ---- Startpagina (spec §6.1, Task 13). Logo-selector met 2 klassen: ".elementor img { height: auto }" wint anders. ---- */
#content .ack-hero h1 { font-size: clamp(2.4rem, 5vw, 4rem); line-height: 1.1; max-width: 18ch; }
#content .e-con.ack-hero { --padding-top: clamp(64px, 9vw, 120px); --padding-bottom: clamp(72px, 11vw, 160px); } /* ruimte voor de lijnen */
.ack-knoppen { flex-wrap: wrap; align-items: center; }
.ack-tegels .ack-tegel { flex: 1 1 0; min-width: 0; } /* boxed containers: kinderen staan in .e-con-inner */
.ack-tegel .ack-tegel__logo { height: 120px; width: auto; max-width: 100%; object-fit: contain; margin-inline: auto; display: block; } /* geen filter, geen opacity, geen link (§3) */
.ack-tegel .elementor-widget-html:last-child { margin-top: auto; } /* tekstlinks op één lijn onderaan */
/* Tegellink (opmaakronde 2 §4): rustige oranje tekstlink, geen knopvorm; onderstreept bij hover/focus. */
.ack-meer { color: var(--ack-oranje); text-decoration: none; font-family: "Oswald", sans-serif; font-size: 18px; font-weight: 600; letter-spacing: .02em; }
.ack-meer:hover, .ack-meer:focus-visible { color: var(--ack-oranje); text-decoration: underline; text-underline-offset: 4px; }
.ack-tegel__meer { margin: 0; }
/* Hele tegel klikbaar (Lotte 9 okt): de tekstlink blijft de enige link, zijn ::after bedekt de tegel ("stretched link").
   Elementor zet position: relative op elke widget; binnen de tegel static, zodat .ack-tegel het ankerpunt is.
   Het logo zelf blijft geen link naar cerakote.com (§3): de tegel gaat naar onze eigen pagina. */
.ack-tegel { position: relative; transition: box-shadow .15s, transform .15s; }
.ack-tegel .elementor-widget, .ack-tegel .elementor-widget-container, .ack-tegel .ack-tegel__meer { position: static; }
.ack-tegel .ack-meer::after { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 1; }
.ack-tegel:hover { box-shadow: inset 0 0 0 2px var(--ack-oranje); transform: translateY(-2px); }
.ack-tegel:hover .ack-meer { text-decoration: underline; text-underline-offset: 4px; }
.ack-tegel:has(.ack-meer:focus-visible) { outline: 3px solid var(--ack-oranje); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .ack-tegel { transition: none; } .ack-tegel:hover { transform: none; } }
.ack-troeven ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ack-gap); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.ack-troeven li { background: var(--ack-vlak); padding: 20px; border-radius: var(--ack-radius); }
.ack-troeven strong { display: block; font-family: "Oswald", sans-serif; color: var(--ack-oranje); font-size: 1.3em; }
.ack-cta, .ack-cta > .e-con-inner { text-align: center; align-items: center; }
.ack-cta > .e-con-inner { padding-inline: var(--ack-pad); box-sizing: border-box; }
#content .ack-cta .elementor-widget-text-editor p { margin-inline: auto; }
.ack-cta .elementor-widget-button { justify-content: center; } /* .ack-btn maakt de widget zelf flex */
@media (max-width: 921px) { .ack-tegels { --flex-direction: column; } .ack-tegels > .e-con-inner { flex-direction: column !important; } }

/* ---- Instagram-feed als fotoraster (spec §6.6, opmaakronde 3 B). Markup van Smash Balloon Instagram Feed gratis 6.14.0
   (templates/feed.php, item.php, footer.php): #sb_instagram.sbi.sbi_col_N > #sbi_images[role=list] >
   .sbi_item[role=listitem] > .sbi_photo_wrap > a.sbi_photo (span.sbi-screenreader + img); daarna #sbi_load met
   button.sbi_load_btn > .sbi_btn_text ("Meer laden") en .sbi_follow_btn > a (svg + "Volg ons op Instagram").
   Vierkant (1:1): de standaard van de plugin; Instagram levert 1:1, 4:5 en liggende beelden door elkaar en een
   vierkante uitsnede (object-fit) geeft een rustig raster. De plugin zet de hoogte ook met JS (setImageHeight). ---- */
.ack-feed #sb_instagram { width: 100% !important; padding: 0 !important; background: none !important; }
.ack-feed #sb_instagram #sbi_images { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ack-gap) !important; padding: 0 !important; }
.ack-feed #sb_instagram #sbi_images .sbi_item { background: var(--ack-vlak); border-radius: var(--ack-radius); overflow: hidden; outline: 2px solid transparent; transition: outline-color .15s; }
.ack-feed #sb_instagram #sbi_images .sbi_item:hover, .ack-feed #sb_instagram #sbi_images .sbi_item:has(.sbi_photo:focus-visible) { outline-color: var(--ack-oranje); }
.ack-feed #sb_instagram .sbi_photo { aspect-ratio: 1 / 1; height: auto !important; }
.ack-feed #sb_instagram .sbi_photo img { width: 100%; height: 100% !important; object-fit: cover; }
.ack-feed #sb_instagram #sbi_load { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: var(--ack-gap); padding: 0; }
.ack-feed #sb_instagram #sbi_load .sbi_load_btn, .ack-feed #sb_instagram .sbi_follow_btn a {
  background: transparent !important; color: var(--ack-tekst) !important; border: 2px solid var(--ack-oranje); border-radius: var(--ack-radius);
  font-family: "Oswald", sans-serif; font-weight: 600; text-transform: uppercase; font-size: 16px; padding: 10px 20px; box-shadow: none; }
.ack-feed #sb_instagram #sbi_load .sbi_load_btn:hover, .ack-feed #sb_instagram #sbi_load .sbi_load_btn:focus-visible,
.ack-feed #sb_instagram .sbi_follow_btn a:hover, .ack-feed #sb_instagram .sbi_follow_btn a:focus-visible { background: var(--ack-oranje) !important; color: var(--ack-zwart) !important; }
.ack-feed #sb_instagram .sbi_follow_btn { margin: 0 !important; }
.ack-feed--home #sb_instagram .sbi_item:nth-child(n+4 of .sbi_item) { display: none !important; } /* gratis versie: "num" in de shortcode telt niet */
.ack-feed--home #sb_instagram #sbi_load { display: none; } /* startpagina: knop "Alle projecten" volstaat */
@media (max-width: 1024px) { .ack-feed #sb_instagram #sbi_images { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .ack-feed #sb_instagram #sbi_images { grid-template-columns: 1fr; } }
/* Review Focus 4: geen foutmelding of leeg kader voor bezoekers. inc/feed.php geeft bezoekers zonder berichten al
   niets terug en haalt #sbi_mod_error weg; deze regels zijn het vangnet. */
body:not(.logged-in) #sbi_mod_error, body:not(.logged-in) #sb_instagram .sb_instagram_error { display: none !important; }
body:not(.logged-in) .ack-feed:not(:has(.sbi_item, .ack-fb-pagina)) { display: none; } /* geen koppeling of 0 berichten: geen lege ruimte */
/* Reserve: Facebook Page Plugin ([ack_facebook_pagina], opmaakronde 3 B §6). Max. 500 px breed (grens van Facebook),
   gecentreerd; Complianz zet er tot toestemming ons vervangbeeld met de knop "Facebook-berichten laden" op. */
.ack-fb-pagina { max-width: 500px; margin-inline: auto; }
.ack-fb-pagina iframe { display: block; width: 100%; max-width: 500px; height: 800px; border: 0; background: var(--ack-vlak); }

/* ---- Bandenmaat in vakjes (klant 20 okt; assets/js/ack-offerte.js) ----
   Elk vakje een eigen kleur, zoals het voorbeeld van de klant; dezelfde kleuren in "Voorbeeld: 205/55 R16 91V".
   Het echte Forminator-veld blijft in de pagina (verplicht-controle), maar onzichtbaar. */
.ack-offerte { --ack-maat-1: #DD7D3D; --ack-maat-2: #6EC1E4; --ack-maat-3: #8BD17C; --ack-maat-4: #F29BC4; --ack-maat-5: #F2D65B; }
.ack-offerte .forminator-ui .ack-maat input.ack-maat__bron { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; border: 0 !important; opacity: 0; pointer-events: none; }
.ack-maat__vakjes { display: flex; align-items: flex-start; gap: 8px; flex-wrap: wrap; margin: 4px 0 2px; }
.ack-maat__vak { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.ack-maat__vak input { width: 4.2em; height: 48px; text-align: center; font-family: "Open Sans", sans-serif; font-size: 20px; font-weight: 600; color: var(--ack-zwart); background: #fff; border: 3px solid var(--ack-maat-1); border-radius: var(--ack-radius); padding: 0 4px; text-transform: uppercase; }
.ack-maat__vak--2 input { border-color: var(--ack-maat-2); width: 3.4em; }
.ack-maat__vak--3 input { border-color: var(--ack-maat-3); width: 3.4em; }
.ack-maat__vak--4 input { border-color: var(--ack-maat-4); width: 4.2em; }
.ack-maat__vak--5 input { border-color: var(--ack-maat-5); width: 2.6em; }
.ack-maat__vak input:focus-visible { outline: 3px solid var(--ack-tekst); outline-offset: 2px; }
.ack-maat__vak span { font-family: "Open Sans", sans-serif; font-size: 14px; color: var(--ack-tekst-2); }
.ack-maat__teken { font-family: "Oswald", sans-serif; font-size: 24px; line-height: 48px; color: var(--ack-tekst); }
.ack-maat__hint { margin: 4px 0 0; color: var(--ack-oranje); font-size: 16px; }
.ack-maat__hint:empty { display: none; }
.ack-maat__voorbeeld { margin: 4px 0 0; font-family: "Open Sans", sans-serif; font-size: 18px; color: var(--ack-tekst); }
/* Marges (Lotte 20 okt): elk veld 20 px uit elkaar, ook velden zonder invoerkader (keuzerondjes, vinkjes), zodat het
   volgende label niet tegen de opties plakt. Verborgen velden (voorwaarden) nemen geen ruimte in. */
.ack-offerte .forminator-ui .forminator-row:not(.forminator-row-last):not(.forminator-hidden) { margin-bottom: 20px !important; }
.ack-offerte .forminator-ui .forminator-description { display: block; margin-top: 6px; color: var(--ack-tekst-2) !important; }
.ack-maat__vakjes { margin-top: 8px; }
.ack-maat__voorbeeld b { font-weight: 700; }
.ack-maat__k1 { color: var(--ack-maat-1); } .ack-maat__k2 { color: var(--ack-maat-2); } .ack-maat__k3 { color: var(--ack-maat-3); } .ack-maat__k4 { color: var(--ack-maat-4); } .ack-maat__k5 { color: var(--ack-maat-5); }
@media (max-width: 600px) {
  /* Gsm: alle vijf vakjes op één regel (375 px); het label mag afbreken (snelheids-/index) en bepaalt de breedte niet. */
  .ack-maat__vakjes { gap: 4px; flex-wrap: nowrap; }
  .ack-maat__vak input { font-size: 18px; height: 44px; width: 3.1em; padding: 0 2px; }
  .ack-maat__vak--2 input, .ack-maat__vak--3 input { width: 2.6em; }
  .ack-maat__vak--4 input { width: 2.8em; }
  .ack-maat__vak--5 input { width: 2.2em; }
  .ack-maat__vak span { font-size: 12px; text-align: center; hyphens: manual; width: min-content; max-width: 100%; }
  .ack-maat__vak { min-width: 0; }
  .ack-maat__teken { font-size: 20px; line-height: 44px; }
}