/* Passung im Zubehör-Block der Produktseiten (templates/produkt.html, zubehoer_passung() in tools/build.py). Eigene kleine Datei,
   weil site.css eingebettet wird und an der Größengrenze liegt (seo_audit.py „CSS groß“). produkt.html lädt sie direkt vor dem
   Zubehör-Block im <body> (blockiert nur das Rendern ab dort, nicht den ersten Bildschirm). Stufe als Wort und Farbe, nie nur Farbe. */
.zubehoer-passung { margin: 0 0 .5rem !important; font-size: .9rem; line-height: 1.45; display: grid; gap: .15rem; }
.zubehoer-ampel { display: inline-flex; align-items: center; gap: .35rem; font-weight: 700; color: #7A5B00; }
.zubehoer-punkt { width: .7em; height: .7em; border-radius: 50%; background: #B98A00; flex: none; }
.zubehoer-passt .zubehoer-ampel { color: #2F6B3A; }
.zubehoer-passt .zubehoer-punkt { background: #2F6B3A; }
.zubehoer-mass { color: var(--daemmerung); overflow-wrap: break-word; }
.zubehoer > .zubehoer-hinweis { color: var(--granit); font-size: .95rem; }
.zubehoer .isomatte-suche > p:first-child { color: var(--granit); font-size: .95rem; }   /* Notlösung, wenn keine Auflage passt */
.zubehoer > .zubehoer-link { margin-top: 1rem !important; }
.zubehoer-link a { font: 700 1.1rem var(--display); text-underline-offset: 4px; margin-right: .3rem; }
/* Teil, das schon als Box im Text steht: Sprunglink statt zweitem Kaufknopf */
.zubehoer-oben { margin: 0 !important; font-size: .92rem; font-weight: 700; }