/* ERZEUGT von scripts/gen-marken-icons.mjs -- nicht von Hand aendern.
 *
 * Ersetzt die Darstellung von fa-discord und fa-twitch, damit
 * fa-brands-400.woff2 (108 kB) nicht mehr geladen werden muss. Das ganze
 * Projekt benutzt aus dieser Schrift genau diese beiden Icons.
 *
 * Die Markierung in den Views bleibt unveraendert: <i class="fab fa-discord">.
 *
 * Icons: Font Awesome Free, CC BY 4.0 -- https://fontawesome.com/license/free
 * Neu erzeugen: npm run gen:marken-icons
 */
.fa-discord,
.fa-twitch {
    /* Kein Glyph mehr -- ohne das stuende das Zeichen zusaetzlich zur Maske da. */
    font-family: inherit;
}

.fa-discord::before,
.fa-twitch::before {
    content: none;
}

.fa-discord,
.fa-twitch {
    display: inline-block;
    width: 1em;
    height: 1em;
    /* Wie FontAwesome selbst ausrichtet -- sonst sitzt das Icon zu hoch. */
    vertical-align: -0.125em;
    /* Faerbt sich wie Text, genau wie der Glyph vorher. */
    background-color: currentColor;
    -webkit-mask: var(--marken-icon) center / contain no-repeat;
    mask: var(--marken-icon) center / contain no-repeat;
}

.fa-discord {
    --marken-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3E%3Cpath d='M524.531,69.836a1.5,1.5,0,0,0-.764-.7A485.065,485.065,0,0,0,404.081,32.03a1.816,1.816,0,0,0-1.923.91,337.461,337.461,0,0,0-14.9,30.6,447.848,447.848,0,0,0-134.426,0,309.541,309.541,0,0,0-15.135-30.6,1.89,1.89,0,0,0-1.924-.91A483.689,483.689,0,0,0,116.085,69.137a1.712,1.712,0,0,0-.788.676C39.068,183.651,18.186,294.69,28.43,404.354a2.016,2.016,0,0,0,.765,1.375A487.666,487.666,0,0,0,176.02,479.918a1.9,1.9,0,0,0,2.063-.676A348.2,348.2,0,0,0,208.12,430.4a1.86,1.86,0,0,0-1.019-2.588,321.173,321.173,0,0,1-45.868-21.853,1.885,1.885,0,0,1-.185-3.126c3.082-2.309,6.166-4.711,9.109-7.137a1.819,1.819,0,0,1,1.9-.256c96.229,43.917,200.41,43.917,295.5,0a1.812,1.812,0,0,1,1.924.233c2.944,2.426,6.027,4.851,9.132,7.16a1.884,1.884,0,0,1-.162,3.126,301.407,301.407,0,0,1-45.89,21.83,1.875,1.875,0,0,0-1,2.611,391.055,391.055,0,0,0,30.014,48.815,1.864,1.864,0,0,0,2.063.7A486.048,486.048,0,0,0,610.7,405.729a1.882,1.882,0,0,0,.765-1.352C623.729,277.594,590.933,167.465,524.531,69.836ZM222.491,337.58c-28.972,0-52.844-26.587-52.844-59.239S193.056,219.1,222.491,219.1c29.665,0,53.306,26.82,52.843,59.239C275.334,310.993,251.924,337.58,222.491,337.58Zm195.38,0c-28.971,0-52.843-26.587-52.843-59.239S388.437,219.1,417.871,219.1c29.667,0,53.307,26.82,52.844,59.239C470.715,310.993,447.538,337.58,417.871,337.58Z'/%3E%3C/svg%3E");
}

.fa-twitch {
    --marken-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M391.17,103.47H352.54v109.7h38.63ZM285,103H246.37V212.75H285ZM120.83,0,24.31,91.42V420.58H140.14V512l96.53-91.42h77.25L487.69,256V0ZM449.07,237.75l-77.22,73.12H294.61l-67.6,64v-64H140.14V36.58H449.07Z'/%3E%3C/svg%3E");
}

/* ── Kick ─────────────────────────────────────────────────────────────────
 *
 * NICHT aus FontAwesome: Dort gibt es kein Kick-Icon. Die Datei liegt unter
 * /images/kick.webp und ist vom Betreiber abgelegt --
 * dieses Skript zeigt nur darauf, es baut die Marke nicht nach.
 *
 * Eigene Klasse statt eines fab-Namens: Jeder fab-Name wuerde die
 * Brands-Schrift wieder anfordern, deren Wegfall der ganze Zweck dieser Datei
 * ist. tests/markenIcons.test.js haelt das fest.
 *
 * Gleiche Bauart wie oben -- 1em, dieselbe Grundlinie, Maske statt Bild. Damit
 * steht es im selben Verhaeltnis wie das Twitch-Logo daneben und nimmt wie
 * dieses die Textfarbe an.
 */
.jb-icon-kick {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    background-color: currentColor;
    -webkit-mask: url("/images/kick.webp") center / contain no-repeat;
    mask: url("/images/kick.webp") center / contain no-repeat;
}

/* Die Markenfarbe -- aus der abgelegten Datei ausgelesen, nicht geraten.
   Angewandt nur dort, wo das Logo als MARKE steht (Kanal-Chip auf der
   Startseite); im Fliesstext und in Leisten bleibt es Textfarbe, wie Twitch
   und Discord auch. */
.jb-icon-kick--marke {
    background-color: #53fc18;
}