/* Macht aus dem Navigationslink zur Einhell-Themenwelt das Einhell-Logo.

   Der Link selbst ist eine ganz normale Seite im Content-Manager (Typ "Link",
   Position "Hauptnavigation"). Dadurch bleibt die Reihenfolge im Admin per
   Drag & Drop aenderbar. Erkannt wird der Link hier am Ziel und nicht an der
   Position - ein Verschieben im Content-Manager zerreisst das Logo also nicht.

   Wichtig ist das direkte Kind (">"): dieselbe Themenwelt haengt auch als
   Unterkategorie im Dropdown "Themenwelten", und die soll Text bleiben.

   Am Handy bleibt der Eintrag ebenfalls Text. Dort zieht das Overlay-Menue
   die Navigation in eine eigene Liste um, in der alle Punkte untereinander
   als Zeilen stehen - ein Logo wuerde diese Liste nur zerreissen. Die
   Desktop-Leiste (#mainNavigation) ist am Handy ohnehin ausgeblendet. */

#mainNavigation > a[href*="einhell-power-x-change"] {
    display: inline-block;
    vertical-align: top;
    /* Breite knapp gehalten: die Leiste schiebt bei schmalen Fenstern sonst
       noch eine Kategorie mehr in das "Weitere"-Menue. */
    width: 110px;
    height: 48px;          /* gleiche Hoehe wie die uebrigen Navigationsknoepfe */
    padding: 0;
    background-image: url("../Img/einhell-logo-nav.png");
    background-repeat: no-repeat;
    background-position: center;
    /* Genau die halbe Bildbreite (165 px): auf Bildschirmen mit doppelter
       Pixeldichte trifft so jeder Bildpunkt auf einen Geraetepunkt. Bei 86 px
       musste der Browser das Logo um vier Prozent hochrechnen, und genau das
       hat es weich aussehen lassen. Schaerfer wird es erst mit einer groesseren
       Vorlage - das vorhandene Logo hat nur 165x50 Pixel. */
    background-size: 82px auto;
    /* Der weisse Grund gehoert zum Logo - es steht dadurch sauber zwischen
       dem schwarzen und dem roten Nachbarknopf. */
    background-color: #fff;
    /* Schrift auf 0: der Linktext verschwindet optisch, steht aber weiter im
       Quelltext - fuer Vorleseprogramme und Suchmaschinen bleibt er lesbar. */
    font-size: 0;
    line-height: 0;
}