in de band die
hem links en rechts laten uitvloeien. Die elementen zijn bij de import verdwenen,
waardoor de kaarten er hard afgesneden uitzien. Hersteld met pseudo-elementen, zodat
de Bricks-data ongemoeid blijft. (.revmarq heeft al position:relative.) */
.itl-import .revmarq::before,
.itl-import .revmarq::after { content:""; position:absolute; top:0; bottom:0; width:120px; z-index:2; pointer-events:none; }
.itl-import .revmarq::before { left:0; background:linear-gradient(to right, var(--licht), rgba(243,245,247,0)); }
.itl-import .revmarq::after { right:0; background:linear-gradient(to left, var(--licht), rgba(243,245,247,0)); }
@media (max-width:640px){ .itl-import .revmarq::before, .itl-import .revmarq::after { width:50px; } }
/* 4) MOBIEL — style.css verbergt onder 980px wél .hdr__cta en toont .hdr__burger, maar
laat .hdr__nav{display:flex} staan. Op de staging bleven de vijf desktop-menulinks
daardoor in de header staan: die maakten de header breder dan het scherm, waardoor
html,body{overflow-x:hidden} de hele pagina rechts afkapte (hero-tekst half weg) en
de burger buiten beeld werd geduwd. De burger vervangt dit menu, dus hier weg. */
@media (max-width:980px){
.itl-import .hdr__nav { display:none; }
}
/* 5) GOUDEN ACCENTLIJNTJES in de kaarten. Live staat daar per kaart een
; de import nam die niet mee. .mcard is een
flex-kolom, dus ::after wordt exact hetzelfde laatste item. */
.itl-import .mcard::after { content:""; display:block; width:40px; height:2px; background:var(--goud); border-radius:2px; margin-top:16px; }
/* ===== Hero-formulier — alleen desktop (toegevoegd 04-08) ===== */
.hero__formcol{
position:relative;overflow:hidden;background:#fff;
border:1.5px solid var(--line,#e5e9f0);border-radius:18px;
padding:32px 30px 28px;box-shadow:0 18px 46px rgba(11,31,58,.10);
}
.hero__formcol::before{
content:"";position:absolute;top:0;left:0;right:0;height:4px;
background:linear-gradient(90deg,var(--goud,#C9A227),#e6cf74);
}
.hero__formtitel{font:700 1.42rem/1.22 'Playfair Display',Georgia,serif;color:var(--navy,#0B1F3A);margin:0 0 8px}
.hero__formsub{font:400 .92rem/1.55 'Montserrat',sans-serif;color:#5a6478;margin:0 0 22px}
.hero__form .form-group{margin-bottom:15px}
.hero__form label{display:block;font:600 .8rem/1.3 'Montserrat',sans-serif;color:var(--navy,#0B1F3A);margin-bottom:6px}
.hero__form input,.hero__form textarea,.hero__form select{
width:100%;padding:13px 15px;border:1.5px solid var(--line,#e5e9f0);border-radius:12px;
font:400 .95rem/1.4 'Montserrat',sans-serif;color:var(--ink,#1A1A1A);background:#fff;transition:.18s;
}
.hero__form input:focus,.hero__form textarea:focus{
outline:0;border-color:var(--goud,#C9A227);box-shadow:0 0 0 3px rgba(201,162,39,.16);
}
.hero__form textarea{min-height:86px;resize:vertical}
.hero__form button[type=submit].bricks-button,.hero__form button[type=submit]{
width:100%;margin-top:4px;background:var(--navy,#0B1F3A);color:#fff;border:0;border-radius:12px;
padding:16px 24px;font:600 .97rem/1 'Montserrat',sans-serif;cursor:pointer;transition:.18s;
}
.hero__form button[type=submit]:hover{background:#16305a;transform:translateY(-1px);box-shadow:0 8px 22px rgba(11,31,58,.22)}
/* Hero-grid: 2 kolommen op desktop blijft; formulier verdwijnt onder tablet-breedte */
@media(max-width:991px){.hero__formcol{display:none!important}}
/* submit-wrapper mag de knop vol-breed maken */
.hero__form .form-group.submit-button-wrapper{display:block;width:100%;margin-bottom:0}
.hero__form .form-group.submit-button-wrapper button[type=submit]{width:100%;display:block}
/* ===== Hero-formulier op DONKERE hero (regio-/dienstpagina's) — 04-08 =====
* Daar staat het formulier op navy: labels/kop/knop moeten licht zijn,
* anders is het navy-op-navy en onleesbaar. */
.phero .hero__formtitel,
.phero__form .hero__formtitel,
.phero__form > h2,
.phero__form .serif{color:#fff!important}
.phero__form .hero__form label{color:#fff!important;opacity:.92}
.phero__form .hero__form input,
.phero__form .hero__form textarea{
background:rgba(255,255,255,.97)!important;border-color:rgba(255,255,255,.35)!important;color:#0B1F3A!important;
}
.phero__form .hero__form input:focus,
.phero__form .hero__form textarea:focus{
border-color:var(--goud,#C9A227)!important;box-shadow:0 0 0 3px rgba(201,162,39,.35)!important;
}
.phero__form .hero__form button[type=submit]{
background:var(--goud,#C9A227)!important;color:#0B1F3A!important;font-weight:700;
}
.phero__form .hero__form button[type=submit]:hover{
background:#dcb534!important;box-shadow:0 8px 22px rgba(201,162,39,.35)!important;
}
/* op deze pagina's mag het formulier óók op mobiel zichtbaar blijven:
het is daar de enige aanvraagmogelijkheid in beeld */
@media(max-width:991px){.phero__form{display:block!important}}
/* ===== 04-08: leesbaarheid + balans op pc =====================================
* 1. Tekstsecties naast één foto: de tekstkolom werd tot 1700px hoog terwijl de
* foto 390px was -> een enorm wit gat rechts. De foto scrollt nu mee (sticky)
* en blijft in beeld naast de tekst.
* 2. Alinea's plakten aan elkaar; koppen hadden geen lucht erboven.
* 3. Het hero-formulier was hoger dan de tekst ernaast -> compacter, twee kolommen. */
@media (min-width:992px){
.band__grid{align-items:start!important;grid-template-columns:1.12fr .88fr!important;gap:60px!important}
.band__grid > *:last-child{position:sticky;top:104px;align-self:start}
}
/* leesritme in tekstsecties */
.band__grid p,
.band__grid .brxe-text-basic{margin-bottom:1.05em;line-height:1.8}
.band__grid h2,
.band__grid .brxe-heading{margin-top:1.7em;margin-bottom:.45em;line-height:1.2}
.band__grid > *:first-child > *:first-child{margin-top:0}
/* ---- compacter hero-formulier (2 kolommen op pc) ---- */
@media (min-width:992px){
.phero__form .hero__form,
.hero__formcol .hero__form{display:grid;grid-template-columns:1fr 1fr;column-gap:14px}
.phero__form .hero__form .form-group,
.hero__formcol .hero__form .form-group{margin-bottom:11px}
/* laatste velden en de knop over de volle breedte */
.phero__form .hero__form .form-group:nth-last-child(-n+2),
.hero__formcol .hero__form .form-group:nth-last-child(-n+2){grid-column:1 / -1}
}
.phero__form .hero__form textarea,
.hero__formcol .hero__form textarea{min-height:70px}
.phero__form .hero__form label,
.hero__formcol .hero__form label{font-size:.74rem;margin-bottom:4px}
.phero__form .hero__form input,
.phero__form .hero__form textarea,
.hero__formcol .hero__form input,
.hero__formcol .hero__form textarea{padding:11px 13px;font-size:.92rem}
.phero__form .hero__form button[type=submit],
.hero__formcol .hero__form button[type=submit]{padding:14px 22px}
/* De body had overflow-x:hidden (tegen horizontaal scrollen). Dat maakt van de
* body een scroll-container, waardoor position:sticky niet meer werkt. 'clip'
* blokkeert horizontaal scrollen zonder scroll-container -> sticky werkt weer. */
html{overflow-x:clip}
body.itl-import{overflow-x:clip!important;overflow-y:visible!important}
/* ===== 04-08: tekstmuur opbreken =============================================
* Lange dienstteksten kregen halverwege een foto (de eigen uitgelichte
* afbeelding van de klant) plus meer typografisch ritme. */
/* Bricks zet de klasse op de ![]()
zelf, niet op een omhulsel */
img.tekstfoto,.tekstfoto img{
width:100%;height:auto;display:block;margin:34px 0 30px;border-radius:16px;
box-shadow:0 14px 40px rgba(11,31,58,.14);
}
/* openingsalinea van een tekstsectie iets groter -> duidelijke instap */
/* let op: de kicker is het eerste tekstblok in de kolom -> uitsluiten,
anders verliest die zijn gouden kleur */
.band__grid > *:first-child > .brxe-text-basic:not(.kicker):nth-of-type(1){
font-size:1.06em;line-height:1.75;
}
/* koppen krijgen een goud accentstreepje: breekt de tekstmuur visueel */
.band__grid h2,
.band__grid .brxe-heading h2{position:relative;padding-top:18px}
.band__grid h2::before,
.band__grid .brxe-heading h2::before{
content:"";position:absolute;top:0;left:0;width:46px;height:3px;border-radius:2px;
background:linear-gradient(90deg,var(--goud,#C9A227),rgba(201,162,39,.25));
}
/* comfortabele regellengte in de tekstkolom */
@media (min-width:992px){
.band__grid > *:first-child{max-width:66ch}
}
/* ===== Offerte-pagina: bestaand formulier passend maken op donkere hero ===== */
.offerte-gf .gform_wrapper{margin:0!important}
.offerte-gf .gform_wrapper form{margin:0}
.offerte-gf .gform_wrapper .gform_heading{display:none}
.offerte-gf .gfield_label,
.offerte-gf .gform_wrapper label{color:#fff!important;font:600 .78rem/1.3 'Montserrat',sans-serif!important;letter-spacing:.01em}
.offerte-gf .gform_wrapper input[type=text],
.offerte-gf .gform_wrapper input[type=email],
.offerte-gf .gform_wrapper input[type=tel],
.offerte-gf .gform_wrapper textarea,
.offerte-gf .gform_wrapper select{
background:rgba(255,255,255,.97)!important;border:1.5px solid rgba(255,255,255,.35)!important;
border-radius:12px!important;padding:11px 13px!important;color:#0B1F3A!important;font-size:.92rem!important;
}
.offerte-gf .gform_wrapper input:focus,
.offerte-gf .gform_wrapper textarea:focus{
border-color:var(--goud,#C9A227)!important;box-shadow:0 0 0 3px rgba(201,162,39,.35)!important;outline:0!important;
}
.offerte-gf .gform_wrapper textarea{min-height:80px!important}
.offerte-gf .gform_footer input[type=submit],
.offerte-gf .gform_wrapper .gform_button{
width:100%!important;background:var(--goud,#C9A227)!important;color:#0B1F3A!important;border:0!important;
border-radius:12px!important;padding:14px 22px!important;font:700 .95rem/1 'Montserrat',sans-serif!important;cursor:pointer;
}
.offerte-gf .gform_footer input[type=submit]:hover{background:#dcb534!important}
.offerte-gf .gfield_description,.offerte-gf .gform_validation_errors{color:#fff!important}
/* Contactgegevens en subtitel op de donkere offerte-hero leesbaar maken */
.phero .hero__usps a,
.phero__form .hero__formsub,
.phero .hero__usps{color:#fff!important}
.phero .hero__usps a{text-decoration:none;border-bottom:1px solid rgba(201,162,39,.6);padding-bottom:1px}
.phero .hero__usps a:hover{color:var(--goud,#C9A227)!important;border-bottom-color:var(--goud,#C9A227)}
.phero__form .hero__formsub{opacity:.85}
/* ===== Nieuwsindex: kop-blok + leesbaardere artikelkaarten ===== */
.nieuws-hero{padding:64px 0 48px}
.nieuws-hero .wrap{max-width:1240px;margin:0 auto;padding:0 24px}
.nieuws-hero .kicker{color:var(--goud,#C9A227)}
.nieuws-hero h1{color:#fff;margin:6px 0 10px}
.nieuws-hero .lead{color:rgba(255,255,255,.85);max-width:62ch}
/* artikeltitels in het overzicht waren piepklein */
body.blog .brxe-post-title a,
body.blog h2 a,
body.blog .brxe-text-basic a[href*="/wpemi/"]{
font:700 1.12rem/1.35 'Playfair Display',Georgia,serif;color:var(--navy,#0B1F3A);text-decoration:none;
}
body.blog .brxe-post-title a:hover,body.blog h2 a:hover{color:var(--goud,#C9A227)}
/* ===== Vangnet: ALLE tekst/velden op een donkere hero altijd licht ===========
* Eerder gold dit alleen voor .hero__form. Handgebouwde formulieren (.form) en
* losse labels binnen .phero bleven navy-op-navy staan. Deze regels dekken alle
* varianten af, ook toekomstige pagina's. */
.phero label,
.phero .form label,
.phero .gfield_label,
.phero__form label,
.phero__form h2,
.phero__form h3,
.phero__form .serif,
.phero .kicker + *,
.phero p:not(.hero__formsub){color:#fff}
.phero .form input,
.phero .form textarea,
.phero .form select,
.phero__form input,
.phero__form textarea,
.phero__form select{
background:rgba(255,255,255,.97)!important;color:#0B1F3A!important;
border:1.5px solid rgba(255,255,255,.35)!important;border-radius:12px!important;
}
.phero .form input::placeholder,
.phero__form input::placeholder,
.phero .form textarea::placeholder,
.phero__form textarea::placeholder{color:#6b7688!important;opacity:1}
.phero .form input:focus,
.phero__form input:focus,
.phero .form textarea:focus,
.phero__form textarea:focus{
border-color:var(--goud,#C9A227)!important;box-shadow:0 0 0 3px rgba(201,162,39,.35)!important;outline:0!important;
}
.phero .form button[type=submit],
.phero__form button[type=submit],
.phero .form .btn--primary{
background:var(--goud,#C9A227)!important;color:#0B1F3A!important;border:0!important;font-weight:700;
}
/* ===== Leesbaarheid gouden tekst op lichte achtergrond (WCAG AA) ============
* Het merkgoud #C9A227 haalt op wit maar 2,4:1 — te licht voor tekst. Op de
* donkere hero is datzelfde goud juist prima (6,8:1), dus daar niets wijzigen.
* Klein/uppercase label -> #8C6D14 (4,9:1). Grote kop-accenten -> #A8861D
* (3,5:1, voldoet voor grote tekst en blijft dicht bij de huisstijl). */
.kicker,
.sec .kicker,
.band__grid .kicker{color:#8C6D14}
h1 .accent,h2 .accent,h3 .accent,
.hero h1 .accent{color:#A8861D}
/* Op donkere vlakken blijft het merkgoud staan (daar is contrast juist goed) */
.phero .kicker,
.nieuws-hero .kicker,
.phero h1 .accent,
.phero h2 .accent,
[class*="--inv"] .kicker,
.ftr .kicker,
footer .kicker{color:var(--goud,#C9A227)}
/* "Lees meer"-links stonden in merkgoud op wit (2,42:1) — te licht voor tekst.
* Zelfde aanpak: donkerder goud op licht, merkgoud blijft op donkere vlakken. */
.goud,
a .goud,
.card .goud,
.mcard .goud{color:#8C6D14}
.phero .goud,
.nieuws-hero .goud,
[class*="--inv"] .goud,
footer .goud,
.ftr .goud{color:var(--goud,#C9A227)}
/* ===== Mobiele leesbaarheid & aanraakvlakken (04-08) =========================
* Gemeten op 390px: de slogan onder het logo stond op 6,7px (onleesbaar) en de
* knoppen in de header waren 34-36px hoog terwijl de richtlijn 44px is. */
@media (max-width:640px){
.hdr__brand .brand-slogan{font-size:9px!important;letter-spacing:.06em!important}
/* aanraakvlakken naar 44px zonder de header hoger te maken */
.hdr__burger,.hdr__tel{width:44px!important;height:44px!important}
.ef-menu__x{width:44px!important;height:44px!important;display:flex;align-items:center;justify-content:center}
/* kleine bijschriften niet onder 12px */
.hdr__in .tb-kort,.topbar span{font-size:12px}
}
/* Formulierlabels stonden op 11,8px op mobiel; iets groter leest een stuk
* prettiger bij het invullen. Cookieknop was 37px hoog (richtlijn 44px). */
@media (max-width:640px){
.hero__form label,
.phero__form label{font-size:12.5px!important;margin-bottom:5px}
.cookie-banner button,
.cookie-banner .btn{min-height:44px!important;padding:11px 22px!important}
}
/* ===== 05-08: footer-slogan verbergen =========================================
* .ftr__tag ("Administratie & Belastingadvies") overlapte het footer-logo. */
.ftr__tag { display: none !important; }
/* ===== 05-08: nieuws-archief kaartachtergrond =================================
* Bricks posts-element rendert .bricks-layout-inner zonder achtergrond/randen. */
body.blog .bricks-layout-inner {
background: #fff;
border-radius: 14px;
overflow: hidden;
box-shadow: 0 3px 18px rgba(11,31,58,.07);
border: 1px solid #e5e9f0;
transition: box-shadow .22s;
height: 100%;
}
body.blog .bricks-layout-inner:hover {
box-shadow: 0 8px 28px rgba(11,31,58,.13);
}
body.blog .bricks-layout-inner .content-wrapper {
padding: 16px 20px 20px;
}
body.blog .bricks-layout-inner figure.image-wrapper {
margin: 0;
overflow: hidden;
}
body.blog .bricks-layout-inner figure.image-wrapper img {
width: 100%;
height: auto;
display: block;
transition: transform .32s ease;
}
body.blog .bricks-layout-inner:hover figure.image-wrapper img {
transform: scale(1.04);
}
/* ===== Footer brand: icon + goud/wit (niet volledig wit logo) ================= */
.ftr__brand {
display: flex !important;
align-items: center;
gap: clamp(14px, 2.5vw, 28px);
text-decoration: none !important;
margin: 0 0 18px !important;
max-width: min(720px, 100%);
animation: none;
}
.ftr__brand-icon {
width: clamp(96px, 14vw, 156px) !important;
height: auto !important;
flex: 0 0 auto;
display: block !important;
filter: none;
}
.ftr__brand-tekst { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
.ftr__brand-naam {
font: 700 clamp(1.65rem, 3.8vw, 2.85rem)/1.05 'Montserrat', sans-serif;
color: #fff !important;
letter-spacing: .05em;
text-shadow: 0 2px 18px rgba(0,0,0,.25);
}
.ftr__brand-naam .goud { color: #e8c04a !important; text-shadow: none; }
.ftr__brand-slogan {
margin-top: 8px;
font: 500 clamp(.82rem, 1.6vw, 1rem)/1.4 'Montserrat', sans-serif;
color: #c8d4e4 !important;
letter-spacing: .03em;
}
.ftr__brand:hover .ftr__brand-icon {
filter: none;
transform: scale(1.03);
}
.ftr__brand:hover .ftr__brand-naam .goud { color: #f5d878 !important; }
/* Premium footer — plat navy, geen gradient/shine */
#brx-footer,
#brx-footer.ftr,
#brx-footer .ftr,
.ftr.itl-footer,
.ftr.ftr--v2,
footer.ftr {
position: relative;
background: #0B1F3A !important;
background-image: none !important;
box-shadow: none !important;
border-top: none !important;
filter: none !important;
}
#brx-footer::before,
#brx-footer::after,
#brx-footer .ftr::before,
#brx-footer .ftr::after,
.ftr.itl-footer::before,
.ftr.itl-footer::after,
.ftr::before,
.ftr::after {
content: none !important;
display: none !important;
background: none !important;
box-shadow: none !important;
}
#brx-footer .ftr h3,
#brx-footer .ftr h4,
#brx-footer .ftr .brxe-heading,
.ftr h3, .ftr h4, .ftr .brxe-heading {
color: #f2d98a !important;
letter-spacing: .06em;
text-shadow: none;
}
#brx-footer .ftr a:hover, .ftr a:hover { color: #f8e6a8 !important; }
#brx-footer .ftr .muted-inv, .ftr .muted-inv { color: #d2dce9 !important; }
#brx-footer .ftr__base, .ftr__base {
border-top: 1px solid rgba(255,255,255,.12) !important;
background: #0B1F3A !important;
color: #b5c4d9 !important;
}
.ftr__grid > div:first-child,
.ftr .ftr__grid > .brxe-div:first-child { max-width: min(720px, 100%) !important; }
@media (max-width: 760px) {
#brx-footer .ftr .ftr__grid > .brxe-div:first-child,
.ftr__grid > div:first-child { text-align: center; max-width: 100% !important; }
.ftr__brand {
flex-direction: column;
align-items: center;
text-align: center;
margin-inline: auto !important;
}
.ftr__brand-tekst { align-items: center; }
}
@media (prefers-reduced-motion: reduce) {
.ftr__brand, .ftr__brand-icon { animation: none !important; transition: none !important; }
}
/* ===== 05-08: blog- en losse pagina's centreren ==========================
* Die sjablonen gebruiken een kale Bricks-container zonder de eigen wrap-klasse.
* max-width stond goed (1200px), maar zonder auto-marges plakte de hele kolom
* tegen de linkerrand van het scherm. */
.brxe-container {
margin-inline: auto;
}
@media (max-width: 1280px) {
.brxe-container { padding-inline: 20px; }
}
/* ===== 06-08: nieuwsoverzicht — kaartafstanden =========================
* Gemeten op 1280 / 834 / 390 px. Drie dingen stonden mis:
* 1. het raster bleef ook op een telefoon 2 koloms -> kaarten van 161px;
* 2. de tussenruimte kwam uit padding op de kaart zelf (0 30px 30px 0),
* dus scheef: alleen rechts en onder ruimte;
* 3. binnen de kaart stonden titel, datum en tekst met 0px ertussen.
*
* Let op: het raster is ul.bricks-layout-wrapper, NIET .brxe-posts — die
* laatste is de buitenste wrapper. Beide een raster maken geeft vier kaarten
* per rij. Bricks zet zijn eigen regels op het id van het blok, en een id wint
* van een klasse; vandaar !important. */
.brxe-posts .bricks-layout-wrapper {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 30px !important;
}
.brxe-posts .bricks-layout-item.repeater-item {
padding: 0; /* was de tussenruimte; die hoort in gap */
height: 100%;
}
.brxe-posts .bricks-layout-item .content-wrapper {
display: flex;
flex-direction: column;
gap: 8px; /* titel / datum / samenvatting plakten aan elkaar */
padding: 18px 20px 22px;
}
/* Op 834px (tablet staand) passen twee kaarten van ~360px prima; pas onder
700px wordt dat te smal. */
@media (max-width: 700px) {
.brxe-posts .bricks-layout-wrapper {
grid-template-columns: 1fr !important;
gap: 24px !important;
}
}
/* ===== 06-08: nieuwskaarten — beeldformaat en witruimte =================
* Gemeten op de overzichtspagina: onder de tekst stond 268-319px wit (desktop)
* en 136-144px (telefoon), en de beelden hadden per bericht een andere
* verhouding (1.00 tot 1.78) waardoor de rij ongelijk oogde.
*
* Twee oorzaken: het raster rekte alle kaarten naar de hoogste (align-items
* stretch) en die extra hoogte kwam in het tekstblok terecht; en de afbeelding
* werd 568px hoog gerenderd in een vak van 321px. */
.brxe-posts .bricks-layout-item .image-wrapper {
aspect-ratio: 16 / 10 !important; /* elk bericht hetzelfde beeldvlak */
/* De kaart is een flex-kolom; zonder dit krimpt het beeldvlak mee met de
resterende ruimte (gemeten 212px i.p.v. 355px) en klopt de verhouding niet. */
flex: 0 0 auto !important;
width: 100% !important;
height: auto !important;
overflow: hidden;
margin: 0;
}
/* Tussen het figure en de afbeelding zit nog een link; zonder hoogte daarop
puilt het beeld eruit (gemeten: link 568px hoog in een vak van 212px). */
.brxe-posts .bricks-layout-item .image-wrapper > a {
display: block !important;
width: 100% !important;
height: 100% !important;
}
.brxe-posts .bricks-layout-item .image-wrapper img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important; /* vult het vlak, ongeacht de bronverhouding */
display: block;
}
.brxe-posts .bricks-layout-wrapper {
align-items: start; /* kaart net zo hoog als zijn inhoud */
}
.brxe-posts .bricks-layout-item.repeater-item {
height: auto;
}
/* De samenvatting liep per bericht uiteen, waardoor de kaarten 50px in hoogte
verschilden. Drie regels maximaal houdt de rij gelijk zonder dat er onderin
een gat ontstaat (gelijke hoogtes afdwingen gaf juist die witruimte). */
.brxe-posts .bricks-layout-item .content-wrapper > div.dynamic:last-child {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* De eerste kaartenrij plakte tegen de onderkant van de hero (gemeten 0px).
Maat overgenomen van de eigen bouw op /emisfinance/nieuws/: 134px desktop,
100px op een telefoon. */
.brxe-posts {
margin-top: 134px !important;
}
@media (max-width: 700px) {
.brxe-posts { margin-top: 100px !important; }
}
/* ===== 06-08: FAQ-accordeon liep buiten beeld op mobiel =================
* Gemeten op 390px: het blok was 390px breed maar begon op x=20 (de padding
* van de container), dus liep het tot 410px en kon de pagina zijwaarts
* schuiven. Speelde op meerdere artikelpagina's. */
.brxe-accordion-nested {
/* Dit blok staat op position:absolute in een container met 20px padding.
Een percentage rekent dan tegen de PADDING-box (390px) en niet tegen de
inhoud (350px) — vandaar precies 20px overloop op een telefoon.
`auto` werkt hier niet: dan krimpt het naar de inhoud (gemeten 69px). */
width: calc(100% - 40px) !important;
max-width: calc(100% - 40px) !important;
}
.brxe-accordion-nested .brxe-block {
max-width: 100% !important;
}
/* Review-carrousel: rustiger tempo (06-08-2026).
De twee carrousels op de home en /werkwijze/ zetten hun snelheid in de HTML zelf, maar via
een variabele: style="animation-duration:var(--rev-speed,26s)". Door die variabele hier te
vullen wordt het tempo centraal geregeld zonder de pagina-inhoud aan te passen.
26s -> 36s en 34s -> 48s, gelijk tempo als de overige rijen (die staan op 56/64/73s). */
:root { --rev-speed: 36s; --rev-speed2: 48s; }
/* 07-08: knop-pijl zonder Bricks CSS (perf) */
.btn,.btn--primary,button.btn--primary{display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:8px!important}
.btn .ic,.btn svg,.btn--primary .ic,.btn--primary svg{width:18px!important;height:18px!important;flex:0 0 18px!important;max-width:18px!important;max-height:18px!important}
.hero__form button .loading,.phero__form button .loading,.brxe-form button .loading{display:none!important}
.hero__form button,.phero__form button,.brxe-form button[type=submit]{display:inline-flex!important;align-items:center!important;justify-content:center!important;min-height:auto!important;height:auto!important;padding:14px 22px!important}
/* [IT Live 07-08] Form-labels op MOBIEL leesbaar. De hero-form wordt <992px een WITTE
kaart, maar de labels bleven wit (bedoeld voor de donkere hero) -> wit-op-wit. Alle
form-labels op mobiel navy; desktop (navy hero) houdt witte labels. */
@media(max-width:991px){
body .phero__form .hero__form label,
body .phero__form label,
body .phero__form .form-group label,
body .offerte-gf .gfield_label,
body .offerte-gf .gform_wrapper label{color:#0B1F3A!important;opacity:1!important}
}
/* ITL-NO-FTR-BRAND-TEXT */
.ftr__brand-tekst,.ftr__brand-naam,.ftr__brand-slogan{display:none!important;}