/* Schildersbedrijf Glasbergen, voorbeeldsite van joepa (dit schildersbedrijf
   bestaat niet). Eigen stijl, los van de joepa-kleuren en van de andere
   voorbeeldsites.
   Letter: Archivo (Omnibus-Type), zelf gehost onder de SIL Open Font License
   (zie fonts/). Eén variabel bestand met twee assen: breedte 100 tot 125% en
   gewicht 400 tot 800. Koppen breed en stevig, zoals de belettering op een
   bedrijfsbus; lopende tekst op normale breedte.
   Kleuren uit het vak: kalkwit en grondverfgrijs als muren, antraciet (de
   meest gekozen kozijnkleur) voor tekst en voet, oker als afplaklijn en knop.
   Contrast (WCAG AA): antraciet #2b3136 op kalkwit #f4f2ed 11,8:1, op grijs
   #e5e6e1 10,5:1; antraciet-zacht #545b60 op kalkwit 6,2:1, op grijs 5,5:1;
   antraciet op oker #e0a526 6,0:1, op oker-diep #c98f16 4,7:1; kalkwit op
   antraciet 11,8:1; oker op antraciet 6,0:1. Oker op kalkwit haalt maar
   2,0:1 en staat daarom nooit als tekst op een lichte grond. */
@font-face { font-family: "Archivo"; src: url("fonts/archivo.woff2") format("woff2"); font-weight: 400 800; font-stretch: 100% 125%; font-style: normal; font-display: swap; }

:root {
  --kalkwit: #f4f2ed;
  --grijs: #e5e6e1;
  --antraciet: #2b3136;
  --antraciet-zacht: #545b60;
  --oker: #e0a526;
  --oker-diep: #c98f16;
  --lijn: rgba(43, 49, 54, 0.16);
  --lijn-licht: rgba(244, 242, 237, 0.22);
  --wit: #ffffff;
  --letter: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --maat: 1160px;
  --rand: 1.25rem;
  --rond: 2px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--letter); font-size: 1.0625rem; line-height: 1.6; color: var(--antraciet); background: var(--kalkwit); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { font-weight: 760; font-stretch: 122%; line-height: 1.06; letter-spacing: -0.012em; margin: 0 0 0.55em; text-wrap: balance; }
