positioneert t.o.v. .tap-tile (dat wél de volle tegelhoogte heeft) in plaats van t.o.v. die
0px-hoge wrapper. */
.tap-tile .elementor-widget-html { position: static; }
.elementor .tap-tile-link { position: absolute; inset: 0; z-index: 2; display: block; }
/* Tekstoverlay onderaan een fototegel (tap-tile): donkere gradient + H3 in wit (bv. /maatwerk/ "Onze
technieken"). rgba(31,34,36,...) is --tap-ink (#1F2224) as rgb(). */
.tap-tile-in {
position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
padding: 20px;
background: linear-gradient(0deg, rgba(31, 34, 36, .92) 15%, rgba(31, 34, 36, 0) 75%);
}
.tap-tile-in h3, .tap-tile-in .elementor-heading-title { color: #fff; margin: 0; }
a.tap-tile, .tap-tile a { color: inherit; text-decoration: none; display: block; }
/* Badge op de hero-foto van een techniekpagina (bv. "3 generaties · vakmanschap sinds 1972"). */
.tap-badge {
position: absolute; left: -1px; bottom: 24px;
background: var(--tap-ink); color: #fff;
padding: 14px 20px; border-radius: 0 12px 12px 0;
font-family: "Jost", sans-serif;
}
/* Ruling 25: Elementor's eigen stylesheet (handle "elementor-frontend") zet position:relative op elke
container (".e-con", zoals tap-tile-in) en op elke widget-wrapper (".elementor-widget", zoals
tap-badge, een text-editor-widget). tap-child laadt nu weliswaar NA elementor-frontend (zie
functions.php), maar we verhogen hier ook nog de specificiteit zodat de volgorde er zelfs niet toe
doet -- .e-con.tap-tile-in voor de container, .elementor-widget.tap-badge voor de widget. */
.e-con.tap-tile-in, .elementor-widget.tap-badge {
position: absolute;
}
.tap-badge b, .tap-badge strong {
display: block; line-height: 1; font-size: 26px; font-weight: 500; color: var(--tap-gold);
}
/* Werkwijze-rij van een techniekpagina: 4 stappen met scheidingslijnen (spec §6.3, Stap 8). */
.tap-steps { border-top: 1px solid var(--tap-line); border-bottom: 1px solid var(--tap-line); }
.tap-step { border-right: 1px solid var(--tap-line); }
.tap-step:last-child { border-right: 0; }
@media (max-width: 921px) {
.tap-steps { border-top: 0; border-bottom: 0; }
.tap-step { border-right: 0; border-bottom: 1px solid var(--tap-line); }
.tap-step:last-child { border-bottom: 0; }
}
/* Stapnummer (01, 02, ...) in de Werkwijze-rij. */
.tap-step-num, .tap-step-num p { font-family: "Jost", sans-serif; font-weight: 500; font-size: 50px; line-height: 1; color: var(--tap-gold); }
/* Telefoonnummer uit [tap_telefoon] als tel:-link (sinds 01/10). Zelfde kleur als de tekst eromheen
(bovenbalk, footer, goudvlak, contactblok: daar is het contrast al nagekeken), anders valt de standaard
linkkleur #7A6645 op antraciet of goud onder 4,5:1. Onderlijnd zodat het herkenbaar een link is. */
a.tap-phone, a.tap-phone:visited, a.tap-phone:hover, a.tap-phone:focus { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
a.tap-phone:hover, a.tap-phone:focus { text-decoration-thickness: 2px; }
/* Openingsuren-lijst uit [tap_openingsuren]. */
.tap-hours { list-style: none; margin: 0; padding: 0; }
.tap-hours { container-type: inline-size; }
.tap-hours li { display: flex; justify-content: space-between; gap: 16px; }
/* Dagen en uren breken nooit midden in een stuk. In een smalle kolom (footer, gsm) staan de uren onder de
dagen, voor alle rijen tegelijk zodat de lijst niet half naast, half onder elkaar staat. */
.tap-hours li span { white-space: nowrap; }
@container (max-width: 399px) {
.tap-hours li { flex-direction: column; gap: 0; }
.tap-hours li + li { margin-top: 8px; }
}
/* Compacte versie (footer, 02/10): dag en uren op één regel, ook in een smalle kolom (wint van de @container-regel). */
.tap-hours.tap-hours--kort li { display: grid; grid-template-columns: 2.2em 1fr; gap: 10px; font-size: 15px; line-height: 1.55; }
.tap-hours.tap-hours--kort li + li { margin-top: 2px; }
/* Sticky hoofdheader (Astra Pro niet geïnstalleerd/aangekocht; free-CSS-oplossing).
Sticky staat op #masthead zelf: .ast-main-header-wrap is te kort om als eigen
containing block te dienen (het scrollt na ~1 header-hoogte gewoon mee weg met
zijn ouder #masthead). De bovenste balk zit ook in #masthead en blijft dus mee
staan (mag van de brief: "de bovenbalk mag wegscrollen", geen harde eis). */
#masthead {
position: sticky;
top: 0;
z-index: 99;
background: #fff;
}
body.admin-bar #masthead {
top: 32px;
}
@media screen and (max-width: 782px) {
body.admin-bar #masthead {
top: 46px;
}
}
/* Productraster, filters en maatwerktegels van /producten/: zie het blok 'Producten, Contact, Bedankt' onderaan. */
/* Homepage (/): hero met achtergrondfoto + donkere gradiënt-overlay (Ruling 16: gratis Elementor's
eigen achtergrond+overlay-instellingen bestaan wel, maar we zetten dit als CSS-klasse zodat de
overlay-verhouding (90% links naar 15% rechts, spec §6.1) exact en herbruikbaar vastligt). */
.tap-hero-home {
position: relative;
min-height: 640px;
display: flex;
align-items: flex-end;
background-image: linear-gradient(90deg, rgba(31, 34, 36, .90) 0%, rgba(31, 34, 36, .15) 100%),
url("http://tap.local:10034/wp-content/uploads/2026/09/banner1.png");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.tap-hero-home-inner { max-width: 780px; padding-bottom: 16px; }
.tap-hero-home, .tap-hero-home * { color: #fff; }
.tap-hero-home .tap-eyebrow, .tap-hero-home .tap-eyebrow .elementor-heading-title { color: var(--tap-gold-light); }
/* USP-balk (homepage, sectie 2): 4 kolommen, getal + label (spec §6.1). */
.tap-usp { border-bottom: 1px solid var(--tap-line); }
.tap-usp-num, .tap-usp-num p { font-family: "Jost", sans-serif; font-size: 34px; font-weight: 600; color: var(--tap-gold-dark); line-height: 1.1; margin: 0; }
.tap-usp-label, .tap-usp-label p { font-size: 13.5px; color: #5f6568; margin: 0; }
/* "3 generaties vakmanschap" (homepage, sectie 5): groot gouden cijfer "3" dat over de foto uitsteekt. */
.tap-3block-photo { position: relative; }
.tap-num-3, .tap-num-3 .elementor-heading-title {
font-family: "Jost", sans-serif; font-weight: 500; font-size: 300px; line-height: 1; color: var(--tap-gold);
margin: 0;
}
.elementor-widget.tap-num-3 {
position: absolute; right: -70px; top: 50%; transform: translateY(-50%); z-index: 2;
}
/* Grotere tegelvariant (homepage secties 6 en 8: "Recent uit ons atelier" groot beeld, "Ook bij TAP"). */
.tap-tile-lg { min-height: 300px; }
/* Goudaccent in een kop (Fix round 1): het laatste deel van een H1/H2 in goud, zie heading(..., accent=).
Contrast (build/tests/test_contrast.py): #AC9574 op #2E3335 (tap-dark) = 4,45:1; op #1F2224 (ink, ~de
hero-overlay) = 5,57:1 -- beide ruim boven de AA-eis van 3:1 voor grote tekst (koppen), dus gewoon
--tap-gold, geen --tap-gold-light nodig. */
.tap-accent { color: var(--tap-gold); }
/* Afsluiter-kop in hoofdletters (homepage sectie 9, spec §6.1 punt 10). */
.tap-upper .elementor-heading-title { text-transform: uppercase; }
/* Vaste offerteknop op tablet en gsm (Ruling O8: tot en met 921 px, het Astra-breekpunt waar de headerknop verdwijnt).
Astra meet zijn breekpunt op clientWidth (zonder scrollbalk) en zet dan body.ast-header-break-point; wij volgen
die klasse, zodat knop en hamburger altijd samen verschijnen. De mediaquery is de terugval zonder JS.
De ruimte onderaan komt er alleen als de knop op de pagina staat (niet op /contact/, functions.php). */
.tap-mobile-cta { display: none; }
body.ast-header-break-point .tap-mobile-cta {
display: block;
position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 999;
background: var(--tap-gold); color: var(--tap-ink);
text-align: center; border-radius: var(--tap-pill);
font-family: "Jost", sans-serif; font-weight: 600; padding: 14px;
box-shadow: 0 8px 24px rgba(0, 0, 0, .2);
}
body.ast-header-break-point:has(.tap-mobile-cta) { padding-bottom: 80px; }
@media (max-width: 921px) {
.tap-mobile-cta {
display: block;
position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 999;
background: var(--tap-gold); color: var(--tap-ink);
text-align: center; border-radius: var(--tap-pill);
font-family: "Jost", sans-serif; font-weight: 600; padding: 14px;
box-shadow: 0 8px 24px rgba(0, 0, 0, .2);
}
body:has(.tap-mobile-cta) { padding-bottom: 80px; }
}
/* Kwaliteitscontrole (Task 17) ---------------------------------------------------------------- */
/* Footer-e-mail: --tap-gold-dark haalt maar 2,32 op --tap-dark; --tap-gold-light 7,8. */
.site-footer .tap-email, .site-footer .tap-email:visited { color: var(--tap-gold-light); }
.site-footer .tap-email:hover, .site-footer .tap-email:focus { color: #fff; }
/* Sociale links in de footer (feedbackronde 2026-09-30): inline SVG via [tap_icoon] + verborgen label. #CFD2D3 op
--tap-dark = 10:1 (WCAG 1.4.11 vraagt 3:1). Zolang de URL een placeholder is, zet push_footer.py de link zonder
href: dan toont hij het icoon maar is hij niet klikbaar. */
.site-footer .tap-social { display: flex; gap: 14px; padding-top: 8px; }
.site-footer a.tap-social-link, .site-footer a.tap-social-link:visited { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; color: #CFD2D3; }
.site-footer a.tap-social-link[href]:hover, .site-footer a.tap-social-link[href]:focus { color: #fff; }
.site-footer a.tap-social-link[href]:focus-visible { outline: 2px solid var(--tap-gold-light); outline-offset: 2px; }
.site-footer a.tap-social-link:not([href]) { cursor: default; }
/* Het ID 265 komt uit build/tools/forminator_form.php (formulier 'Offerte & contact'); een test bewaakt dat ze gelijk blijven.
Forminator-submitknop = onze knoppen (goud, inkt, pil, Jost 600). Forminator zet zijn eigen stijl onder
.forminator-ui#forminator-module-265 (id-specificiteit), dus wij ook. */
.forminator-ui#forminator-module-265.forminator-design--default.forminator-custom-form .forminator-button-submit {
background: var(--tap-gold); color: var(--tap-ink); border: 0; border-radius: var(--tap-pill);
font-family: "Jost", sans-serif; font-weight: 600; font-size: 16px; padding: 14px 24px; cursor: pointer;
}
.forminator-ui#forminator-module-265.forminator-design--default.forminator-custom-form .forminator-button-submit:focus-visible { outline: 2px solid var(--tap-ink); outline-offset: 2px; }
.forminator-ui#forminator-module-265.forminator-design--default.forminator-custom-form .forminator-button-submit:hover,
.forminator-ui#forminator-module-265.forminator-design--default.forminator-custom-form .forminator-button-submit:focus { background: var(--tap-gold-hover); color: var(--tap-ink); }
/* Forminator-uploadknop ("kies bestanden"): #097BAA op #EDEDED = 4,05; --tap-gold-dark op #EDEDED = 4,7. */
.forminator-ui#forminator-module-265.forminator-design--default.forminator-custom-form .forminator-multi-upload .forminator-multi-upload-message p a,
.forminator-ui#forminator-module-265.forminator-design--default.forminator-custom-form .forminator-multi-upload .forminator-multi-upload-message p a:hover { color: var(--tap-gold-dark); }
/* ==================================================================================================
Opmaakherziening (29 sep 2026): ontwerpsysteem. Referentie: docs/superpowers/mockups/make_redesign.py
(PAGE) en make_redesign_tech.py (TECH_CSS); regels: docs/superpowers/specs/2026-09-29-opmaak-herziening.md.
Breakpoints: tablet <= 1024 px, gsm <= 640 px.
Elementor-botsingen (Ruling 25): positie-, marge- en achtergrondregels gaan via .e-con.tap-... of
dubbele klassen (.tap-panel.tap-overlap-left); Elementor's eigen ".e-con{position:relative}" is (0,1,0).
Een volle-breedte sectie is een (boxed) container met de klasse; de inhoud ligt dan in .e-con-inner
(Elementor) of .tap-wrap (HTML-widget), beide max. 1400 px.
================================================================================================== */
.tap-wrap, .e-con.tap-wrap { max-width: var(--tap-wrap-outer); margin-left: auto; margin-right: auto; padding-left: var(--tap-pad); padding-right: var(--tap-pad); box-sizing: border-box; }
.tap-hero img, .tap-strip img, .tap-next img, .tap-tiles img, .tap-pic img { display: block; }
/* Tekstlink in kapitalen met gouden onderlijn ("Alle projecten ->"). */
.tap-lnk, .tap-lnk a, a.tap-lnk {
font: 600 13px "Jost", sans-serif; letter-spacing: .12em; text-transform: uppercase;
color: var(--tap-gold-dark); text-decoration: none; border-bottom: 2px solid var(--tap-gold);
}
/* ---- Vlakken (volle breedte). Sand/goud/donker; tekst op goud is ink, op donker wit. ---- */
.tap-band--sand, .tap-band--gold, .tap-band--dark { padding-top: 96px; padding-bottom: 96px; }
.e-con.tap-band--sand, .e-con.tap-band--gold, .e-con.tap-band--dark { padding-top: 96px; padding-bottom: 96px; padding-left: var(--tap-pad); padding-right: var(--tap-pad); }
.tap-band--sand { background: var(--tap-sand); color: var(--tap-dark); }
.tap-band--gold { background: var(--tap-gold); color: var(--tap-ink); }
.tap-band--dark { background: var(--tap-dark); color: #fff; }
.e-con.tap-band--sand { background: var(--tap-sand); }
.e-con.tap-band--gold { background: var(--tap-gold); }
.e-con.tap-band--dark { background: var(--tap-dark); }
.tap-band--gold :is(h1, h2, h3, h4, p, small, .elementor-heading-title, .elementor-widget-container) { color: var(--tap-ink); }
.tap-band--dark :is(h1, h2, h3, h4, .elementor-heading-title) { color: #fff; }
.tap-band--dark .tap-eyebrow, .tap-band--dark .tap-eyebrow .elementor-heading-title { color: var(--tap-gold-light); }
/* Afwijking van de schets (spec-aanvulling par. 4): op goud is het accent ink met een witte onderstreping. */
.tap-band--gold .tap-accent, .tap-band--gold .tap-accent .elementor-heading-title {
color: var(--tap-ink); text-decoration: underline; text-decoration-color: #fff;
text-decoration-thickness: 3px; text-underline-offset: .14em;
}
.tap-band--gold .tap-eyebrow, .tap-band--gold .tap-eyebrow .elementor-heading-title { color: var(--tap-ink); }
.tap-band--gold h2, .tap-band--gold h2.elementor-heading-title { font-family: "Jost", sans-serif; font-weight: 600; }
/* Kopmaat in secties (h2 clamp 28-40). */
.tap-h2, .tap-h2 .elementor-heading-title { font-family: "Jost", sans-serif; font-weight: 600; font-size: clamp(28px, 2.8vw, 40px); line-height: 1.1; }
/* ---- Hero: antraciet verloop, tekst links, foto rechts, goudpaneel over de foto ---- */
.tap-hero { background: linear-gradient(115deg, var(--tap-ink) 0%, var(--tap-dark) 60%, #3a4043 100%); color: #fff; overflow: hidden; }
.e-con.tap-hero { background: linear-gradient(115deg, var(--tap-ink) 0%, var(--tap-dark) 60%, #3a4043 100%); padding-left: var(--tap-pad); padding-right: var(--tap-pad); }
.tap-hero > .e-con-inner, .tap-hero > .tap-wrap, .tap-hero-grid {
display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center;
padding-top: 88px; padding-bottom: 110px;
}
.tap-hero > .tap-wrap { max-width: var(--tap-wrap-outer); margin: 0 auto; }
.tap-hero :is(h1, .elementor-heading-title) { color: #fff; }
.tap-hero h1, .tap-hero h1.elementor-heading-title { font-family: "Jost", sans-serif; font-weight: 600; font-size: clamp(32px, 4.2vw, 58px); line-height: 1.1; margin: 0 0 22px; }
.tap-hero p { font-size: 18px; opacity: .88; margin: 0 0 30px; max-width: 560px; }
.tap-hero .tap-eyebrow, .tap-hero .tap-eyebrow .elementor-heading-title { color: var(--tap-gold-light); margin-bottom: 14px; }
.tap-hero .tap-ok { margin-top: 18px; font-size: 14px; opacity: .8; }
.tap-hero-pic, .e-con.tap-hero-pic { position: relative; }
.tap-hero-pic img { width: 100%; height: 520px; object-fit: cover; border-radius: 4px; }
.tap-hero .tap-panel { position: absolute; left: -48px; bottom: -56px; max-width: 300px; z-index: 2; }
.tap-hero .elementor-widget.tap-panel, .tap-hero .e-con.tap-panel { position: absolute; }
/* ---- Paneel: gekleurd blok (goud / goudlicht / donker), tekst altijd met contrast ---- */
.tap-panel { position: relative; padding: 26px 30px; box-sizing: border-box; }
.tap-panel b, .tap-panel strong { display: block; font: 600 34px/1 "Jost", sans-serif; }
.tap-panel--gold { background: var(--tap-gold); color: var(--tap-ink); }
.tap-panel--gold-light { background: var(--tap-gold-light); color: var(--tap-ink); }
.tap-panel--dark { background: var(--tap-dark); color: #fff; }
.tap-panel.tap-panel--gold, .e-con.tap-panel--gold { background: var(--tap-gold); }
.tap-panel.tap-panel--gold-light, .e-con.tap-panel--gold-light { background: var(--tap-gold-light); }
.tap-panel.tap-panel--dark, .e-con.tap-panel--dark { background: var(--tap-dark); }
.tap-panel--gold :is(h1, h2, h3, p, b, .elementor-heading-title), .tap-panel--gold-light :is(h1, h2, h3, p, b, .elementor-heading-title) { color: var(--tap-ink); }
.tap-panel--dark :is(h1, h2, h3, .elementor-heading-title) { color: #fff; }
/* Eyebrow op goud/goudlicht: gold-dark haalt daar maar 3,35:1, dus ink. Op donker goudlicht. */
.tap-panel--gold .tap-eyebrow, .tap-panel--gold-light .tap-eyebrow,
.tap-panel--gold .tap-eyebrow .elementor-heading-title, .tap-panel--gold-light .tap-eyebrow .elementor-heading-title { color: var(--tap-ink); }
.tap-panel--dark .tap-eyebrow, .tap-panel--dark .tap-eyebrow .elementor-heading-title { color: var(--tap-gold-light); }
.tap-panel--dark p { opacity: .85; }
.tap-panel--dark q, .tap-panel--dark blockquote { display: block; border-left: 3px solid var(--tap-gold); padding-left: 16px; margin: 22px 0; font-style: italic; opacity: .9; quotes: none; }
/* ---- Overlappend paneel: schuift met negatieve marge over een foto. Ouder = .tap-overlap (grid). ---- */
.tap-overlap { display: grid; grid-template-columns: 1.2fr 1fr; align-items: center; position: relative; }
.tap-overlap--pic-right { grid-template-columns: 1fr 1.2fr; }
.tap-overlap > .e-con-inner { display: contents; }
.tap-pic img, .tap-overlap img { width: 100%; height: 540px; object-fit: cover; }
.tap-panel.tap-overlap-left, .tap-panel.tap-overlap-right { padding: 52px 50px; z-index: 1; position: relative; }
.tap-panel.tap-overlap-left { margin: 70px 0 70px -120px; }
.tap-panel.tap-overlap-right { margin: 0 -120px 0 0; }
.tap-overlap-left h2, .tap-overlap-right h2 { font-size: clamp(28px, 2.8vw, 40px); font-weight: 600; margin-bottom: 16px; }
/* Het cijfer 3: ongeveer half boven de rand van het paneel; de tekst houdt rechts ruimte vrij.
Puur decoratief: pagina's moeten het renderen met aria-hidden="true". */
.tap-n3, .elementor-widget.tap-n3 { position: absolute; right: 28px; top: -100px; font: 600 200px/1 "Jost", sans-serif; color: var(--tap-gold); margin: 0; z-index: 2; }
.tap-n3 .elementor-heading-title, .tap-n3 p { font: inherit; color: inherit; margin: 0; }
.tap-panel--n3 .tap-eyebrow, .tap-panel--n3 h2 { padding-right: 150px; }
/* ---- Raster met lijnen (USP-balk, werkwijze): 4 kolommen; tablet en gsm 2x2 met lijnen in beide richtingen ---- */
/* Cellen = echte kinderen: bij een boxed Elementor-container `> .e-con-inner > *`, anders `> :not(.e-con-inner)`.
--tap-lc wordt alleen op het buitenste element gezet (erft door naar .e-con-inner). */
.tap-grid-lines, .tap-grid-lines > .e-con-inner { display: grid; grid-template-columns: repeat(4, 1fr); }
.tap-grid-lines { --tap-lc: rgba(31, 34, 36, .18); }
.tap-grid-lines:has(> .e-con-inner) { display: block; }
.tap-band--dark .tap-grid-lines, .tap-band--dark.tap-grid-lines, .tap-grid-lines.tap-grid-lines--dark { --tap-lc: rgba(255, 255, 255, .14); }
.tap-grid-lines > :not(.e-con-inner), .tap-grid-lines > .e-con-inner > * { padding: 30px 32px; border-right: 1px solid var(--tap-lc); border-left: 0; margin: 0; }
.tap-grid-lines > :not(.e-con-inner):last-child, .tap-grid-lines > .e-con-inner > :last-child { border-right: 0; }
.tap-grid-lines b, .tap-grid-lines .tap-num { display: block; font: 600 30px "Jost", sans-serif; }
.tap-band--gold .tap-grid-lines { color: var(--tap-ink); font-size: 14px; }
.tap-band--dark .tap-grid-lines > :not(.e-con-inner), .tap-band--dark .tap-grid-lines > .e-con-inner > * { padding: 0 28px; }
.tap-band--dark .tap-grid-lines > :not(.e-con-inner):first-child, .tap-band--dark .tap-grid-lines > .e-con-inner > :first-child { padding-left: 0; }
.tap-band--dark .tap-grid-lines b { font-size: 56px; line-height: 1; color: var(--tap-gold); margin-bottom: 14px; }
.tap-band--dark .tap-grid-lines h4 { font-size: 20px; font-weight: 600; margin-bottom: 6px; }
/* ---- Fototegels (4 naast elkaar): foto, donker verloop, gouden eyebrow, stretched link (.tap-tile-link) ---- */
.tap-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.tap-tiles > .e-con-inner { display: contents; }
.tap-tiles .tap-tile { min-height: 400px; border-radius: 0; }
.tap-tiles .tap-tile-in { left: 24px; right: 24px; bottom: 22px; padding: 0; background: none; }
.tap-tiles .tap-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(31, 34, 36, .92) 8%, rgba(31, 34, 36, .05) 62%); pointer-events: none; }
.tap-tile-eb, .tap-tile-eb p { font: 600 11.5px "Jost", sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--tap-gold-light); margin: 0; }
.tap-tiles .tap-tile-in h3, .tap-tiles .tap-tile-in .elementor-heading-title { font-size: 26px; font-weight: 600; margin-top: 6px; color: #fff; }
/* Feedback 02/10 ("Lasergraveren"-tegel: tekst valt bij hover buiten de tegel). Twee oorzaken:
1. Elementor geeft elke container width: 100% (--width). Met left/right: 24px werd de overlay daardoor 24 px
breder dan de tegel: rechts liep de tekst onder de rand (overflow: hidden knipte hem af).
2. De uitleg (tap-tile-more) had max-height 240 px, de tekst + link is tot ~300 px hoog: onderaan afgeknipt.
Oplossing: breedte uit left/right, een kleinere hovertekst (15 px) zonder Astra-alineamarge en geen extra
Elementor-zijpadding, zodat het hele blok ruim binnen een tegel van 400 px blijft. */
.tap-tiles .tap-tile .e-con.tap-tile-more { padding: 0; }
.tap-tiles .tap-tile-in .tap-tile-more p { font-size: 15px; line-height: 1.5; margin: 0; }
.tap-tiles .tap-tile-in .tap-tile-more .tap-link { margin-top: 8px; }
.tap-tile:hover .tap-tile-more, .tap-tile:focus-within .tap-tile-more { max-height: 420px; }
/* Zelfde breedtefout bij alle overlays die met left/right absoluut staan (fototegels, doorverwijstegels):
breedte = tegel min de marges, nooit 100 %. Lange woorden breken af in plaats van uit de tegel te lopen. */
.tap-tile .e-con.tap-tile-in, .tap-next .e-con.tap-next-in { width: auto; max-width: none; min-width: 0; }
.tap-next-in, .tap-car-in, .tap-tile-in { overflow-wrap: anywhere; }
/* ---- Kaarten (voordelen / wat maken we op maat): wit met gouden bovenrand, op zandtint ---- */
.tap-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.tap-cards > .e-con-inner { display: contents; }
.tap-cards .tap-card { background: #fff; padding: 34px 32px; border-top: 4px solid var(--tap-gold); border-radius: 0; overflow: visible; }
.tap-cards .tap-card small, .tap-cards .tap-card .tap-eyebrow { font: 600 11.5px "Jost", sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--tap-gold-dark); }
.tap-cards .tap-card h3, .tap-cards .tap-card .elementor-heading-title { font-size: 22px; font-weight: 600; margin: 10px 0 8px; color: var(--tap-dark); }
.tap-cards .tap-card p { margin: 0; font-size: 15.5px; color: #4d545c; }
/* ---- Realisatiestrook: 1 grote + 3 kleine foto's ---- */
.tap-strip { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 10px; }
.tap-strip > .e-con-inner { display: contents; }
.tap-strip img { width: 100%; height: 320px; object-fit: cover; }
.tap-strip .elementor-widget-image { margin: 0; }
/* [tap_realisaties] (spec 2026-10-14): dezelfde strook, maar met eigen HTML i.p.v. Elementor-widgets.
Hoogtes en kolommen volgen de .tap-strip-regels (1024px / 640px); alleen de marge en min-width komen erbij. */
.tap-strip--sc .tap-strip__item { margin: 0; min-width: 0; }
.tap-strip--sc .tap-strip__item img { display: block; width: 100%; height: 320px; object-fit: cover; }
@media (max-width: 640px) { .tap-strip--sc .tap-strip__item img { height: 220px; } }
/* ---- Gouden reviewband: groot aanhalingsteken (ink, niet wit) en de review in Jost ---- */
.tap-quote { background: var(--tap-gold); color: var(--tap-ink); margin-top: 10px; padding: 44px 52px; display: grid; grid-template-columns: auto 1fr; gap: 28px; align-items: center; }
.e-con.tap-quote { background: var(--tap-gold); }
.tap-quote > .e-con-inner { display: contents; }
.tap-quote .tap-mark, .tap-quote .tap-mark p { font: 600 90px/.6 "Jost", sans-serif; color: var(--tap-ink); margin: 0; }
.tap-quote p { margin: 0 0 8px; font: 500 clamp(19px, 1.8vw, 24px)/1.4 "Jost", sans-serif; color: var(--tap-ink); }
.tap-quote :is(small, cite) { color: var(--tap-ink); font-size: 14px; font-style: normal; }
/* ---- FAQ: kop links, vragen rechts, gouden +/- ---- */
.tap-faq { padding-top: 100px; padding-bottom: 100px; }
.tap-faq, .tap-faq > .e-con-inner { display: grid; grid-template-columns: 1fr 1.4fr; gap: 64px; align-items: start; }
.tap-faq:has(> .e-con-inner) { display: block; }
.tap-faq details { border-bottom: 1px solid var(--tap-line); padding: 20px 0; }
.tap-faq summary { font: 500 19px "Jost", sans-serif; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.tap-faq summary::-webkit-details-marker { display: none; }
.tap-faq summary::after { content: "+"; font-size: 26px; line-height: 1; color: var(--tap-gold-dark); }
.tap-faq details[open] summary::after { content: "\2013"; }
.tap-faq details p { margin: 12px 0 0; color: #4d545c; }
/* ---- Doorverwijstegels: twee grote fototegels over de volle breedte ---- */
.tap-next { display: grid; grid-template-columns: 1fr 1fr; }
.tap-next > .e-con-inner { display: contents; }
.tap-next > a, .tap-next > .e-con-inner > a, .tap-next .tap-next-item { position: relative; display: block; height: 260px; color: #fff; text-decoration: none; overflow: hidden; }
.tap-next img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.tap-next a:hover img { transform: scale(1.05); }
.tap-next > a::after, .tap-next > .e-con-inner > a::after, .tap-next .tap-next-item::after { content: ""; position: absolute; inset: 0; background: rgba(31, 34, 36, .62); pointer-events: none; }
.tap-next .tap-next-in { position: absolute; z-index: 1; left: var(--tap-pad); bottom: 34px; }
.tap-next small { font: 600 11.5px "Jost", sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--tap-gold-light); }
.tap-next h3 { font-size: 30px; font-weight: 600; margin: 6px 0 2px; color: #fff; }
.tap-next span { opacity: .85; font-size: 15px; }
/* ---- Kleine bouwstenen van de techniekpagina's ---- */
.tap-crumb { background: var(--tap-sand); font-size: 13px; color: #4d545c; padding: 10px var(--tap-pad); }
.tap-crumb a { color: var(--tap-gold-dark); text-decoration: none; }
.tap-facts { display: flex; gap: 28px; flex-wrap: wrap; margin-top: 26px; font-size: 14px; opacity: .85; }
.tap-mlist { display: grid; grid-template-columns: 1fr 1fr; margin-top: 22px; }
.tap-mlist > .e-con-inner { display: contents; }
.tap-mlist > *:not(.e-con-inner), .tap-mlist > .e-con-inner > * { padding: 14px 18px 14px 0; border-bottom: 1px solid rgba(31, 34, 36, .18); }
.tap-mlist h3 { font-size: 17px; font-weight: 600; margin: 0; color: var(--tap-ink); }
.tap-mlist span, .tap-mlist p { font-size: 13.5px; color: #4d545c; margin: 0; }
.tap-panel--gold-light .tap-mlist span, .tap-panel--gold-light .tap-mlist p { color: var(--tap-ink); }
/* ---- Header: ellipslogo 66 px (desktop) / 50 px (gsm), witte sticky balk, offerteknop weg op gsm ---- */
.site-header .site-logo-img img.custom-logo, .site-header .custom-logo-link img, .ast-mobile-header-wrap .custom-logo-link img {
height: 66px; width: auto; max-width: none;
}
/* Zijmarge van de header (feedbackronde 2026-09-30): de reset van .ast-container verderop (volle breedte voor
Elementor) raakte ook de headerrijen, zodat logo, offerteknop en bovenbalk tegen de schermrand stonden. De rijen
volgen nu dezelfde kolom als .tap-wrap: inhoud max. 1400 px, zijmarge --tap-pad. De balkkleur blijft volle breedte. */
#masthead .site-above-header-wrap.ast-container, #masthead .site-primary-header-wrap.ast-container {
max-width: var(--tap-wrap-outer); margin-left: auto; margin-right: auto;
padding-left: var(--tap-pad); padding-right: var(--tap-pad); box-sizing: border-box;
}
/* Mobiele header (<= 921 px): daar zit de rij rechtstreeks in de balk, zonder .ast-container. Astra zet er zelf
20 px op met .ast-header-break-point #masthead ... (1,3,0); body. ervoor wint (1,3,1). */
body.ast-header-break-point #masthead .ast-mobile-header-wrap .ast-primary-header-bar { padding-left: var(--tap-pad); padding-right: var(--tap-pad); box-sizing: border-box; }
/* Footer (30/09): dezelfde reset zette de footerkolommen op gsm en tablet tegen de schermrand. Zelfde kolom als de header. */
/* De rijen zelf (volle breedte, met de balkkleur) krijgen de zijmarge; de binnenste kolommen zijn al max. 1400 px. */
footer.site-footer :is(.site-above-footer-wrap, .site-primary-footer-wrap, .site-below-footer-wrap) {
padding-left: var(--tap-pad); padding-right: var(--tap-pad); box-sizing: border-box;
}
/* ============================ Tablet (<= 1024 px) ============================ */
@media (max-width: 1024px) {
.tap-band--sand, .tap-band--gold, .tap-band--dark, .e-con.tap-band--sand, .e-con.tap-band--gold, .e-con.tap-band--dark { padding-top: 72px; padding-bottom: 72px; }
.tap-hero > .e-con-inner, .tap-hero > .tap-wrap, .tap-hero-grid { grid-template-columns: 1fr; padding-top: 60px; padding-bottom: 90px; }
.tap-hero-pic img { height: 380px; }
.tap-hero .tap-panel { left: 20px; bottom: -40px; }
.tap-grid-lines, .tap-grid-lines > .e-con-inner { grid-template-columns: repeat(2, 1fr); }
.tap-grid-lines > :not(.e-con-inner), .tap-grid-lines > .e-con-inner > * { border-right: 0; }
.tap-grid-lines > :not(.e-con-inner):nth-child(odd), .tap-grid-lines > .e-con-inner > :nth-child(odd) { border-right: 1px solid var(--tap-lc); }
.tap-grid-lines > :not(.e-con-inner):nth-child(-n+2), .tap-grid-lines > .e-con-inner > :nth-child(-n+2) { border-bottom: 1px solid var(--tap-lc); }
.tap-band--dark .tap-grid-lines > :not(.e-con-inner), .tap-band--dark .tap-grid-lines > .e-con-inner > *,
.tap-band--dark .tap-grid-lines > :not(.e-con-inner):first-child, .tap-band--dark .tap-grid-lines > .e-con-inner > :first-child { padding: 26px 28px; }
.tap-tiles { grid-template-columns: repeat(2, 1fr); }
.tap-tiles .tap-tile { min-height: 320px; }
.tap-overlap, .tap-overlap--pic-right { grid-template-columns: 1fr; }
.tap-pic img, .tap-overlap img { height: 420px; }
.tap-panel.tap-overlap-left { margin: -80px 32px 0 32px; }
.tap-panel.tap-overlap-right { margin: 0 32px -60px 32px; }
.tap-n3, .elementor-widget.tap-n3 { font-size: 140px; top: -70px; }
.tap-panel--n3 .tap-eyebrow, .tap-panel--n3 h2 { padding-right: 110px; }
.tap-cards { grid-template-columns: 1fr 1fr; }
.tap-cards .tap-card:last-child:nth-child(odd) { grid-column: span 2; }
.tap-strip { grid-template-columns: 1fr 1fr; }
.tap-strip > :first-child, .tap-strip > .e-con-inner > :first-child { grid-column: span 2; }
.tap-quote { padding: 36px; }
.tap-faq, .tap-faq > .e-con-inner { grid-template-columns: 1fr; gap: 24px; }
}
/* ============================ Gsm (<= 640 px) ============================ */
@media (max-width: 640px) {
.site-header .site-logo-img img.custom-logo, .site-header .custom-logo-link img, .ast-mobile-header-wrap .custom-logo-link img { height: 50px; }
/* De zwevende offerteknop (functions.php) neemt de header-knop over. */
.site-header .ast-header-button-1, .site-header .ast-builder-button-wrap, .ast-mobile-header-wrap .ast-header-button-1 { display: none; }
.tap-band--sand, .tap-band--dark, .e-con.tap-band--sand, .e-con.tap-band--dark { padding-top: 64px; padding-bottom: 64px; }
.tap-band--gold, .e-con.tap-band--gold { padding-top: 56px; padding-bottom: 90px; }
.tap-btn .elementor-button, a.tap-btn, .tap-btn-line .elementor-button, a.tap-btn-line, .tap-btn-dark .elementor-button, a.tap-btn-dark { display: block; text-align: center; }
.tap-hero > .e-con-inner, .tap-hero > .tap-wrap, .tap-hero-grid { padding-top: 40px; padding-bottom: 70px; gap: 32px; }
.tap-hero p { font-size: 16px; }
/* Geen offerteknop in de hero (behalve waar .tap-keep staat, bv. /contact); "Ontdek ons maatwerk" wordt een rustige goudlink. */
.tap-hero .tap-btn:not(.tap-keep) { display: none; }
.tap-hero .elementor-widget-button.tap-btn-line .elementor-button, .tap-hero .elementor-widget-button.tap-btn-line .elementor-button:visited,
.tap-hero a.tap-btn-line, .tap-hero a.tap-btn-line:visited {
display: inline-block; border: 0; border-bottom: 2px solid var(--tap-gold); border-radius: 0; padding: 0 0 2px;
background: transparent; color: var(--tap-gold-light); text-align: left;
}
.tap-hero .elementor-widget-button.tap-btn-line .elementor-button:hover, .tap-hero .elementor-widget-button.tap-btn-line .elementor-button:focus,
.tap-hero a.tap-btn-line:hover, .tap-hero a.tap-btn-line:focus { background: transparent; color: #fff; border-color: var(--tap-gold); }
.tap-hero-pic img { height: 260px; }
.tap-hero .tap-panel { left: 12px; bottom: -22px; padding: 14px 18px; max-width: 210px; font-size: 13px; }
.tap-hero .tap-panel b, .tap-hero .tap-panel strong { font-size: 22px; }
.tap-grid-lines > :not(.e-con-inner), .tap-grid-lines > .e-con-inner > * { padding: 22px 18px; }
.tap-grid-lines b { font-size: 24px; }
.tap-band--dark .tap-grid-lines > :not(.e-con-inner), .tap-band--dark .tap-grid-lines > .e-con-inner > *,
.tap-band--dark .tap-grid-lines > :not(.e-con-inner):first-child, .tap-band--dark .tap-grid-lines > .e-con-inner > :first-child { padding: 20px 16px; }
.tap-band--dark .tap-grid-lines b { font-size: 40px; }
.tap-band--dark .tap-grid-lines h4 { font-size: 17px; }
.tap-tiles { grid-template-columns: 1fr; }
.tap-tiles .tap-tile { min-height: 240px; }
.tap-pic img, .tap-overlap img { height: 280px; }
.tap-panel.tap-overlap-left { margin: -50px 12px 0 12px; padding: 36px 26px; }
.tap-panel.tap-overlap-right { margin: 0 12px -40px 12px; padding: 36px 26px; }
.tap-n3, .elementor-widget.tap-n3 { font-size: 96px; right: 14px; top: -48px; }
.tap-panel--n3 .tap-eyebrow, .tap-panel--n3 h2 { padding-right: 72px; }
.tap-cards { grid-template-columns: 1fr; }
.tap-cards .tap-card:last-child:nth-child(odd) { grid-column: auto; }
.tap-cards .tap-card { padding: 26px 22px; }
.tap-strip { grid-template-columns: 1fr; }
.tap-strip > :first-child, .tap-strip > .e-con-inner > :first-child { grid-column: auto; }
.tap-strip img { height: 220px; }
.tap-quote { grid-template-columns: 1fr; gap: 6px; padding: 30px 24px; }
.tap-quote .tap-mark, .tap-quote .tap-mark p { font-size: 64px; }
.tap-faq { padding-top: 64px; padding-bottom: 64px; }
.tap-faq summary { font-size: 17px; }
.tap-next { grid-template-columns: 1fr; }
.tap-next > a, .tap-next > .e-con-inner > a, .tap-next .tap-next-item { height: 200px; }
.tap-facts { gap: 14px; flex-direction: column; }
.tap-mlist { grid-template-columns: 1fr; }
}
/* ==================================================================================================
Homepage-aanvullingen (Task 2, opmaakherziening): kleine bouwstenen die de homepage naast het
ontwerpsysteem nodig heeft.
================================================================================================== */
/* USP-balk: gouden band zonder eigen verticale padding (de cellen hebben die zelf). */
.e-con.tap-band--gold.tap-band--flush { padding-top: 0; padding-bottom: 0; }
/* Kop van een sectie in twee kolommen (links kop, rechts intro/link); tablet en gsm onder elkaar. */
.tap-split > .e-con-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: end; }
.tap-split--link > .e-con-inner { grid-template-columns: 1fr auto; }
.tap-split--cta > .e-con-inner { grid-template-columns: 1.4fr 1fr; gap: 40px; align-items: center; }
/* Foto met stretched link (Producten): de html-widget-wrapper mag het referentiekader niet worden. */
.e-con.tap-pic { position: relative; z-index: 0; } /* eigen stapelcontext: de stretched link (z 2) blijft onder het paneel (z 1) */
.tap-pic .elementor-widget-html { position: static; }
/* Elementor-botsingen: .e-con-inner krijgt van Elementor align-items:normal en .e-con is width:100% met 10 px padding. */
.e-con.tap-hero > .e-con-inner { align-items: center; }
.e-con.tap-hero-pic, .e-con.tap-pic { padding: 0; }
/* Overlappend paneel: een negatieve marge alleen is niet genoeg omdat .e-con width:100% heeft; het paneel wordt 120 px breder. */
.e-con.tap-panel.tap-overlap-left, .e-con.tap-panel.tap-overlap-right { width: calc(100% + 120px); max-width: none; }
/* Citaat in een donker paneel: Astra geeft blockquote een eigen (zwarte) kleur. */
.tap-panel--dark blockquote, .tap-panel--dark blockquote p { color: #fff; }
/* Realisatiestrook met bijschrift-tegels. */
.tap-strip .tap-tile { min-height: 320px; border-radius: 0; }
@media (max-width: 1024px) {
/* Hovertekst staat hier open (<= 921 px): de tegel moet ondertitel + titel + tekst kunnen bevatten. */
.tap-tiles .tap-tile { min-height: 420px; }
.e-con.tap-panel.tap-overlap-left, .e-con.tap-panel.tap-overlap-right { width: auto; }
.tap-split > .e-con-inner, .tap-split--link > .e-con-inner, .tap-split--cta > .e-con-inner { grid-template-columns: 1fr; gap: 20px; align-items: start; }
}
@media (max-width: 640px) {
.tap-tiles .tap-tile { min-height: 400px; }
.tap-strip .tap-tile { min-height: 220px; }
}
/* ==================================================================================================
Techniekpagina's (Task 3, opmaakherziening): bouwstenen die alleen de vier techniekpagina's en het
sjabloon "TAP - Techniekpagina" nodig hebben (broodkruimel, FAQ met Elementor-toggle, reviewband,
doorverwijstegels). Schets: docs/superpowers/mockups/opmaak-lasergraveren-v1.html
================================================================================================== */
/* Broodkruimel op zandtint. */
.e-con.tap-crumb { background: var(--tap-sand); padding: 10px var(--tap-pad); }
.tap-crumb .rank-math-breadcrumb, .tap-crumb .rank-math-breadcrumb p { margin: 0; font-size: 13px; line-height: 1.5; color: #4d545c; }
.tap-crumb .rank-math-breadcrumb a { color: var(--tap-gold-dark); text-decoration: none; }
.tap-crumb .rank-math-breadcrumb a:hover { text-decoration: underline; }
.tap-crumb .elementor-widget-shortcode { margin: 0; }
/* Voordelen: kaarten op zandtint; kop links, intro rechts. */
.tap-voordelen .tap-split p { margin: 0; }
.tap-voordelen .tap-split .elementor-widget-text-editor { align-self: end; }
/* Kaarteyebrow: klein en goud-donker (de h3-regel van .tap-cards raakt anders ook de eyebrow-heading). */
.tap-cards .tap-card .tap-eyebrow, .tap-cards .tap-card .tap-eyebrow .elementor-heading-title {
font: 600 11.5px/1.4 "Jost", sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--tap-gold-dark); margin: 0;
}
/* Materialen: de tekst in het goudlichte paneel is ink; de knop (Gieten) krijgt lucht. */
.tap-panel--gold-light p, .tap-panel--gold-light .elementor-widget-container { color: var(--tap-ink); }
.tap-panel--gold-light .elementor-widget-button { margin-top: 8px; }
.tap-panel--gold-light h2 { color: var(--tap-ink); }
/* Reviewband: het grote aanhalingsteken is een html-widget (aria-hidden); tekst in Jost. */
.tap-quote .tap-mark { align-self: start; padding-top: 14px; }
.tap-quote .elementor-widget-text-editor p { margin: 0 0 8px; }
.tap-quote .elementor-widget-text-editor:last-child p { margin: 0; }
.tap-quote small { font-size: 14px; }
.tap-strip .elementor-widget-image { width: 100%; }
/* FAQ: Elementor-toggle in de stijl van de schets (geen carets, gouden + en -). */
.tap-faq .elementor-toggle { border: 0; }
.tap-faq .elementor-toggle-item { border-bottom: 1px solid var(--tap-line); padding: 20px 0; }
.tap-faq .elementor-toggle .elementor-tab-title {
display: flex; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer;
padding: 0; border: 0; font-weight: 500;
}
.tap-faq .elementor-toggle .elementor-tab-title .elementor-toggle-icon { display: none; }
.tap-faq .elementor-toggle .elementor-tab-title .elementor-toggle-title,
.tap-faq .elementor-toggle .elementor-tab-title.elementor-active .elementor-toggle-title {
font: 500 19px/1.3 "Jost", sans-serif; color: var(--tap-dark); text-decoration: none; flex: 1; text-align: left;
}
.tap-faq .elementor-toggle .elementor-tab-title::after { content: "+"; font: 400 26px/1 "Jost", sans-serif; color: var(--tap-gold-dark); flex: none; }
.tap-faq .elementor-toggle .elementor-tab-title.elementor-active::after { content: "\2013"; }
.tap-faq .elementor-toggle .elementor-tab-content { border: 0; padding: 12px 0 0; color: #4d545c; font-size: 17px; }
@media (max-width: 640px) {
.tap-faq .elementor-toggle .elementor-tab-title .elementor-toggle-title { font-size: 17px; }
}
/* Gouden CTA-band: kop in Jost en tekst in ink. */
.tap-band--gold .tap-split p { margin: 0; }
/* Doorverwijstegels: twee grote fototegels (tap-tile: foto vult de tegel, stretched link). */
.tap-next .tap-tile.tap-next-item { border-radius: 0; height: 260px; min-height: 0; }
.tap-next .tap-tile.tap-next-item::after { content: ""; position: absolute; inset: 0; background: rgba(31, 34, 36, .62); pointer-events: none; }
.tap-next .tap-tile:hover img { transform: scale(1.05); }
.e-con.tap-next-in { position: absolute; z-index: 1; left: var(--tap-pad); right: var(--tap-pad); bottom: 34px; padding: 0; }
.tap-next .tap-next-in :is(h3, .elementor-heading-title) { font: 600 30px/1.1 "Jost", sans-serif; margin: 0 0 2px; color: #fff; }
.tap-next .tap-next-in p { margin: 0; color: #fff; }
.tap-next .tap-next-in span { opacity: .85; font-size: 15px; }
@media (max-width: 640px) {
.tap-next .tap-tile.tap-next-item { height: 200px; }
.tap-next .tap-next-in :is(h3, .elementor-heading-title) { font-size: 26px; }
}
/* ==================================================================================================
Volle breedte (O5). Kleurvlakken lopen van rand tot rand: op de TAP-pagina's (62-73) staat de Astra-paginameta
op ast-site-content-layout=full-width-container, site-sidebar-layout=no-sidebar, site-content-style=unboxed
(body-klasse .ast-page-builder-template), waardoor .ast-container zijn 20 px zijpadding verliest.
De inhoud ligt overal op dezelfde kolom: max. 1400 px met zijmarge clamp(20px, 5vw, 64px). Vlakken (.e-con) hebben
die marge als padding en een .e-con-inner van max. 1400 px; .tap-wrap-secties hebben max-width 1400 + 2 x marge
(--tap-wrap-outer) en dezelfde padding. Vangnet voor het geval de meta ontbreekt:
================================================================================================== */
.ast-page-builder-template .ast-container, .elementor-page .site-content > .ast-container { max-width: none; padding-left: 0; padding-right: 0; }
/* Elementor geeft geneste containers 10 px zijpadding; die schuift de tekst uit de gedeelde kolom. Alleen de
indelingscontainers (zonder eigen tap-klasse, of tap-split/tap-grid-lines) op de eerste twee niveaus worden nul;
panelen en kaarten houden hun eigen padding. */
.e-con:is(.tap-band--sand, .tap-band--gold, .tap-band--dark, .tap-hero, .tap-wrap) > .e-con-inner > .e-con:is(.tap-split, .tap-grid-lines, :not([class*="tap-"])),
.e-con:is(.tap-band--sand, .tap-band--gold, .tap-band--dark, .tap-hero, .tap-wrap) > .e-con-inner > .e-con:is(.tap-split, .tap-grid-lines, :not([class*="tap-"])) > .e-con-inner > .e-con:not([class*="tap-"]) { padding-left: 0; padding-right: 0; }
/* ==================================================================================================
Overige pagina's (Task 4, opmaakherziening): Sign & Maatwerk, Projecten, Over TAP, Verkooppunten.
Nieuw hier (ook bruikbaar voor Task 5): .tap-titleband (antraciet titelband met verloop, tekst zonder foto).
================================================================================================== */
.tap-band--dark.tap-titleband, .e-con.tap-band--dark.tap-titleband {
background: linear-gradient(115deg, var(--tap-ink) 0%, var(--tap-dark) 60%, #3a4043 100%);
padding-top: 88px; padding-bottom: 88px;
}
.tap-titleband h1, .tap-titleband h1.elementor-heading-title { font-family: "Jost", sans-serif; font-weight: 600; font-size: clamp(32px, 4.2vw, 58px); line-height: 1.1; margin: 0 0 22px; max-width: 900px; }
.tap-titleband p { font-size: 18px; opacity: .88; margin: 0; max-width: 640px; }
.tap-titleband .tap-eyebrow, .tap-titleband .tap-eyebrow .elementor-heading-title { margin-bottom: 14px; }
/* Kaarten met foto (Sign & Maatwerk). */
.tap-cards .tap-card img { width: 100%; height: 220px; object-fit: cover; margin-bottom: 18px; }
.tap-cards .tap-card .elementor-widget-image { margin: 0; }
/* Foto's op /maatwerk/: 3 stuks in de realisatiestrook (2fr 1fr 1fr). */
.tap-strip.tap-strip--3 { grid-template-columns: 2fr 1fr 1fr; }
/* Projecten: fotovlak-placeholder (er zijn nog geen projectfoto's) en labels in het paneel. */
.e-con.tap-pic.tap-pic--ph { min-height: 540px; display: flex; align-items: center; justify-content: center; text-align: center; background: rgba(122, 102, 69, .16); }
.tap-pic--ph p { margin: 0; color: var(--tap-dark); font-size: 18px; padding: 0 24px; }
.tap-case .tap-panel h3, .tap-case .tap-panel h3.elementor-heading-title { font: 600 clamp(24px, 2.2vw, 30px)/1.2 "Jost", sans-serif; color: #fff; margin: 0; }
.tap-lbl { display: block; font: 600 12.5px "Jost", sans-serif; letter-spacing: .2em; text-transform: uppercase; color: var(--tap-gold-light); margin-bottom: 4px; }
.tap-case .tap-panel p { margin: 0; }
.tap-case .tap-overlap { margin-bottom: 0; }
.tap-case .tap-quote { margin-top: 24px; }
/* Case zonder projectfoto (01/10, klantvraag 11): paneel over de volle breedte, geen overlap en geen leeg fotovlak. */
.e-con.tap-panel.tap-case-panel { padding: 52px 50px; width: 100%; max-width: none; }
@media (max-width: 640px) { .e-con.tap-panel.tap-case-panel { padding: 36px 26px; } }
/* Over TAP: atelierraster op antraciet (h3 in de cellen), tekstlink op donker, teamblok. */
.tap-band--dark .tap-grid-lines h3, .tap-band--dark .tap-grid-lines h3.elementor-heading-title { font: 600 22px/1.2 "Jost", sans-serif; margin: 0 0 6px; color: #fff; }
.tap-band--dark .tap-grid-lines p { margin: 0 0 6px; opacity: .88; }
.tap-band--dark a.tap-lnk, .tap-band--dark .tap-lnk a { color: var(--tap-gold-light); border-bottom-color: var(--tap-gold); }
.tap-team > .e-con-inner { display: grid; grid-template-columns: 1fr 1.2fr; gap: 64px; align-items: center; }
.tap-team .tap-pic img { height: 420px; }
.tap-team p { margin: 0; font: 500 clamp(20px, 2vw, 26px)/1.4 "Jost", sans-serif; color: var(--tap-dark); }
.tap-links > .e-con-inner { display: flex; flex-wrap: wrap; gap: 20px 40px; align-items: center; }
.tap-links p { margin: 0; }
.tap-links a.tap-lnk { padding-bottom: 2px; }
/* Verkooppunten: afsluitregel op zandtint. */
.e-con.tap-band--sand.tap-band--slim { padding-top: 48px; padding-bottom: 48px; }
.tap-band--slim p { margin: 0; }
.tap-band--slim a { color: var(--tap-gold-dark); }
@media (max-width: 1024px) {
.tap-band--dark.tap-titleband, .e-con.tap-band--dark.tap-titleband { padding-top: 64px; padding-bottom: 64px; }
.e-con.tap-pic.tap-pic--ph { min-height: 380px; }
.tap-team > .e-con-inner { grid-template-columns: 1fr; gap: 28px; }
.tap-strip.tap-strip--3 { grid-template-columns: 1fr 1fr; }
.tap-strip.tap-strip--3 > :first-child, .tap-strip.tap-strip--3 > .e-con-inner > :first-child { grid-column: span 2; }
.e-con.tap-band--sand.tap-band--slim { padding-top: 40px; padding-bottom: 40px; }
}
@media (max-width: 640px) {
.tap-band--dark.tap-titleband, .e-con.tap-band--dark.tap-titleband { padding-top: 48px; padding-bottom: 56px; }
.tap-titleband p { font-size: 16px; }
.tap-cards .tap-card img { height: 190px; }
.e-con.tap-pic.tap-pic--ph { min-height: 240px; }
.tap-case .tap-quote { margin-top: 44px; }
.tap-team .tap-pic img { height: 260px; }
.tap-strip.tap-strip--3 { grid-template-columns: 1fr; }
.tap-strip.tap-strip--3 > :first-child, .tap-strip.tap-strip--3 > .e-con-inner > :first-child { grid-column: auto; }
.tap-band--dark .tap-grid-lines h3 { font-size: 18px; }
}
/* Task 4, verfijning na eerste meting. */
.e-con.tap-pic--ph > .e-con-inner { height: 100%; display: flex; align-items: center; justify-content: center; }
.tap-case .tap-panel.tap-overlap-right { margin-top: 70px; margin-bottom: 70px; }
@media (max-width: 1024px) {
.tap-case .tap-panel.tap-overlap-right { margin-top: 0; margin-bottom: -60px; }
}
@media (max-width: 640px) {
.tap-case .tap-panel.tap-overlap-right { margin-bottom: -40px; }
}
/* ==================================================================================================
Producten, Contact, Bedankt (Task 5, opmaakherziening). Titelband = .tap-titleband (Task 4).
Productraster: HTML-widget (build/content/producten-raster.html) + tap-filter.js (Ruling 26); markup
.tap-filters button[data-f] en .tap-products .tap-product[data-f] blijft, alleen de stijl is nieuw.
================================================================================================== */
/* Titelband met knop rechts (Producten). Op gsm neemt de zwevende offerteknop het over. */
.tap-titleband.tap-split--link > .e-con-inner { align-items: center; }
.tap-titleband .elementor-widget-button { margin: 0; }
.tap-titleband .tap-checkline, .tap-titleband .tap-checkline p { color: var(--tap-gold-light); font-weight: 600; opacity: 1; }
.tap-titleband .tap-checkline { margin-top: 18px; }
/* Maatwerkband (feedbackronde 30/09, schets feedback-2026-09-30.html sectie 1): bovenaan kop links + tekst rechts
(.tap-maatband-top, een tap-split), daaronder 4 gelijke fototegels (4:3) in één rij (stretched links, Ruling 25).
Tablet en gsm: kop en tekst onder elkaar (tap-split, <= 1024 px), tegels 2 x 2. */
.e-con.tap-maatband.tap-band--sand { padding-top: 56px; padding-bottom: 56px; }
.tap-maatband-top > .e-con-inner { gap: 48px; }
.tap-h3, .tap-h3 .elementor-heading-title { font: 600 clamp(22px, 2vw, 28px)/1.2 "Jost", sans-serif; color: var(--tap-dark); margin: 0; }
.tap-maatband p { margin: 0; font-size: 16px; color: var(--tap-dark); }
.tap-mtiles > .e-con-inner { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.e-con.tap-mtiles .e-con.tap-tile-sm { min-height: 0; aspect-ratio: 4 / 3; border-radius: 12px; }
/* Tekst onderaan de tegel: het verloop is onder de hele tekstregel >= --tap-tile-shade (wit haalt dan >= 4,5, ook
bij een witte foto); pas in de extra bovenpadding loopt het uit naar transparant. */
.tap-mtiles .e-con.tap-tile-in { padding: 40px 20px 18px; background: linear-gradient(0deg, rgba(31, 34, 36, .94) 0%, rgba(31, 34, 36, var(--tap-tile-shade)) 55%, rgba(31, 34, 36, 0) 100%); }
.tap-mtiles .tap-tile-in :is(h3, h4), .tap-mtiles .tap-tile-in .elementor-heading-title { font: 500 19px/1.2 "Jost", sans-serif; color: #fff; margin: 0; }
/* Verticale lucht van de witte secties (padding-links/-rechts komt van .tap-wrap). */
.e-con.tap-rasterwrap { padding-top: 72px; padding-bottom: 88px; }
.e-con.tap-formcols { padding-top: 72px; padding-bottom: 96px; }
/* Filters: pillen, actief = antraciet. */
.e-con.tap-rasterwrap .elementor-widget-html { width: 100%; }
.tap-filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 32px; }
.tap-filters button {
font: 500 15px/1.2 "Jost", sans-serif; padding: 11px 22px; border-radius: var(--tap-pill);
border: 1px solid var(--tap-line); background: #fff; color: var(--tap-dark); cursor: pointer;
transition: border-color .2s, background .2s, color .2s;
}
.tap-filters button:hover { border-color: var(--tap-dark); }
.tap-filters button:focus-visible { outline: 2px solid var(--tap-ink); outline-offset: 2px; }
.tap-filters button.is-active, .tap-filters button[aria-pressed="true"] { background: var(--tap-dark); color: #fff; border-color: var(--tap-dark); }
/* Kaarten: foto, naam, "Art. ... · ...", "Offerte ->". Het hidden-attribuut van tap-filter.js moet winnen van display:flex. */
.tap-products { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.tap-product { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--tap-line); border-radius: var(--tap-card); overflow: hidden; padding: 0 0 20px; }
.tap-product[hidden] { display: none; }
.tap-product img { display: block; width: 100%; height: 220px; object-fit: contain; background: #fff; border-bottom: 1px solid var(--tap-line); padding: 12px; box-sizing: border-box; }
.tap-product h3 { font: 600 19px/1.25 "Jost", sans-serif; color: var(--tap-ink); margin: 18px 20px 0; }
.tap-product p { font-size: 14px; line-height: 1.4; color: #4d545c; margin: 4px 20px 0; }
.tap-product a.tap-link { margin: auto 20px 0; padding-top: 14px; font: 600 14px/1.2 "Jost", sans-serif; color: var(--tap-gold-dark); text-decoration: none; }
.tap-product a.tap-link:hover { text-decoration: underline; }
.tap-product a.tap-link:focus-visible { outline: 2px solid var(--tap-ink); outline-offset: 3px; }
/* Contact (feedback 02/10, "nu is er veel wit"): de formuliersectie staat op zand; het formulier zit in een witte
kaart met gouden bovenrand (zelfde taal als .tap-cards), de contactgegevens in een antraciet kaart rechts.
Contrast: veldranden 3,26:1 op wit; in de antraciet kaart wit 12,8:1, goudlicht (links, iconen) 7,8:1. */
#offerte { scroll-margin-top: 120px; } /* anker /contact/#offerte landt onder de sticky header */
.e-con.tap-formcols { background: var(--tap-sand); }
.tap-formcols > .e-con-inner { display: grid; grid-template-columns: 1.5fr 1fr; gap: 48px; align-items: start; }
.e-con.tap-formcol { background: #fff; border-top: 4px solid var(--tap-gold); border-radius: 0 0 var(--tap-card) var(--tap-card); box-shadow: 0 10px 30px rgba(31, 34, 36, .08); }
.tap-formcols .e-con.tap-darkcard { align-self: start; }
.e-con.tap-darkcard { background: var(--tap-dark); border-top: 4px solid var(--tap-gold); border-radius: 0 0 var(--tap-card) var(--tap-card); color: #fff; }
.tap-darkcard :is(h2, h2.elementor-heading-title) { font: 600 26px/1.2 "Jost", sans-serif; color: #fff; margin: 0 0 4px; }
.tap-darkcard :is(h3, h3.elementor-heading-title) { font: 600 18px/1.3 "Jost", sans-serif; color: var(--tap-gold-light); margin: 12px 0 0; }
.tap-darkcard p, .tap-darkcard .tap-address, .tap-darkcard .tap-hours, .tap-darkcard .tap-hours li span { color: #fff; }
.tap-darkcard p { margin: 0 0 4px; }
.tap-darkcard a, .tap-darkcard a:visited, .tap-darkcard .tap-link a, .tap-darkcard .tap-link a:visited { color: var(--tap-gold-light); }
.tap-darkcard a:hover, .tap-darkcard a:focus, .tap-darkcard .tap-link a:hover, .tap-darkcard .tap-link a:focus { color: #fff; text-decoration: underline; }
.tap-darkcard a:focus-visible { outline: 2px solid var(--tap-gold-light); outline-offset: 2px; }
.tap-darkcard .tap-hours li { padding: 6px 0; border-bottom: 1px solid rgba(255, 255, 255, .14); }
.tap-darkcard .tap-hours li:last-child { border-bottom: 0; }
.tap-darkcard .tap-hours li span:first-child { color: var(--tap-gold-light); font-weight: 600; }
/* Contactregels met icoon (feedback 02/10): adres, telefoon, e-mail. Icoon 18 px vóór de tekst, kleur via
currentColor van de regel tenzij hieronder gezet; lange e-mailadressen breken af in plaats van uit te lopen. */
.tap-cline { display: inline-flex; align-items: flex-start; gap: 10px; overflow-wrap: anywhere; }
.tap-cline .tap-icoon { flex: none; width: 18px; height: 18px; margin-top: .2em; }
.tap-darkcard .tap-cline .tap-icoon { color: var(--tap-gold-light); } /* 7,8:1 op antraciet */
/* Footer: elke regel een blok met het icoon inline, zodat de uitlijning van de footerkolom (Astra: gecentreerd)
gewoon geldt voor icoon + tekst samen. */
.site-footer .tap-clines { display: flex; flex-direction: column; gap: 6px; }
.site-footer .tap-cline { display: block; }
.site-footer .tap-cline .tap-icoon { display: inline-block; vertical-align: -3px; margin: 0 8px 0 0; width: 16px; height: 16px; color: var(--tap-gold-light); } /* 7,8:1 op antraciet */
/* Forminator (formulier 265): alleen stijl. Labels Jost, velden met 1px lijn en 10 px hoek, focusring ink. */
.forminator-ui#forminator-module-265.forminator-design--default.forminator-custom-form .forminator-label,
.forminator-ui#forminator-module-265.forminator-design--default.forminator-custom-form .forminator-field > span.forminator-label { font: 600 14px/1.4 "Jost", sans-serif; letter-spacing: .02em; color: var(--tap-ink); margin-bottom: 6px; }
.forminator-ui#forminator-module-265.forminator-design--default.forminator-custom-form .forminator-row { margin-bottom: 22px; }
.forminator-ui#forminator-module-265.forminator-design--default.forminator-custom-form .forminator-row:last-child { margin-bottom: 0; }
.forminator-ui#forminator-module-265.forminator-design--default.forminator-custom-form .forminator-radio { margin-bottom: 8px; }
.forminator-ui#forminator-module-265.forminator-design--default.forminator-custom-form .forminator-required { color: #A61B1B; }
.forminator-ui#forminator-module-265.forminator-design--default.forminator-custom-form .forminator-description, .forminator-ui#forminator-module-265.forminator-design--default.forminator-custom-form .forminator-description span { font-size: 13px; color: #4d545c; }
.forminator-ui#forminator-module-265.forminator-design--default.forminator-custom-form .forminator-input, .forminator-ui#forminator-module-265.forminator-design--default.forminator-custom-form .forminator-textarea {
font-family: inherit; font-size: 16px; color: var(--tap-ink); background: #fff;
border: 1px solid var(--tap-field-border); border-radius: 10px; padding: 12px 14px; min-height: 48px; box-shadow: none;
}
.forminator-ui#forminator-module-265.forminator-design--default.forminator-custom-form .forminator-input:focus, .forminator-ui#forminator-module-265.forminator-design--default.forminator-custom-form .forminator-textarea:focus { outline: 2px solid var(--tap-ink); outline-offset: 2px; border-color: var(--tap-ink); box-shadow: none; }
.forminator-ui#forminator-module-265.forminator-design--default.forminator-custom-form .forminator-input::placeholder, .forminator-ui#forminator-module-265.forminator-design--default.forminator-custom-form .forminator-textarea::placeholder { color: #5d646b; opacity: 1; }
.forminator-ui#forminator-module-265.forminator-design--default.forminator-custom-form .forminator-radio .forminator-radio-label, .forminator-ui#forminator-module-265.forminator-design--default.forminator-custom-form .forminator-checkbox .forminator-checkbox-label { font-size: 16px; color: var(--tap-ink); }
.forminator-ui#forminator-module-265.forminator-design--default.forminator-custom-form .forminator-multi-upload { border: 1px dashed var(--tap-field-border); border-radius: 10px; background: #fff; }
.forminator-ui#forminator-module-265.forminator-design--default.forminator-custom-form .forminator-multi-upload-message p { color: var(--tap-ink); }
.forminator-ui#forminator-module-265.forminator-design--default.forminator-custom-form .forminator-select2 + .forminator-select .selection .select2-selection--single[role="combobox"] { border: 1px solid var(--tap-field-border); border-radius: 10px; min-height: 48px; background-color: #fff; }
.forminator-ui#forminator-module-265.forminator-design--default.forminator-custom-form .forminator-radio .forminator-radio-bullet, .forminator-ui#forminator-module-265.forminator-design--default.forminator-custom-form .forminator-checkbox .forminator-checkbox-box { border-color: var(--tap-field-border); }
.forminator-ui#forminator-module-265.forminator-design--default.forminator-custom-form .forminator-checkbox input:not(:checked) + .forminator-checkbox-box { background-color: #fff; }
.forminator-ui#forminator-module-265.forminator-design--default.forminator-custom-form .forminator-radio input:not(:checked) + .forminator-radio-bullet { background-color: #fff; }
.forminator-ui#forminator-module-265.forminator-design--default.forminator-custom-form .select2-container--focus .select2-selection--single, .forminator-ui#forminator-module-265.forminator-design--default.forminator-custom-form .select2-container--open .select2-selection--single { outline: 2px solid var(--tap-ink); outline-offset: 2px; }
.forminator-ui#forminator-module-265.forminator-design--default.forminator-custom-form .forminator-error-message { color: #A61B1B; }
@media (max-width: 1024px) {
.e-con.tap-rasterwrap { padding-top: 56px; padding-bottom: 72px; }
.e-con.tap-formcols { padding-top: 56px; padding-bottom: 72px; }
.tap-titleband.tap-split--link > .e-con-inner { align-items: start; }
.tap-maatband-top > .e-con-inner { gap: 12px; }
.tap-mtiles > .e-con-inner { grid-template-columns: repeat(2, 1fr); }
.tap-products { grid-template-columns: repeat(3, 1fr); gap: 18px; }
.tap-formcols > .e-con-inner { grid-template-columns: 1fr; gap: 32px; }
.e-con.tap-formcol { padding: 36px 32px; }
}
@media (max-width: 640px) {
.e-con.tap-rasterwrap { padding-top: 40px; padding-bottom: 56px; }
.e-con.tap-formcols { padding-top: 40px; padding-bottom: 56px; }
.tap-titleband .elementor-widget-button.tap-btn { display: none; }
.tap-mtiles > .e-con-inner { gap: 12px; }
.tap-mtiles .e-con.tap-tile-in { padding: 32px 14px 12px; }
.tap-mtiles .tap-tile-in :is(h3, h4), .tap-mtiles .tap-tile-in .elementor-heading-title { font-size: 16px; }
.tap-filters { gap: 8px; margin-bottom: 24px; }
.tap-filters button { font-size: 14px; padding: 9px 16px; }
.tap-products { grid-template-columns: repeat(2, 1fr); gap: 12px; }
.tap-product { padding-bottom: 14px; }
.tap-product img { height: 150px; }
.tap-product h3 { font-size: 16px; margin: 14px 14px 0; }
.tap-product p { font-size: 13px; margin: 4px 14px 0; }
.tap-product a.tap-link { margin: auto 14px 0; padding-top: 10px; }
.e-con.tap-darkcard { padding: 26px 22px; }
.e-con.tap-formcol { padding: 28px 20px; }
}
/* Ruling O7: elementor_build schrijft padding altijd met vier zijden (ontbrekende = 0). De zijmarge van .tap-wrap-secties
moet dan winnen van Elementor's per-element-regel (.elementor-NN .elementor-element.elementor-element-ID). */
.elementor .elementor-element.e-con.tap-wrap { padding-left: var(--tap-pad); padding-right: var(--tap-pad); }
.elementor .elementor-element.e-con:is(.tap-band--sand, .tap-band--gold, .tap-band--dark, .tap-hero) { padding-left: var(--tap-pad); padding-right: var(--tap-pad); }
/* Elementor legt top/bottom-padding van een boxed container op .e-con-inner (var(--padding-top/-bottom)). De vaste desktopwaarden
(bv. 110 px) worden op tablet/gsm begrensd. */
@media (max-width: 1024px) {
.elementor .e-con.tap-wrap:not(.tap-overlap) > .e-con-inner { padding-block-start: min(var(--padding-top), 72px); padding-block-end: min(var(--padding-bottom), 72px); }
}
@media (max-width: 640px) {
.elementor .e-con.tap-wrap:not(.tap-overlap) > .e-con-inner { padding-block-start: min(var(--padding-top), 48px); padding-block-end: min(var(--padding-bottom), 56px); }
}
/* Overlap-secties (Fix round 2): .tap-overlap > .e-con-inner is display:contents, dus inner padding is inert. De witruimte van de
schets (.gen/.prod/.mat {padding:110px 0}, gsm 64) staat op de BUITENSTE top-level sectie; geneste overlaps (projecten-cases)
krijgen die van hun .tap-case. Tablet 80 px is een eigen keuze (schets zwijgt). */
.elementor > .e-con.tap-overlap { padding-top: 110px; padding-bottom: 110px; }
@media (max-width: 1024px) { .elementor > .e-con.tap-overlap { padding-top: 80px; padding-bottom: 80px; } }
@media (max-width: 640px) { .elementor > .e-con.tap-overlap { padding-top: 64px; padding-bottom: 64px; } }
/* Aangevinkte radio/checkbox in huisstijl (Forminator-standaard is blauw): rand en stip in --tap-gold-dark (5,5:1 op wit). */
.forminator-ui#forminator-module-265.forminator-design--default.forminator-custom-form .forminator-radio input:checked + .forminator-radio-bullet { border-color: var(--tap-gold-dark); background-color: #fff; }
.forminator-ui#forminator-module-265.forminator-design--default.forminator-custom-form .forminator-radio input:checked + .forminator-radio-bullet::before { background-color: var(--tap-gold-dark); }
.forminator-ui#forminator-module-265.forminator-design--default.forminator-custom-form .forminator-checkbox input:checked + .forminator-checkbox-box { border-color: var(--tap-gold-dark); background-color: var(--tap-gold-dark); }
/* ==================================================================================================
QA-fixes na de opmaakherziening (29/09). Astra past de tekstkleuren van balk en footer uit
astra-settings.json niet toe (tekst valt terug op de body-kleur #2E3335 = de achtergrond); daarom hier.
Inline kleuren op links (goudlicht/wit) winnen van deze regels.
================================================================================================== */
.ast-above-header-bar, .ast-above-header-bar .ast-builder-html-element, .ast-above-header-bar .ast-builder-html-element p { color: #CFD2D3; }
/* Bovenbalk rechts (feedbackronde 2026-09-30): "Verkooppunten" en "Brochure" (PDF) als aparte links (de ontwerpmodule-link is op 15/10 geschrapt),
elk met een eigen icoon ([tap_icoon], currentColor) en een dunne verticale scheidingslijn ertussen. De balk staat
alleen in de desktopheader (> 921 px) en past daar met twee links ruim op één regel. Zelfde stijl voor beide:
goudlicht op antraciet (7,8:1), wit bij hover/focus. HTML staat in build/data/astra-settings.json (header-html-2),
push met build/tools/push_astra_settings.py. */
.ast-above-header-bar a.tap-topbar-link, .ast-above-header-bar a.tap-topbar-link:visited {
display: inline-flex; align-items: center; gap: 6px; color: var(--tap-gold-light); font-weight: 700; text-decoration: none;
}
.ast-above-header-bar a.tap-topbar-link:hover, .ast-above-header-bar a.tap-topbar-link:focus { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.ast-above-header-bar a.tap-topbar-link:focus-visible { outline: 2px solid var(--tap-gold-light); outline-offset: 2px; }
.ast-above-header-bar .tap-topbar-link .tap-icoon { flex: none; width: 14px; height: 14px; }
.ast-above-header-bar .tap-topbar-sep {
display: inline-block; vertical-align: middle; width: 1px; height: 14px; margin: 0 18px; background: rgba(216, 200, 174, .5);
}
.site-footer .tap-hours, .site-footer .tap-hours li, .site-footer .tap-hours li span { color: #CFD2D3; }
.site-footer .ast-footer-copyright, .site-footer .ast-footer-copyright > div, .site-footer .ast-footer-copyright span { color: #CFD2D3; }
/* Fototegels op de home: tekst wit/goudlicht; het verloop is onder het hele tekstblok sterk (>= 90 % ink)
zodra de uitleg zichtbaar is (hover op desktop, altijd open op tablet en gsm). Zonder uitleg blijft het
lichte verloop van de rust-stand (alleen eyebrow + titel onderaan). */
.tap-tiles .tap-tile-more, .tap-tiles .tap-tile-more p { color: #fff; }
.tap-tiles .tap-tile-more a, .tap-tiles .tap-tile-more a:visited { color: var(--tap-gold-light); }
.tap-tiles .tap-tile-more a:hover, .tap-tiles .tap-tile-more a:focus { color: #fff; }
.tap-tiles .tap-tile::after {
background: linear-gradient(0deg, rgba(31, 34, 36, .94) 8%, rgba(31, 34, 36, .78) 30%, rgba(31, 34, 36, .05) 62%);
}
.tap-tiles .tap-tile:hover::after, .tap-tiles .tap-tile:focus-within::after {
background: linear-gradient(0deg, rgba(31, 34, 36, .94) 0%, rgba(31, 34, 36, var(--tap-tile-shade)) 94%, rgba(31, 34, 36, .6) 100%);
}
@media (max-width: 921px) {
.tap-tiles .tap-tile { min-height: 500px; } /* de uitleg staat open: ruimte zodat het tekstblok onder het sterke deel van het verloop valt */
.tap-tiles .tap-tile::after {
background: linear-gradient(0deg, rgba(31, 34, 36, .94) 0%, rgba(31, 34, 36, var(--tap-tile-shade)) 94%, rgba(31, 34, 36, .6) 100%);
}
}
/* ==================================================================================================
Carrousel "Recent uit ons atelier" (home, feedbackronde 30/09, schets feedback-2026-09-30.html sectie 2). Geen plugin:
CSS scroll-snap-spoor (html-widget, pages_home.py) + js/tap-carousel.js (knoppen, pijltoetsen, voortgangsbalk).
Zonder JS blijft het spoor scrollbaar met een zichtbare dunne scrollbalk; .is-js (gezet door het script) verbergt die.
Zichtbaar: ~3,3 tegels op desktop, ~1,6 op tablet, 82 % breed op gsm.
================================================================================================== */
.tap-car-head > .e-con-inner { align-items: end; }
.tap-car-nav { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: flex-end; }
.tap-car-nav .tap-lnk { margin-right: 14px; }
.tap-car-btn {
width: 48px; height: 48px; padding: 0; border-radius: 50%; border: 2px solid var(--tap-dark);
background: transparent; color: var(--tap-dark); font: 400 20px/1 "Jost", sans-serif; cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
}
.tap-car-btn[hidden] { display: none; }
.tap-car .tap-car-btn:hover, .tap-car .tap-car-btn:focus-visible { background: var(--tap-dark); color: #fff; border-color: var(--tap-dark); }
.tap-car .tap-car-btn:focus-visible { outline: 2px solid var(--tap-ink); outline-offset: 3px; }
.tap-car .tap-car-btn[aria-disabled="true"] { opacity: .35; cursor: default; background: transparent; color: var(--tap-dark); }
.tap-car-track {
display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 3 * 16px) / 3.3); gap: 16px;
overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; padding-bottom: 4px;
scrollbar-width: thin; scrollbar-color: var(--tap-gold-dark) var(--tap-line);
}
@media (prefers-reduced-motion: no-preference) { .tap-car-track { scroll-behavior: smooth; } }
.tap-car-track.is-js { scrollbar-width: none; }
.tap-car-track.is-js::-webkit-scrollbar { display: none; }
.tap-car-track:focus-visible { outline: 2px solid var(--tap-ink); outline-offset: 4px; }
/* De tegel is het referentiekader van de stretched link: de tekstlaag blijft daarom in de flow (niet gepositioneerd,
onderaan via flex) en de foto ligt er met z-index -1 onder (isolation: eigen stapelcontext). */
.tap-car-tile {
position: relative; isolation: isolate; overflow: hidden; aspect-ratio: 4 / 5; background: var(--tap-dark); scroll-snap-align: start;
display: flex; flex-direction: column; justify-content: flex-end;
}
.tap-car-tile img { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s; }
.tap-car-tile:hover img { transform: scale(1.04); }
/* Tekst onderaan: onder het hele tekstblok >= --tap-tile-shade ink (wit en goudlicht halen dan >= 4,5, ook bij een
witte foto); pas in de bovenste 40 px (= kleiner dan de bovenpadding) loopt het verloop uit naar transparant. */
.tap-car-in {
padding: 48px 22px 22px;
background: linear-gradient(0deg, rgba(31, 34, 36, .94) 0%, rgba(31, 34, 36, var(--tap-tile-shade)) calc(100% - 40px), rgba(31, 34, 36, 0) 100%);
}
.tap-car .tap-car-tile h3 { margin: 4px 0 0; font: 500 19px/1.25 "Jost", sans-serif; color: #fff; }
.tap-car .tap-car-tile a.tap-car-link:not(.tap-btn), .tap-car .tap-car-tile a.tap-car-link:not(.tap-btn):visited { color: #fff; text-decoration: none; }
/* Stretched link: ::after van de link bedekt de hele tegel; de focusring staat op die laag (ink + wit, zichtbaar op elke foto). */
.tap-car-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.tap-car .tap-car-link:focus { outline: none; }
.tap-car .tap-car-link:focus-visible::after { box-shadow: inset 0 0 0 3px var(--tap-ink), inset 0 0 0 6px #fff; }
.tap-car-tile.tap-car-end { align-items: flex-start; padding: 28px; }
.tap-car .tap-car-tile.tap-car-end h3 { font-size: 24px; margin: 0 0 14px; }
.tap-car-progress { height: 3px; background: var(--tap-line); margin-top: 24px; position: relative; }
.tap-car-progress[hidden] { display: none; }
.tap-car-progress span { position: absolute; left: 0; top: 0; height: 100%; width: 30%; background: var(--tap-gold-dark); }
@media (prefers-reduced-motion: no-preference) { .tap-car-progress span { transition: left .3s; } }
@media (max-width: 1024px) {
.tap-car-track { grid-auto-columns: calc((100% - 16px) / 1.6); }
}
@media (min-width: 641px) and (max-width: 1024px) {
/* Tablet: kop en knoppen blijven naast elkaar (tap-split zet ze anders onder elkaar). */
.tap-split--link.tap-car-head > .e-con-inner { grid-template-columns: 1fr auto; align-items: end; }
}
@media (max-width: 640px) {
.tap-car-track { grid-auto-columns: 82%; gap: 12px; }
.tap-car-nav { justify-content: flex-start; }
}
/* ==================================================================================================
Gouden afsluiter, variant 3B "compact en gecentreerd" (feedbackronde 30/09, schets feedback-2026-09-30.html):
één gecentreerde kolom (pages_techniek._cta): eyebrow, grote H2 in hoofdletters (accent = ink + witte onderstreping,
zie .tap-band--gold .tap-accent), tekst (max. 620 px), rij met de donkere knop en "Liever bellen?" (wikkelt op gsm).
Minder hoog dan de oude tweekoloms-band: 72 px boven/onder (tablet 64, gsm 48/56). Tekst op goud = ink.
================================================================================================== */
.elementor .e-con.tap-band--gold.tap-cta { padding-top: 72px; padding-bottom: 72px; }
.e-con.tap-cta > .e-con-inner { align-items: center; text-align: center; gap: 0; }
.tap-cta .tap-eyebrow { margin-bottom: 8px; }
.tap-band--gold.tap-cta h2.elementor-heading-title { font: 600 clamp(34px, 4.4vw, 60px)/1.1 "Jost", sans-serif; text-transform: uppercase; margin: 0; }
.tap-cta > .e-con-inner > .elementor-widget-text-editor { max-width: 620px; margin: 16px auto 26px; }
.tap-band--gold.tap-cta p { margin: 0; }
.e-con.tap-cta-row > .e-con-inner { flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px 28px; }
.e-con.tap-cta > .e-con-inner > .e-con.tap-cta-row { width: auto; max-width: 100%; }
.tap-cta-row .elementor-widget { width: auto; max-width: 100%; margin: 0; }
@media (max-width: 1024px) {
.elementor .e-con.tap-band--gold.tap-cta { padding-top: 64px; padding-bottom: 64px; }
}
@media (max-width: 640px) {
.elementor .e-con.tap-band--gold.tap-cta { padding-top: 48px; padding-bottom: 56px; }
.tap-cta > .e-con-inner > .elementor-widget-text-editor { margin: 14px auto 22px; }
}
/* [tap_projecten] (spec 2026-10-14): zelfde opmaak als de Elementor-cases, met eigen HTML. */
.tap-case--sc { padding-left: var(--tap-pad); padding-right: var(--tap-pad); }
.tap-case--sc.tap-wrap { padding-top: 96px; padding-bottom: 96px; }
@media (max-width: 1024px) { .tap-case--sc.tap-wrap { padding-top: 72px; padding-bottom: 72px; } }
@media (max-width: 640px) { .tap-case--sc.tap-wrap { padding-top: 64px; padding-bottom: 64px; } }
.tap-case--sc .tap-case__inner { max-width: 1400px; margin: 0 auto; }
.tap-case--sc .tap-panel p { color: #fff; }
.tap-case--sc .tap-panel p.tap-case-tech { color: var(--tap-gold-light); font: 600 12.5px/1.4 "Jost", sans-serif; letter-spacing: .2em; text-transform: uppercase; opacity: 1; }
.tap-case--sc .tap-panel p.tap-eyebrow { margin: 0 0 -8px; color: var(--tap-gold-light); }
/* Paneel-geometrie gelijk aan de oude Elementor-cases (basismeting 2026-10-14): padding 52/50, 14 px tussen de regels. */
.tap-case--sc .tap-case-panel { display: flex; flex-direction: column; gap: 14px; padding: 52px 50px 72px; width: 100%; max-width: none; }
.tap-case--sc .tap-quote p:last-child { margin: 0; }
@media (max-width: 640px) { .tap-case--sc .tap-case-panel { padding: 36px 26px 56px; } }
/* ==================================================================================================
Offerteformulier compact (feedbackronde 15/10): Naam|Bedrijf en E-mail|Telefoon in twee kolommen (Forminator-kolommen,
forminator_form.php), de rest volle breedte.
Op een gsm (<= 640 px) staat alles onder elkaar. (De keuze offerte/algemene vraag is op 19/10 vervallen.)
================================================================================================== */
#forminator-module-265.forminator-ui.forminator-design--default .forminator-row { gap: 0; }
#forminator-module-265.forminator-ui.forminator-design--default .forminator-row > .forminator-col-6 { padding-left: 0; padding-right: 0; }
@media (min-width: 641px) {
#forminator-module-265.forminator-ui.forminator-design--default .forminator-row:has(> .forminator-col-6) { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
#forminator-module-265.forminator-ui.forminator-design--default .forminator-row > .forminator-col-6 { width: auto; max-width: none; flex: none; }
}
@media (max-width: 640px) {
#forminator-module-265.forminator-ui.forminator-design--default .forminator-row:has(> .forminator-col-6) { display: block; }
#forminator-module-265.forminator-ui.forminator-design--default .forminator-row > .forminator-col-6 { width: 100%; max-width: 100%; margin-bottom: 22px; }
#forminator-module-265.forminator-ui.forminator-design--default .forminator-row > .forminator-col-6:last-child { margin-bottom: 0; }
}
/* ==================================================================================================
Brochurepagina /producten/ (feedbackronde 15/10): korte tekst, voorblad van de brochure als grote link naar de PDF,
gouden downloadknop eronder. Voorblad: pagina 1 van TAP-FOLDER-2020.pdf (witte pagina, dus lijn + schaduw).
================================================================================================== */
.e-con.tap-brochure { padding-top: 72px; padding-bottom: 96px; }
.tap-brochure > .e-con-inner { align-items: center; text-align: center; }
.tap-brochure .tap-brochure-tekst { max-width: 62ch; font-size: 19px; line-height: 1.6; }
.tap-brochure .tap-brochure-tekst p { margin: 0; }
.tap-brochure a.tap-brochure-cover { display: block; width: min(100%, 420px); /* kleiner voorblad (max 420px), verhouding blijft behouden */ margin: 0 auto; border: 1px solid var(--tap-line); box-shadow: 0 18px 44px rgba(31, 34, 36, .16); background: #fff; line-height: 0; transition: box-shadow .2s ease, transform .2s ease; }
.tap-brochure a.tap-brochure-cover:hover, .tap-brochure a.tap-brochure-cover:focus-visible { box-shadow: 0 22px 52px rgba(31, 34, 36, .24); transform: translateY(-2px); }
.tap-brochure a.tap-brochure-cover:focus-visible { outline: 3px solid var(--tap-ink); outline-offset: 4px; }
.tap-brochure a.tap-brochure-cover img { display: block; width: 100%; height: auto; }
@media (max-width: 1024px) { .e-con.tap-brochure { padding-top: 56px; padding-bottom: 72px; } }
@media (max-width: 640px) { .e-con.tap-brochure { padding-top: 40px; padding-bottom: 56px; } .tap-brochure .tap-brochure-tekst { font-size: 17px; } }
@media (prefers-reduced-motion: reduce) { .tap-brochure a.tap-brochure-cover { transition: none; } .tap-brochure a.tap-brochure-cover:hover { transform: none; } }
/* Nieuwe catalogus "binnenkort" (vraag Christian 27/10): een banner in knopvorm boven het voorblad, als HTML-widget in
de brochuresectie (Elementor). Donker met gouden rand en label, een glans die om de paar seconden overstrijkt. Geen link
(er is nog niets te downloaden), dus geen hover of klikcursor. Weg zodra de nieuwe catalogus er is: widget verwijderen.
Nieuw
Download binnenkort onze nieuwe catalogus
*/
.tap-binnenkort { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 14px; max-width: 100%; padding: 12px 26px 12px 12px; border: 2px solid var(--tap-gold); border-radius: var(--tap-pill); background: var(--tap-dark); color: #fff; box-shadow: 0 10px 28px rgba(31, 34, 36, .22); font-family: "Jost", sans-serif; text-align: left; }
.tap-binnenkort-label { flex: none; padding: 6px 14px; border-radius: var(--tap-pill); background: var(--tap-gold); color: var(--tap-ink); font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.tap-binnenkort-tekst { font-size: clamp(17px, 2vw, 21px); font-weight: 600; line-height: 1.3; }
.tap-binnenkort::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .22) 50%, transparent 70%); transform: translateX(-120%); animation: tap-glans 5s ease-in-out 1s infinite; pointer-events: none; }
@keyframes tap-glans { 0% { transform: translateX(-120%); } 35%, 100% { transform: translateX(120%); } }
@media (max-width: 640px) { .tap-binnenkort { gap: 10px; padding: 10px 18px 10px 10px; } .tap-binnenkort-label { padding: 5px 10px; font-size: 11px; } }
@media (prefers-reduced-motion: reduce) { .tap-binnenkort::after { animation: none; display: none; } }
/* ==================================================================================================
Instagram-feed op /projecten/ (feedbackronde 15/10, Smash Balloon Instagram Feed gratis 6.14.0). Markup van de plugin:
#sb_instagram.sbi.sbi_col_N > #sbi_images[role=list] > .sbi_item > .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 ("Volg ons op Instagram").
Vierkant raster 3 / 2 / 1 kolommen, geen header. Knoppen: "Meer laden" goud met ink-tekst, "Volg ons" donker met witte tekst
(nooit witte tekst op goud). Selector #sb_instagram.sbi (extra klasse) wint van de kolomregels van de plugin (#sb_instagram.sbi_col_3 #sbi_images, gelijke specificiteit, later geladen).
Zonder feed of berichten verbergt dit de hele sectie voor bezoekers (inc/instagram.php geeft
dan ook niets terug); beheerders zien de plugin-melding. Adaptatie van het raster op de Banden Ackermans-site.
================================================================================================== */
.e-con.tap-igfeed { padding-top: 96px; padding-bottom: 96px; }
.tap-igfeed #sb_instagram { width: 100% !important; padding: 0 !important; background: none !important; }
.tap-igfeed #sb_instagram.sbi #sbi_images { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px !important; padding: 0 !important; } /* tussenruimte 10px zoals .tap-strip */
.tap-igfeed #sb_instagram #sbi_images .sbi_item { background: var(--tap-sand); border-radius: 0; overflow: hidden; outline: 2px solid transparent; outline-offset: -2px; transition: outline-color .15s; /* vierkant, zoals de strip */ width: auto !important; padding: 0 !important; }
.tap-igfeed #sb_instagram #sbi_images .sbi_item:hover, .tap-igfeed #sb_instagram #sbi_images .sbi_item:has(.sbi_photo:focus-visible) { outline-color: var(--tap-gold-dark); }
.tap-igfeed #sb_instagram .sbi_photo { display: block; aspect-ratio: 1 / 1; height: auto !important; }
.tap-igfeed #sb_instagram .sbi_photo img { width: 100%; height: 100% !important; object-fit: cover; }
.tap-igfeed #sb_instagram #sbi_load { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 28px; padding: 0; }
.tap-igfeed #sb_instagram #sbi_load .sbi_load_btn, .tap-igfeed #sb_instagram .sbi_follow_btn a {
display: inline-flex; align-items: center; gap: 8px; margin: 0 !important; padding: 14px 28px !important; border: 0 !important; border-radius: 999px !important;
font: 600 14px/1.2 "Jost", sans-serif !important; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; cursor: pointer; opacity: 1 !important;
}
.tap-igfeed #sb_instagram #sbi_load .sbi_load_btn { background: var(--tap-gold) !important; color: var(--tap-ink) !important; }
.tap-igfeed #sb_instagram .sbi_follow_btn a { background: var(--tap-dark) !important; color: #fff !important; }
.tap-igfeed #sb_instagram #sbi_load .sbi_load_btn:hover, .tap-igfeed #sb_instagram #sbi_load .sbi_load_btn:focus-visible { background: var(--tap-gold-hover) !important; color: var(--tap-ink) !important; }
.tap-igfeed #sb_instagram .sbi_follow_btn a:hover, .tap-igfeed #sb_instagram .sbi_follow_btn a:focus-visible { background: var(--tap-ink) !important; color: #fff !important; }
.tap-igfeed #sb_instagram .sbi_follow_btn { margin: 0 !important; }
.tap-igfeed #sb_instagram .sbi_follow_btn svg { fill: currentColor; }
@media (max-width: 1024px) { .e-con.tap-igfeed { padding-top: 72px; padding-bottom: 72px; } .tap-igfeed #sb_instagram.sbi #sbi_images { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .e-con.tap-igfeed { padding-top: 56px; padding-bottom: 56px; } .tap-igfeed #sb_instagram.sbi #sbi_images { grid-template-columns: 1fr; } }
/* De plugin zet haar beheerdersmelding ook in de HTML voor bezoekers; inc/instagram.php haalt ze weg, dit is het vangnet. */
body:not(.logged-in) #sbi_mod_error, body:not(.logged-in) #sb_instagram .sb_instagram_error { display: none !important; }
/* Geen koppeling of 0 berichten: geen lege sectie, ook niet de kop. */
body:not(.logged-in) .tap-igfeed:not(:has(.sbi_item)) { display: none; }
/* ---- Diavoorstellingen ([tap_diashow], spec 2026-10-15) ----
De figure neemt de plaats van de oude ![]()
: de bestaande regels (.tap-hero-pic img, .tap-pic img,
.tap-overlap img: breedte/hoogte/object-fit per breakpoint) gelden ook voor de foto's erin.
De eerste foto staat in de flow (bepaalt de ruimte), de rest ligt er absoluut over. Zonder JS of met
een enkele foto blijft alleen de eerste (is-actief) zichtbaar, dus ziet het eruit als vroeger.
Crossfade: de nieuwe foto (is-actief, z 2) vloeit over de vorige (is-weg, z 1, blijft ondoorzichtig),
daarna verdwijnt de vorige; zo schijnt er nooit achtergrond door. */
.tap-diashow { position: relative; margin: 0; padding: 0; overflow: hidden; }
.tap-diashow__img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0; z-index: 0; transition: opacity 1.2s ease; }
.tap-diashow__img:first-child { position: relative; }
.tap-diashow__img:not(:first-child) { position: absolute; inset: 0; }
.tap-diashow__img.is-weg { opacity: 1; z-index: 1; transition: none; }
.tap-diashow__img.is-actief { opacity: 1; z-index: 2; }
.tap-hero-pic .tap-diashow { border-radius: 4px; }
/* Fototegel (.tap-tile): de foto was een Elementor image-widget die de tegel vult. Een shortcode-widget staat
in dezelfde plek (.e-con-inner > .elementor-widget-shortcode > [.elementor-widget-container >] .elementor-shortcode > figure),
dus die wrapper-keten vult de tegel en de figure volgt. De tegel-regel ".tap-tile img" (absolute, zoom bij hover) blijft gelden. */
.tap-tile .elementor-widget-shortcode, .tap-tile .elementor-widget-shortcode :is(.elementor-widget-container, .elementor-shortcode) { position: absolute; inset: 0; }
.tap-tile .tap-diashow { position: absolute; inset: 0; }
.tap-tile .tap-diashow__img { transition: transform .6s, opacity 1.2s ease; }
.tap-tile .tap-diashow__img.is-weg { transition: transform .6s; }
@media (prefers-reduced-motion: reduce) { .tap-diashow__img, .tap-tile .tap-diashow__img { transition: none; } }
/* Pauzeknop (WCAG 2.2.2): klein en rustig rechtsboven, boven de stretched link van een fototegel (z 2). Alleen via JS, dus niet bij "minder beweging". */
.tap-diashow__pauze { position: absolute; top: 12px; right: 12px; z-index: 3; width: 34px; height: 34px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(31, 34, 36, .5); color: #fff; cursor: pointer; opacity: .75; transition: opacity .2s, background-color .2s; }
.tap-diashow__pauze:hover, .tap-diashow__pauze:focus-visible { opacity: 1; background: rgba(31, 34, 36, .8); }
.tap-diashow__pauze:focus-visible { outline: 2px solid var(--tap-gold-light); outline-offset: 2px; }
.tap-diashow__pauze svg { fill: currentColor; }
.tap-tile .tap-diashow__pauze { top: auto; bottom: 12px; } /* fototegel (home-gamma): op gsm ligt het paneel over de bovenkant van de foto */
.tap-diashow__pauze .tap-diashow__pauze-play, .tap-diashow.is-gepauzeerd .tap-diashow__pauze-ii { display: none; }
.tap-diashow.is-gepauzeerd .tap-diashow__pauze-play { display: inline; }
/* ---- Klantquotes met logo-carrousel ([tap_klantquotes], spec 2026-10-16) ----
Wit quotevak op een zandband (sectie tap-band--sand) met de knop rechts (gsm: eronder). Daaronder een band met twee identieke logo-rijen in een
spoor dat -50% schuift: naadloze lus. Stilstand: pauzeknop (is-gepauzeerd), ±4 s na een tik (is-even-stil),
toetsenbordfocus in de band, en muis erover. De muis-pauze staat bewust binnen @media (hover: hover): op gsm
blijft :hover na een tik hangen en zou de carrousel anders blijvend stilstaan. */
.tap-quotes { position: relative; }
.tap-quotes__vak { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; align-items: center; background: #fff; /* wit vak op de zandband */ border-radius: var(--tap-card); padding: clamp(24px, 3vw, 40px); }
.tap-quotes__quote { margin: 0; min-height: 170px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.tap-quotes blockquote { margin: 0; padding: 0; border: 0; background: none; font-size: inherit; font-style: normal; color: inherit; }
.tap-quotes__tekst { margin: 0; font-size: clamp(17px, 1.3vw, 20px); line-height: 1.55; font-style: italic; color: var(--tap-ink); white-space: pre-line; }
.tap-quotes__tekst::before { content: "\201C"; color: var(--tap-gold); font-size: 2.8em; line-height: 0; vertical-align: -.4em; margin-right: 4px; font-style: normal; }
.tap-quotes__tekst:focus { outline: none; }
.tap-quotes button.tap-quotes__meer, .tap-quotes button.tap-quotes__meer:hover, .tap-quotes button.tap-quotes__meer:focus { margin: 6px 0 0; padding: 2px 0; background: none; border: 0; border-radius: 0; color: var(--tap-gold-dark); font-size: 14px; font-weight: 600; letter-spacing: 0; text-transform: none; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; box-shadow: none; }
.tap-quotes button.tap-quotes__meer:focus-visible { outline: 2px solid var(--tap-ink); outline-offset: 2px; }
.tap-quotes__meer[hidden] { display: none !important; }
.tap-quotes__naam { display: block; margin-top: 12px; font-size: 15px; font-weight: 600; color: var(--tap-gold-dark); }
.tap-quotes__vak .tap-btn { white-space: nowrap; }
.tap-quotes__band { margin-top: 20px; padding: 10px 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.tap-quotes__spoor { display: flex; width: max-content; animation: tap-quotes-rol 90s linear infinite; background: var(--tap-sand); } /* zand op het spoor zelf: het is een geïsoleerde groep, zo mengt multiply het witte logovlak weg */
.tap-quotes__rij { display: flex; flex-shrink: 0; align-items: center; gap: 40px; padding-right: 40px; } /* padding = gap: de naad tussen de twee rijen is even breed */
@keyframes tap-quotes-rol { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.tap-quotes__band.is-gepauzeerd .tap-quotes__spoor,
.tap-quotes__band.is-even-stil .tap-quotes__spoor,
.tap-quotes__band:has(:focus-visible) .tap-quotes__spoor { animation-play-state: paused; }
@media (hover: hover) {
.tap-quotes__band:hover .tap-quotes__spoor { animation-play-state: paused; }
.tap-quotes__logo:hover .tap-quotes__img { filter: none; opacity: 1; }
}
.tap-quotes button.tap-quotes__logo, .tap-quotes button.tap-quotes__logo:hover, .tap-quotes button.tap-quotes__logo:focus { flex-shrink: 0; margin: 0; padding: 6px 2px; background: none; border: 0; border-bottom: 2px solid transparent; border-radius: 0; line-height: 0; cursor: pointer; box-shadow: none; }
.tap-quotes button.tap-quotes__logo[aria-pressed="true"] { border-bottom-color: var(--tap-gold); }
.tap-quotes button.tap-quotes__logo:focus-visible { outline: 2px solid var(--tap-gold-dark); outline-offset: 2px; }
/* twee klassen: ".elementor img { height: auto; max-width: 100% }" mag de logohoogte niet overschrijven */
.tap-quotes .tap-quotes__img { display: block; height: 44px; width: auto; max-width: 180px; mix-blend-mode: multiply; /* wit logovlak smelt weg in de zandband */ object-fit: contain; filter: grayscale(1); opacity: .6; transition: filter .2s, opacity .2s; }
.tap-quotes__logo[aria-pressed="true"] .tap-quotes__img, .tap-quotes__logo:focus-visible .tap-quotes__img { filter: none; opacity: 1; }
/* Pauzeknop: stijl van de diavoorstellingen, maar in de flow rechtsboven de band (niet over de logo's). */
.tap-diashow__pauze.tap-quotes__pauze { position: static; margin: 16px 0 -8px auto; }
.tap-quotes__pauze[aria-pressed="true"] .tap-diashow__pauze-ii { display: none; }
.tap-quotes__pauze[aria-pressed="true"] .tap-diashow__pauze-play { display: inline; }
@media (max-width: 921px) {
.tap-quotes__vak { grid-template-columns: minmax(0, 1fr); gap: 20px; }
.tap-quotes__quote { min-height: 248px; }
.tap-quotes__vak .tap-btn { justify-self: start; white-space: normal; text-align: center; }
.tap-quotes__rij { gap: 28px; padding-right: 28px; }
.tap-quotes .tap-quotes__img { height: 34px; max-width: 140px; }
}
@media (prefers-reduced-motion: reduce) {
.tap-quotes__spoor { animation: none; }
.tap-quotes__rij[aria-hidden="true"] { display: none; }
.tap-quotes__band { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
.tap-quotes .tap-quotes__img { transition: none; }
}
/* Verkooppunten zoeken [tap_verkooppunten] (spec 2026-10-16, mockup A). De donkere band met eyebrow/kop/tekst staat in
Elementor; .tap-vp__kop zet die band voort met het zoekvak. Lijst links (380 px, eigen scroll), kaart rechts;
zonder Maps-sleutel geen kaart en de lijst over de volle breedte; <= 921 px gestapeld (lijst boven). */
.tap-vp { color: var(--tap-ink); }
/* De titelband erboven (.tap-titleband--zoek) loopt zonder naad door in .tap-vp__kop: zelfde effen kleur, kleine
ondermarge (na de breakpoint-regels van .tap-titleband, dus geldt op elke breedte). */
.tap-band--dark.tap-titleband.tap-titleband--zoek, .e-con.tap-band--dark.tap-titleband.tap-titleband--zoek { background: var(--tap-dark); padding-bottom: 32px; }
.tap-vp__kop { background: var(--tap-dark); color: #fff; padding: 0 var(--tap-pad) 28px; }
.tap-vp__zoek { max-width: var(--tap-wrap); margin: 0 auto; }
.tap-vp__zoek label { display: block; margin: 0 0 8px; color: var(--tap-gold-light); font-family: "Jost", sans-serif; font-weight: 600; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; }
.tap-vp__velden { display: flex; flex-wrap: wrap; gap: 8px; }
.tap-vp .tap-vp__zoek input[type="search"] { flex: 1 1 220px; min-width: 0; min-height: 48px; margin: 0; border: 1px solid var(--tap-field-border); border-radius: var(--tap-pill); padding: 11px 20px; background: #fff; color: var(--tap-ink); font: 16px/1.3 "Jost", sans-serif; box-shadow: none; }
.tap-vp .tap-vp__zoek input[type="search"]:focus-visible { outline: 3px solid var(--tap-gold); outline-offset: 2px; }
.tap-vp button.tap-vp__knop, .tap-vp button.tap-vp__knop:hover, .tap-vp button.tap-vp__knop:focus {
min-height: 48px; margin: 0; padding: 11px 24px; border: 2px solid transparent; border-radius: var(--tap-pill); background: var(--tap-gold); color: var(--tap-ink);
font-family: "Jost", sans-serif; font-weight: 600; font-size: 13px; line-height: 1.2; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; box-shadow: none;
}
.tap-vp button.tap-vp__knop:hover, .tap-vp button.tap-vp__knop:focus { background: var(--tap-gold-hover); }
.tap-vp button.tap-vp__knop--lijn, .tap-vp button.tap-vp__knop--lijn:focus { background: transparent; color: #fff; border-color: #fff; }
.tap-vp button.tap-vp__knop--lijn:hover { background: #fff; color: var(--tap-ink); }
.tap-vp button:focus-visible, .tap-vp a:focus-visible, .tap-vp__item:focus-visible, .tap-vp summary:focus-visible { outline: 2px solid var(--tap-ink); outline-offset: 2px; box-shadow: 0 0 0 4px #fff; }
.tap-vp [hidden] { display: none !important; }
.tap-vp__body { max-width: var(--tap-wrap); margin: 0 auto; padding: 24px var(--tap-pad) 8px; box-sizing: content-box; }
.tap-vp__status { margin: 0 0 12px; font-weight: 600; font-size: 17px; }
.tap-vp__status:empty { display: none; }
.tap-vp__keuze { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 16px; }
.tap-vp__keuzevraag { margin: 0 8px 0 0; }
.tap-vp button.tap-vp__keuzeknop, .tap-vp button.tap-vp__keuzeknop:focus { min-height: 44px; margin: 0; padding: 8px 18px; border: 1px solid var(--tap-dark); border-radius: var(--tap-pill); background: #fff; color: var(--tap-ink); font: 600 15px/1.2 "Jost", sans-serif; letter-spacing: 0; text-transform: none; cursor: pointer; box-shadow: none; }
.tap-vp button.tap-vp__keuzeknop:hover { background: var(--tap-dark); color: #fff; }
.tap-vp__resultaat { display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 18px; align-items: start; }
.tap-vp__resultaat--zonder-kaart { grid-template-columns: minmax(0, 1fr); }
.tap-vp__lijstvak { min-width: 0; }
.tap-vp__lijst { position: relative; list-style: none; margin: 0; padding: 0 4px 0 0; display: grid; gap: 10px; max-height: 520px; overflow: auto; overscroll-behavior: contain; }
.tap-vp__resultaat--zonder-kaart .tap-vp__lijst { max-height: none; overflow: visible; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.tap-vp__item { margin: 0; border: 1px solid var(--tap-line); border-radius: 10px; padding: 12px 14px; background: #fff; }
.tap-vp:has(.tap-vp__naamknop) .tap-vp__item { cursor: pointer; }
.tap-vp button.tap-vp__naamknop, .tap-vp button.tap-vp__naamknop:hover, .tap-vp button.tap-vp__naamknop:focus { margin: 0; padding: 0; border: 0; border-radius: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: none; text-align: left; cursor: pointer; box-shadow: none; }
.tap-vp button.tap-vp__naamknop:hover { text-decoration: underline; text-underline-offset: 3px; }
.tap-vp__item.is-actief { border-color: var(--tap-gold); box-shadow: 0 0 0 2px var(--tap-gold-light); }
.tap-vp__naam { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin: 0; font-size: 17px; line-height: 1.3; }
.tap-vp__km { flex: none; font-weight: 500; font-size: 14px; color: var(--tap-gold-dark); white-space: nowrap; }
.tap-vp__pro { display: inline-block; margin: 4px 0 2px; padding: 3px 10px; border-radius: var(--tap-pill); background: var(--tap-dark); color: #fff; font: 600 11px/1.4 "Jost", sans-serif; letter-spacing: .06em; }
.tap-vp__adres { margin: 4px 0 6px; font-size: 15px; color: #4a4f54; }
.tap-vp__links { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 14px; }
.tap-vp__links a, .tap-vp__volledig a { color: var(--tap-gold-dark); text-decoration: underline; text-underline-offset: 3px; }
.tap-vp button.tap-vp__meer, .tap-vp button.tap-vp__meer:focus { display: block; margin: 12px 0 0; min-height: 44px; padding: 10px 22px; border: 2px solid var(--tap-dark); border-radius: var(--tap-pill); background: #fff; color: var(--tap-ink); font: 600 13px/1.2 "Jost", sans-serif; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; box-shadow: none; }
.tap-vp button.tap-vp__meer:hover { background: var(--tap-dark); color: #fff; }
.tap-vp__kaart { position: relative; min-height: 520px; border-radius: 10px; overflow: hidden; background: var(--tap-sand); }
.tap-vp__canvas { position: absolute; inset: 0; }
.tap-vp__toest { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 12px; padding: 24px; text-align: center; font-size: 15px; }
.tap-vp__toest p { margin: 0; max-width: 360px; }
.tap-vp__legende { position: absolute; left: 10px; bottom: 24px; display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 8px 10px; border-radius: 8px; background: #fff; font-size: 13px; box-shadow: 0 1px 4px rgba(0, 0, 0, .15); }
.tap-vp__bol { display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 50%; background: var(--tap-gold-dark); vertical-align: -1px; }
.tap-vp__bol--pro { background: var(--tap-dark); }
.tap-vp__info { max-width: 260px; font-family: "Jost", sans-serif; color: var(--tap-ink); }
.tap-vp__info strong { display: block; font-size: 15px; }
.tap-vp__info p { margin: 4px 0; font-size: 14px; }
.tap-vp__bron { margin: 12px 0 0; font-size: 13px; color: #5c6166; }
.tap-vp__alle { margin: 20px 0 0; border-top: 1px solid var(--tap-line); padding-top: 12px; }
.tap-vp__alle summary { cursor: pointer; font-weight: 600; font-size: 16px; }
.tap-vp__land { margin: 18px 0 8px; font-size: 18px; }
.tap-vp__volledig { margin: 0; padding-left: 18px; columns: 2 320px; column-gap: 32px; font-size: 14px; }
.tap-vp__volledig li { margin: 0 0 8px; break-inside: avoid; }
@media (max-width: 921px) {
.tap-vp__resultaat { grid-template-columns: minmax(0, 1fr); }
.tap-vp__lijst { max-height: none; overflow: visible; }
.tap-vp__kaart { min-height: 340px; }
}