/*
 * RealLeaf — Marken-Icons (WP3, Icon-Verdrahtung 32er-Set)
 *
 * Mechanik: <span class="rl-ico rl-ico--name"> aus rl_icon()
 * (inc/rl-icons.php) wird ueber CSS-Mask mit assets/icons/icon-<name>.svg
 * gefuellt. background-color: currentColor -> das Icon nimmt IMMER die
 * Textfarbe des Kontexts an (Light/Dark, --accent vs. --accent-bright),
 * ohne dass es Farbvarianten der Datei braucht.
 *
 * Warum Mask statt Inline-SVG: die Marken-Icons sind detaillierte
 * Strichzeichnungen (~1-3,4 KB Pfaddaten). Das Mega-Menue rendert 7 davon
 * auf JEDER Seite - inline waeren das ~14 KB Markup pro Request, per Mask
 * sind es 7 einmalig gecachte Dateien und ~40 Byte Markup je Slot.
 *
 * Groesse: --rl-ico-size (Default 40px). Untergrenze ist Absicht - die
 * Icons sind ringgefasst mit ~2 % Strichstaerke und werden darunter
 * unlesbar (Kleinst-Slots nutzen rl_icon_leaf_glyph(), s. inc/rl-icons.php).
 *
 * Fallback: Browser ohne mask-image (< ~1 %) wuerden ein currentColor-
 * Rechteck zeigen. Der @supports-Block blendet die Icons dort komplett aus -
 * jeder Slot hat eine sichtbare Ueberschrift daneben, es geht keine
 * Information verloren.
 */

.rl-ico {
	display: inline-block;
	flex: none;
	width: var(--rl-ico-size, 40px);
	height: var(--rl-ico-size, 40px);
	background-color: currentColor;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.rl-ico--aktivkohle-filter   { -webkit-mask-image: url(../icons/icon-aktivkohle-filter.svg);   mask-image: url(../icons/icon-aktivkohle-filter.svg); }
.rl-ico--blatt-sprosse       { -webkit-mask-image: url(../icons/icon-blatt-sprosse.svg);       mask-image: url(../icons/icon-blatt-sprosse.svg); }
.rl-ico--cone-schnell        { -webkit-mask-image: url(../icons/icon-cone-schnell.svg);        mask-image: url(../icons/icon-cone-schnell.svg); }
.rl-ico--cones-filter-set    { -webkit-mask-image: url(../icons/icon-cones-filter-set.svg);    mask-image: url(../icons/icon-cones-filter-set.svg); }
.rl-ico--gluehbirne          { -webkit-mask-image: url(../icons/icon-gluehbirne.svg);          mask-image: url(../icons/icon-gluehbirne.svg); }
.rl-ico--kraeuter-schnitt    { -webkit-mask-image: url(../icons/icon-kraeuter-schnitt.svg);    mask-image: url(../icons/icon-kraeuter-schnitt.svg); }
.rl-ico--kuehler-zug         { -webkit-mask-image: url(../icons/icon-kuehler-zug.svg);         mask-image: url(../icons/icon-kuehler-zug.svg); }
.rl-ico--papers-booklet      { -webkit-mask-image: url(../icons/icon-papers-booklet.svg);      mask-image: url(../icons/icon-papers-booklet.svg); }
.rl-ico--papier-stapel-premium { -webkit-mask-image: url(../icons/icon-papier-stapel-premium.svg); mask-image: url(../icons/icon-papier-stapel-premium.svg); }
.rl-ico--preisschild         { -webkit-mask-image: url(../icons/icon-preisschild.svg);         mask-image: url(../icons/icon-preisschild.svg); }
.rl-ico--schutzschild-blatt  { -webkit-mask-image: url(../icons/icon-schutzschild-blatt.svg);  mask-image: url(../icons/icon-schutzschild-blatt.svg); }
.rl-ico--thekendisplay       { -webkit-mask-image: url(../icons/icon-thekendisplay.svg);       mask-image: url(../icons/icon-thekendisplay.svg); }
.rl-ico--versandkartons      { -webkit-mask-image: url(../icons/icon-versandkartons.svg);      mask-image: url(../icons/icon-versandkartons.svg); }

/* Basisgroesse fuer das Kleinst-Glyph (rl_icon_leaf_glyph). Die beiden
   heutigen Slots haben eigene Kontextregeln (.rl-chip svg / .rl-ticker__track i svg,
   beide hoeher spezifisch); das hier schuetzt kuenftige Aufrufer vor dem
   SVG-Default 300x150. */
.rl-leaf-glyph { width: 1em; height: 1em; }

@supports not ((-webkit-mask-image: url(#i)) or (mask-image: url(#i))) {
	.rl-ico { display: none; }
}