h1 { font-size: clamp(1.8rem, 1.3rem + 2.2vw, 2.9rem); }
h2 { font-size: clamp(1.45rem, 1.2rem + 1vw, 2rem); }
h3 { font-size: 1.15rem; font-stretch: 112%; font-weight: 700; }
p { margin: 0 0 1em; }
a { color: var(--antraciet); text-decoration-color: var(--oker-diep); text-underline-offset: 0.18em; text-decoration-thickness: 2px; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--antraciet); outline-offset: 3px; }
.voorbeeldbalk :focus-visible, .site-voet :focus-visible, .blok--donker :focus-visible { outline-color: var(--oker); }
.skiplink { position: absolute; left: -999px; top: 0; z-index: 100; background: var(--antraciet); color: var(--kalkwit); padding: 0.6rem 1rem; }
.skiplink:focus { left: 1rem; top: 1rem; }
.verborgen { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* De voorbeeldbalk staat op elke pagina bovenaan. */
.voorbeeldbalk { background: var(--antraciet); color: var(--kalkwit); font-size: 0.9rem; text-align: center; padding: 0.5rem 1rem; }
.voorbeeldbalk p { margin: 0; }
.voorbeeldbalk a { color: var(--kalkwit); font-weight: 600; text-decoration-color: var(--oker); }

/* Kop met menu en de offerteknop, plakt bovenaan. De okerlijn eronder is de
   afplaklijn: het enige vaste sieraad van de site. */
.site-kop { position: sticky; top: 0; z-index: 20; background: var(--kalkwit); box-shadow: inset 0 -4px 0 var(--oker); }
.site-kop__inner { max-width: calc(var(--maat) + 2 * var(--rand)); margin: 0 auto; padding: 0.75rem var(--rand) calc(0.75rem + 4px); display: flex; align-items: center; gap: 1.75rem; }
.site-kop__logo { display: flex; flex-direction: column; text-decoration: none; color: var(--antraciet); line-height: 1; }
.site-kop__naam { font-size: 1.55rem; font-weight: 800; font-stretch: 125%; letter-spacing: -0.02em; }
.site-kop__sub { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.26em; text-transform: uppercase; color: var(--antraciet-zacht); margin-top: 0.3rem; }
.site-nav { display: flex; gap: 1.5rem; margin-left: auto; }
.site-nav a { color: var(--antraciet); text-decoration: none; font-weight: 500; padding: 0.3rem 0; border-bottom: 2px solid transparent; white-space: nowrap; }
.site-nav a:hover, .site-nav a[aria-current="page"] { border-bottom-color: var(--antraciet); }
.site-kop__menu { display: none; }
section[id], [id].project { scroll-margin-top: 6rem; }

/* Knoppen: vol is oker met antraciet (6,0:1), lijn is antraciet op de grond. */
.knop { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; font: inherit; font-weight: 650; padding: 0.8rem 1.35rem; border-radius: var(--rond); border: 2px solid transparent; cursor: pointer; text-decoration: none; line-height: 1.2; transition: background-color 0.15s ease, transform 0.1s ease; }
.knop--vol { background: var(--oker); color: var(--antraciet); border-color: var(--oker); }
.knop--vol:hover { background: var(--oker-diep); border-color: var(--oker-diep); }
.knop--lijn { background: transparent; color: var(--antraciet); border-color: var(--antraciet); }
.knop--lijn:hover { background: var(--grijs); }
.knop--licht { background: transparent; color: var(--kalkwit); border-color: var(--kalkwit); }
.knop--licht:hover { background: rgba(244, 242, 237, 0.12); }
.knop:active { transform: translateY(1px); }
.tekstknop { font: inherit; background: none; border: 0; padding: 0; color: inherit; text-decoration: underline; text-decoration-color: var(--oker); text-decoration-thickness: 2px; text-underline-offset: 0.18em; cursor: pointer; }
.tekstlink { font-weight: 650; white-space: nowrap; }

/* Blokken */
.blok { padding: clamp(2.75rem, 6vw, 5rem) var(--rand); }
.blok__inner { max-width: var(--maat); margin: 0 auto; }
.blok--grijs { background: var(--grijs); }
.blok--donker { background: var(--antraciet); color: var(--kalkwit); }
.blok p { max-width: 62ch; }
.blok__kop { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem 1.5rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.blok__kop h2 { margin: 0; }

/* Twee kolommen: titel en tekst links, de rest rechts. */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: clamp(1.75rem, 5vw, 5rem); align-items: start; }
.split--midden { align-items: center; }
.split--gelijk { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.split--breed { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.6fr); }
.split img { border-radius: var(--rond); aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }

/* Kop van de pagina: tekst links, foto rechts. Beeld altijd in de kop. */
.hero { padding: clamp(1.75rem, 4vw, 3.25rem) var(--rand) clamp(2.5rem, 5vw, 4rem); }
.hero__inner { max-width: var(--maat); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(2rem, 4.5vw, 4.5rem); align-items: center; }
.hero__tekst p { max-width: 46ch; font-size: 1.15rem; }
.hero__knoppen { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.6rem; }
.hero__beeld img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--rond); }

/* Op de home loopt onder de foto een antraciet plint door: de kop en het
   planningblok eronder lijken één strak geschilderde muur. */
.hero--home { background: linear-gradient(to bottom, var(--kalkwit) 0, var(--kalkwit) calc(100% - 4.5rem), var(--antraciet) calc(100% - 4.5rem)); padding-bottom: 0; }
.hero--home .hero__inner { align-items: end; }
.hero--home .hero__tekst { padding-bottom: 6.5rem; }
.hero--laag .hero__beeld img { aspect-ratio: 16 / 9; }

/* Planning: wanneer kunnen we komen. */
.planning { background: var(--antraciet); color: var(--kalkwit); padding: clamp(2.25rem, 5vw, 3.5rem) var(--rand) clamp(2.5rem, 5vw, 4rem); }
.planning__inner { max-width: var(--maat); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: 1.25rem clamp(1.75rem, 5vw, 5rem); align-items: start; }
.planning h2 { margin: 0; }
.planning__lijst { margin: 0; }
.planning__rij { display: grid; grid-template-columns: minmax(12.5rem, 0.8fr) minmax(0, 1.5fr); gap: 0.25rem 1.5rem; padding: 0.95rem 0; border-top: 1px solid var(--lijn-licht); }
.planning__rij:last-child { border-bottom: 1px solid var(--lijn-licht); }
.planning__rij dt { font-weight: 700; font-stretch: 112%; white-space: nowrap; }
.planning__rij dd { margin: 0; display: flex; align-items: baseline; gap: 0.7rem; }
.planning__noot { grid-column: 2; margin: 0.4rem 0 0; font-size: 0.95rem; color: var(--grijs); max-width: 60ch; }
.label { flex: none; display: inline-block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1; padding: 0.35rem 0.5rem; border-radius: var(--rond); position: relative; top: -0.1em; }
.label--plek { background: var(--oker); color: var(--antraciet); }
.label--vol { box-shadow: inset 0 0 0 1.5px var(--oker); color: var(--oker); }

