Vorlage:Bez/styles.css

/* Farben pro Bezirk setzen (Accent + gut lesbare Textfarbe) */ .bez{ --accent:#800000; --text:#800000; } .bez[data-bezirk="1"]{ --accent:#800000; --text:#800000; } /* rot */ .bez[data-bezirk="2"]{ --accent:#6f42c1; --text:#5a33a0; } /* violett */ .bez[data-bezirk="3"]{ --accent:#96be25; --text:#5e8a0e; } /* grün */ .bez[data-bezirk="4"]{ --accent:#e56fa3; --text:#b24e78; } /* rosa */ .bez[data-bezirk="5"]{ --accent:#111111; --text:#111111; } /* schwarz */ .bez[data-bezirk="6"]{ --accent:#ffd32a; --text:#9c7a00; } /* gelb */ .bez[data-bezirk="7"]{ --accent:#2f6fab; --text:#1b4a7a; } /* blau */ .bez[data-bezirk="8"]{ --accent:#7a7a7a; --text:#4a4a4a; } /* grau */ .bez[data-bezirk="9"]{ --accent:#7b4a12; --text:#5a350d; } /* braun */

/* Nutz-Varianten */ .bez.text{ color:var(--text); } .bez.border{ border-left:4px solid var(--accent); padding-left:.4em; } .bez.badge{

 display:inline-block; padding:.1em .45em; border-radius:.6em;
 background:var(--accent); color:#fff; font-size:.9em; line-height:1; vertical-align:middle;

} .bez.pill{

 display:inline-block; padding:.08em .5em; border:1px solid var(--accent);
 background:#f8f8f8; color:var(--text); border-radius:.6em;

}