.brand-home{display:inline-flex;align-items:center}
.brand-pair{display:inline-grid;align-items:center}
.brand-pair img{grid-area:1/1;width:auto;height:40px;max-width:none}
.brand-pair .brand-dark{display:none}
:is(html.dark,body.dark,[data-theme="dark"]) .brand-pair .brand-light{display:none}
:is(html.dark,body.dark,[data-theme="dark"]) .brand-pair .brand-dark{display:block}
/* LOKALE AFWIJKINGEN van de meegeleverde set (huisstijl v4, 2026-11-02): de twee verouderde commentaren uit de set
   ("PaperMod uses body.dark", "no automatic media query") zijn verwijderd; PaperMod v8.0-63 gebruikt html[data-theme].
   Fallback zonder JavaScript, op verzoek:
   PaperMod zet in de HTML data-theme="auto"; pas het script maakt daar light of dark van. Zonder script
   (of zonder attribuut) volgt het woordmerk dus het systeemthema. */
@media (prefers-color-scheme: dark){
  html:not([data-theme="light"]):not([data-theme="dark"]) .brand-pair .brand-light{display:none}
  html:not([data-theme="light"]):not([data-theme="dark"]) .brand-pair .brand-dark{display:block}
}
/* LOKALE AFWIJKING (luxzen.eu, 2026-11-02): PaperMod v8.0-63 overschrijft de logo-opmaak met .nav a{display:block}
   en .logo a img{transform:translate(0,-10%);margin-inline-end:8px;border-radius:6px} (bedoeld voor een icoontje).
   Zonder deze twee regels staat het woordmerk niet verticaal gecentreerd en valt het 4px boven de pagina.
   min-height: zonder JavaScript verbergt PaperMod de themaknop; op mobiel (logo op een eigen rij) zakt de rij dan
   naar 40px en staat het woordmerk tegen de bovenrand. Zo blijft de rij even hoog als de header. */
.logo a.brand-home{display:inline-flex;min-height:var(--header-height)}
.logo a.brand-home img{transform:none;margin-inline-end:0;border-radius:0}