/* Wat we doen: drie rijen met haarlijnen, geen kaartjes. */
.diensten { list-style: none; margin: 0; padding: 0; }
.diensten li { padding: 1.25rem 0; border-top: 1px solid var(--lijn); }
.diensten li:last-child { border-bottom: 1px solid var(--lijn); }
.diensten h3 { margin: 0 0 0.35rem; font-size: 1.3rem; }
.diensten h3 a { text-decoration: none; display: inline-flex; align-items: baseline; gap: 0.5rem; }
.diensten h3 a::after { content: "\2192"; content: "\2192" / ""; font-stretch: 100%; transition: transform 0.15s ease; }
.diensten h3 a:hover::after { transform: translateX(3px); }
.diensten p { margin: 0; color: var(--antraciet-zacht); }
.split__beeld { margin-top: 1.75rem; }

/* Voor en na, altijd naast elkaar: zo zie je het verschil in één oogopslag. */
.voorna { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(0.5rem, 1.5vw, 1rem); margin: 0 0 1.25rem; }
.voorna figure { margin: 0; position: relative; }
.voorna img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--rond); }
.voorna figcaption { position: absolute; left: 0.6rem; top: 0.6rem; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1; padding: 0.4rem 0.55rem; border-radius: var(--rond); background: var(--kalkwit); color: var(--antraciet); }
.voorna figure + figure figcaption { background: var(--oker); }

/* Stappen */
.stappen { list-style: none; counter-reset: stap; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.5rem; }
.stappen li { counter-increment: stap; padding-top: 0.9rem; border-top: 4px solid var(--antraciet); }
.stappen li::before { content: counter(stap); display: block; font-size: 1.9rem; font-weight: 800; font-stretch: 125%; line-height: 1; margin-bottom: 0.6rem; }
.stappen strong { font-weight: 700; }
.stappen--drie { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Werkgebied: de plaatsen als tekst, in kolommen. */
.plaatsen { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 1.5rem; }
.plaatsen li { padding: 0.65rem 0; border-top: 1px solid var(--lijn); font-weight: 600; }

/* Binnen en buiten: overzicht en feiten */
.overzicht { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.5rem, 5vw, 5rem); }
.overzicht h3 { font-size: 1.5rem; margin-bottom: 0.4rem; }
.overzicht h3 a { text-decoration: none; }
.overzicht h3 a::after { content: " \2193"; content: " \2193" / ""; font-stretch: 100%; }
.overzicht p { color: var(--antraciet-zacht); }
.vinklijst { list-style: none; margin: 0; padding: 0; }
.vinklijst li { padding: 0.6rem 0 0.6rem 1.9rem; border-top: 1px solid var(--lijn); position: relative; }
.vinklijst li:last-child { border-bottom: 1px solid var(--lijn); }
.vinklijst li::before { content: ""; position: absolute; left: 0; top: 1.05rem; width: 1rem; height: 0.3rem; background: var(--oker); }
.feiten { margin: 0; }
.feiten div { display: grid; grid-template-columns: minmax(8rem, 0.6fr) minmax(0, 1.4fr); gap: 0.25rem 1.5rem; padding: 1rem 0; border-top: 1px solid var(--lijn); }
.feiten div:last-child { border-bottom: 1px solid var(--lijn); }
.feiten dt { font-weight: 700; font-stretch: 112%; }
.feiten dd { margin: 0; }

