/*
 * Platz für eigene Änderungen direkt als CSS
 * Die hier gemachten Änderungen überschreiben ggfs. andere Styles, da diese Datei als letzte geladen wird.
 */

/* ANPASSUNG DG */

/* In den Template-Einstellungen habe ich die Grundfarben gesetzt */

/* Farben AJAX-Suche */
.panel {
	background-color: #f5f7fa;
	color: #525252;
}

.ajax-suche-wrapper a {
    color: #525252 !important;
}

.ajax-suche-wrapper a:hover {
    color: #4e98ed !important;
}

@media (min-width: 992px) {
	
    /* Hintergrundbild */
	#main-wrapper {
        background-image: url("images/background.jpg");
        background-repeat: repeat;
    }
	/* Content-Bereich weiß färben, sonst sieht man das Hintergrundbild durch */
    #content-wrapper {
        background-color: white;
    }
	
	/* Die kleinen Toggle-Pfeile im Megamenü entfernen */
	.dropdown-toggle::after {
		display:none;
	}

	/* Kategorieicons im Megamenü */
	.kategorieiconsimmenu {
		min-height: 25px;
		max-height: 50px;
		padding-left: 6px; /* Wir nehmen auf der Linken Seite ein Padding, weil das nicht mit zusammengeschoben wird, wenn die Seite verkleinert wird */
		margin-right: 7px; /* Wir nehmen auf der rechten Seite ein Margin, weil das zusammengeschoben werden kann, wenn die Seite verkleinert wird */
	}
	
	/* Link um die Kategoriebilder im Megamenü */
	header .navbar-nav>.nav-item>.nav-link {
		padding: 0px;
	}
	
	/* Kategoriebezeichnung im Megamenü */
	.nav-mobile-heading {
		display:none !important;
	}
	
	/* Im ausgeklappenten Mega-Menu die Schriftgröße der Kategorien verkleinern */
	header .dropdown-menu a {
	   font-size: 12px;
	}
	
	/* In der Datei snippets/categories_mega.tpl habe ich festgelegt, dass xl=2 statt xl=3 */
	/* verwedendet werden soll - Bei mittleren Auflösungen wird aber seltsamerweise nicht */
	/* die dafür nötige Skalierung vorgenommen, so dass wir diese hier noch mal setzen müssen */
    .col-xl-2 {
        flex: 0 0 16.66666667%;
        max-width: 16.66666667%;
    }
}

@media (min-width: 768px) {
	/* In der Produktliste/Artikelliste den Warenkorbbutton immer anzeigen und nicht nur beim Mouse-Over */
	.productbox.productbox-hover:not(:hover) .productbox-onhover {
		opacity: 1;
	}
}

@media (max-width: 991px) {
	/* Kategoriebilder im Megamenü */
	.kategorieiconsimmenu {
		display:none;
	}	
}