/* Afsluitend blok met knoppen */
.actie { display: flex; align-items: center; justify-content: space-between; gap: 1rem 2rem; flex-wrap: wrap; }
.actie h2 { margin-bottom: 0.25rem; }
.actie p { margin: 0; color: var(--grijs); }
.actie__knoppen { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* Kleurstalen als verfkaartjes */
.stalen-groep + .stalen-groep { margin-top: 2.25rem; }
.stalen-groep h3 { margin-bottom: 1rem; }
/* Zes verfkaartjes naast elkaar vanaf 1200. Smaller werden het reuzenvlakken
   (drie kolommen) of rijen met een losse staal (vier of vijf kolommen); daar
   is een staal een regel, zie de media query onder 1200. */
.stalen { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1rem; }
.staal { background: var(--wit); padding: 0.5rem 0.5rem 0.75rem; border-radius: var(--rond); box-shadow: 0 1px 2px rgba(43, 49, 54, 0.12); display: flex; flex-direction: column; }
.staal__vlak { display: block; aspect-ratio: 1 / 1; background: var(--kleur); margin-bottom: 0.6rem; box-shadow: inset 0 0 0 1px rgba(43, 49, 54, 0.1); }
.staal__tekst { display: flex; flex-direction: column; min-width: 0; }
.staal__naam { font-weight: 700; font-stretch: 110%; line-height: 1.2; }
.staal__waar { font-size: 0.85rem; color: var(--antraciet-zacht); line-height: 1.35; margin-top: 0.15rem; }
.stalen__noot { margin: 1.75rem 0 0; color: var(--antraciet-zacht); font-size: 0.95rem; }
.prijsregel { margin-top: 1.25rem; padding-left: 1rem; border-left: 4px solid var(--oker); }

/* Vragen */
.vragen details { border-top: 1px solid var(--lijn); }
.vragen details:last-child { border-bottom: 1px solid var(--lijn); }
.vragen summary { cursor: pointer; font-weight: 700; padding: 1rem 2rem 1rem 0; position: relative; list-style: none; }
.vragen summary::-webkit-details-marker { display: none; }
.vragen summary::after { content: "+"; position: absolute; right: 0.25rem; top: 0.85rem; font-size: 1.3rem; line-height: 1; }
.vragen details[open] summary::after { content: "\2212"; }
.vragen details p { margin: 0 0 1.1rem; }

/* Projecten */
.projecten { display: grid; gap: clamp(3rem, 7vw, 5.5rem); }
.project { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 1.25rem clamp(1.75rem, 4vw, 3.5rem); align-items: start; }
.project__kop { grid-column: 1 / -1; }
.project__kop h3 { font-size: clamp(1.35rem, 1.1rem + 0.9vw, 1.8rem); font-weight: 760; font-stretch: 122%; margin: 0.5rem 0 0; }
.project .voorna, .project__beeld { grid-column: 1; margin: 0; }
.project__beeld img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--rond); }
.project__tekst { grid-column: 2; }
.project__soort { margin: 0; }
.project__feiten { margin: 1.25rem 0 0; }
.project__feiten div { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: 1rem; padding: 0.55rem 0; border-top: 1px solid var(--lijn); }
.project__feiten div:last-child { border-bottom: 1px solid var(--lijn); }
.project__feiten dt { font-weight: 700; }
.project__feiten dd { margin: 0; }
.label--soort { background: var(--antraciet); color: var(--kalkwit); }

/* Voet */
/* Bovenaan de voet weer de afplaklijn, zodat een donker blok erboven er niet in overloopt. */
.site-voet { background: var(--antraciet); color: var(--kalkwit); padding: calc(clamp(2.25rem, 5vw, 3.5rem) + 4px) var(--rand) clamp(2.25rem, 5vw, 3.5rem); box-shadow: inset 0 4px 0 var(--oker); }
.site-voet__inner { max-width: var(--maat); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.5rem 2rem; align-items: end; }
:where(.site-voet) p { margin: 0; }
.site-voet__naam { font-size: 1.35rem; font-weight: 800; font-stretch: 125%; margin-bottom: 0.25rem; }
.site-voet a { color: var(--kalkwit); text-decoration-color: var(--oker); }
.site-voet__joepa { grid-column: 1 / -1; margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--lijn-licht); font-size: 0.9rem; color: var(--grijs); }

/* De melding achter offerte, bellen, mailen en kleuradvies. */
.melding { border: 0; border-radius: var(--rond); padding: 1.75rem; max-width: 27rem; width: calc(100% - 2rem); color: var(--antraciet); background: var(--kalkwit); box-shadow: 0 20px 60px rgba(43, 49, 54, 0.3), inset 0 4px 0 var(--oker); }
.melding::backdrop { background: rgba(43, 49, 54, 0.5); }
.melding__kop { font-size: 1.25rem; font-weight: 760; font-stretch: 118%; margin-bottom: 0.5rem; }
.melding__sluit { margin-top: 0.5rem; }

/* Onder 1200: een staal is een regel (kleurvlak links, naam rechts), drie
   naast elkaar, zodat elke rij vol is en het blok laag blijft. */
@media (max-width: 1199px) {
  .stalen { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; }
  .staal { flex-direction: row; align-items: center; gap: 0.75rem; padding: 0.5rem; }
  .staal__vlak { flex: none; width: 3rem; margin: 0; }
}

/* Onder 960: de kop naast de foto past niet meer (alles onder elkaar), het
   menu met de offerteknop ook niet (menu achter een knop, onderin altijd
   Offerte en Bel). */
.onderbalk { display: none; }
@media (max-width: 959px) {
  .hero__inner { grid-template-columns: minmax(0, 1fr); }
  .hero__beeld { grid-row: 1; margin: 0 calc(-1 * var(--rand)); }
  /* Hooguit iets minder dan de helft van het scherm, zodat kop en knop op
     een staande tablet boven de vouw blijven. Op lage schermen (een liggende
     tablet, een kleine telefoon) valt de knop soms achter de onderbalk; daar
     staat dan onderin in elk geval de knop Offerte. */
  .hero__beeld img { border-radius: 0; aspect-ratio: 16 / 9; max-height: 45svh; }
  .hero { padding-top: 0; }
  .hero--home { background: var(--kalkwit); padding-bottom: clamp(2rem, 5vw, 3rem); }
  .hero--home .hero__tekst { padding-bottom: 0; }
  .stappen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .project { grid-template-columns: minmax(0, 1fr); }
  .project__tekst { grid-column: 1; }
  /* De planning onder zijn kop in plaats van ernaast: anders krijgen de regels
     tussen 760 en 960 te weinig ruimte. */
  .planning__inner { grid-template-columns: minmax(0, 1fr); }
  .planning__noot { grid-column: 1; }
  /* Ruimte voor de onderbalk, die op een iPhone met thuisbalk hoger wordt. */
  body { padding-bottom: calc(4.6rem + env(safe-area-inset-bottom)); }
  .onderbalk { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; padding: 0.6rem 0.8rem calc(0.6rem + env(safe-area-inset-bottom)); background: var(--kalkwit); box-shadow: inset 0 4px 0 var(--oker); }
  .site-kop__offerte { display: none; }
  .site-kop__menu { display: inline-block; margin-left: auto; font: inherit; font-weight: 650; color: var(--antraciet); background: none; border: 2px solid var(--antraciet); border-radius: var(--rond); padding: 0.45rem 0.9rem; cursor: pointer; }
  .site-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; gap: 0; background: var(--kalkwit); padding: 0.25rem var(--rand) 1rem; box-shadow: inset 0 -4px 0 var(--oker); }
  .site-kop--open .site-nav { display: flex; }
  .site-nav a { padding: 0.75rem 0; border-bottom: 1px solid var(--lijn); }
  .site-nav a[aria-current="page"] { border-bottom-color: var(--lijn); font-weight: 700; }
}

@media (max-width: 759px) {
  .split, .split--gelijk, .split--breed, .overzicht { grid-template-columns: minmax(0, 1fr); }
  .planning__rij { grid-template-columns: minmax(0, 1fr); }
  .split--omgekeerd > picture { grid-row: 1; }
  .plaatsen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Een oneven laatste plaats (de langste naam staat achteraan) krijgt de hele breedte. */
  .plaatsen li:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .stappen { grid-template-columns: minmax(0, 1fr); gap: 1.1rem; }
  .stappen li { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); padding-top: 0.8rem; }
  .stappen li::before { margin: 0; font-size: 1.6rem; }
  .stalen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feiten div { grid-template-columns: minmax(0, 1fr); }
  .site-voet__inner { grid-template-columns: minmax(0, 1fr); }
}

/* Smalle telefoons: koppen iets minder breed, zodat lange woorden als
   Jarendertigwoning binnen de kolom blijven; kleurstalen onder elkaar. */
@media (max-width: 519px) {
  h1, h2 { font-stretch: 112%; }
  .stalen { grid-template-columns: minmax(0, 1fr); }
}

/* Heel smalle telefoons: de voorbeeldbalk blijft op twee regels. */
@media (max-width: 359px) {
  .voorbeeldbalk { font-size: 0.8rem; padding-inline: 0.75rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.001ms !important; animation-duration: 0.001ms !important; }
  .diensten h3 a:hover::after { transform: none; }
}