/* Überschriften Tuning */
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 { margin-top: 1rem; }

h3 { color: #626262; }

#full-description li, .short-description li { margin-left: 16px; list-style: disc }
#full-description img { width: 50%; height: auto; }

.productmediadownloads li { margin-bottom: 3px; font-weight: bold; }

img.zahlungsart { float: left; margin: 5px 10px 10px 0px; }

img.responsive { width: 100%; height: auto; }

img.teaser { width: 50%; height: auto; margin-right: 20px; margin-bottom: 20px; float: left; }

.product-question-button {
  background-color: rgb(234, 144, 12) !important;
}

/* Sitemap */
.sitemap-page .entity ul { padding: 10px; }
.sitemap-page .entity li { display: block; line-height: 18px; }
.sitemap-page .entity li::before { top: 10px; }

/* Topic-Block */
.topic-block { margin: 50px; }
.topic-block-title { text-align: center }

.products-list-container-body, .products-body-content { max-width: unset; }   /* volle Breite */

.products-box-new-icon-set { position: relative; width: 100%; background-color: #f1f1f1; opacity: 1}   /* lässt die Wunschliste etc. Icons immer genauso erscheinen wie bei mobil */
.overview .product-price { font-size: 22px; }   /* macht den Preis auf der Detailseite kleiner */
.product-box-detail-button { padding-top: 8px; }   /* zentriert den Text vertikal relativ zu den Icons */

.language-selector { width: 100px; margin-left: 10px; }   /* damit Fahnen nebeneinander angezeigt werden */
.products-list-header-body a span:hover {color: rgb(12, 144, 234) }   /* Breadcrumb nicht gelb! */
.prices .actual-price { font-size: 18px; }   /* macht den Preis auf der Übersichtsseite etwas deutlicher */
.search-results .item-grid { margin-left: -15px; margin-right: -15px; }   /* setzt das Products-Grid auf Suche-Seite bündig zum Rand */
.manufacturer-logo-name { position: unset; padding: 5px; font-size: 14px; height: 40px; }   /* formatiert den Herstellernamen auf der Alle Hersteller-Seite */

/*.gallery .picture { position: unset; }   /* Produktbild linksbündig */
.gallery .picture img { margin: 0px auto; width: unset; }   /* Produktbild soll oben anschließen */
.gallery .picture-thumbs {margin: 20px 0px; }   /* nach den Thumbs Abstand, z.B. bei mobiler Ansicht zur Überschrift */

/* Menü */
.sublist .active a { color: unset !important }   /* nötig, um die Farbe in unterliegenden Elementen einzustellen */
.categories-container .card-body ul li { padding: 2px 0px; }   /* alle Menüeinträge enger zusammen */
.categories-list > li.active { background-color: #f3f3f3; font-weight: bolder; margin-top: 5px; margin-bottom: 5px; }   /* den ausgewählten Menüpunkt der Hauptebene grau hinterlegen etc. */
.categories-container .categories-list > li.active > a,
.categories-container .categories-list > li > a:hover,
.categories-container .sublist > li.active > a,
.categories-container .sublist > li > a:hover { color: rgb(12, 144, 234) !important; }   /* ausgewählte Menüpunkte in blau und beim Drüberfahren */
.categories-list li li { text-transform: initial; line-height: 20px; }   /* Menüpunkte enger und nicht in Großbuchstaben */
.categories-list li li li { line-height: 17px; }   /* Menüpunkte enger */
.categories-list .sublist a,
.categories-list .sublist .active a:hover { border-left: initial; padding: 0px 0px; }   /* keinen blauen Strich vor Menüpunkt */
.categories-list .sublist .sublist a { font-size: 14px; color: #333; }   /* Menü der dritten Ebene kleiner */

/* Hamburger-Menü */
.top-nav-container .navbar .mobile-menu ul.sublist li .nav-link { text-transform: initial; border-top: none; padding-top: 0px; padding-bottom: 2px; }   /* Abstand der Untermenü-Items verkleinern */
.top-nav-container .navbar .mobile-menu li .nav-link:hover { border-bottom: 1px solid #eeeeee !important }   /* keine blaue Linie beim Darüberfahren */

.cc-banner.cc-bottom { border-top: 1px solid #999999; }   /* kleiner Rand oben beim CC */

.shopping-cart-page .common-buttons input,
.shopping-cart-page .common-buttons button { width: 275px; }   /* sorgt dafür, dass auf der Warenkorb-Seite die Buttons gleich hoch sind */

.MegaMenu-categories-menu .second-dropdown,
.MegaMenu-manufacturers-menu .second-dropdown { overflow: auto; max-height: 400px; }   /* macht die Flyout-Menüs scrollbar */

.top-nav-container .navbar .dropdown-menu-right ul li a:hover { color: rgb(12, 144, 234) !important; }   /* beim Drüberfahren blau */
.top-nav-container .navbar .MegaMenu-categories-menu .dropdown-menu-right ul li ul li { padding-top: 0px }   /* Unterkategorien enger zusammen */
.top-nav-container .navbar .MegaMenu-categories-menu .dropdown-menu-right ul li ul a span { line-height: unset; }   /* Unterkategorien enger zusammen */
.top-nav-container .navbar .MegaMenu-categories-menu .dropdown-menu-right ul li ul a.nav-link { padding-bottom: 0px; }   /* Unterkategorien enger zusammen */
.top-nav-container .navbar .MegaMenu-categories-menu .dropdown-menu-right ul li ul a.more-link span { font-weight: bold; }   /* Das Mehr im Menü soll fett sein */
.top-nav-container .navbar .MegaMenu-categories-menu .dropdown-menu ul li.nav-item { width: 200px; }   /* macht die Kategorie-Spalte im Menü größer */
.top-nav-container .navbar .MegaMenu-categories-menu .dropdown-menu ul li.nav-item img { width: 35%; }   /* macht das Kategorie-Logo im Menü kleiner */
.top-nav-container .navbar .MegaMenu-manufacturers-menu .dropdown-menu ul li.nav-item { width: 75px; margin: 5px 10px; }   /* macht das Hersteller-Logo im Menü kleiner */

.header-menu .MegaMenu-manufacturers-menu .dropdown-menu ul li.nav-item a span { text-transform: initial; font-weight: normal; font-size: 14px; }   /* formatiert den Herstellernamen im Menü */
.header-menu .nav-item a { font-size: 15px; }   /* Menü-Schrift kleiner */

li.nav-item.separatortop { border-top: 2px solid #999999; }
li.nav-item.separatorbottom { border-bottom: 2px solid #999999; }

.products-box a { text-transform: initial; font-size: 14px}   /* Produktname nicht in Großbuchstaben und etwas kleiner */
.products-box .product-title { height: 75px; }   /* genug Platz für den Produktnamen */
.products-box .price { color: rgb(12, 144, 234) !important; }   /* Preis soll andere Farbe haben */
.products-box .old-price { color: rgb(228, 67, 75) !important; }   /* Preis soll andere Farbe haben */
.products-box .picture a img { width: unset !important }

/* formatiert die Products-Box mini */
.products-box .picture-mini { float: left; width: 40%; display: inline-block; }
.products-box .details-mini { float: right; width: 60% }

/* formatiert Product-Selektor DropDown */
.product-selectors span { margin: 0px 5px; }
.product-selectors select, .product-selectors option { color: #333; }

.manufacturer-page .product-selectors { margin: unset; }   /* Abstand richtig (Fehler im Template) */

/* formatiert die kürzlich angesehenen Artikel */
.block-recently-viewed-products { text-transform: initial; }
.block-recently-viewed-products .card-body ul.list li { width: 100%; clear: both; margin-top: 8px; margin-bottom: 8px; border-bottom: 1px solid rgb(221, 225, 231); display: table; }
.block-recently-viewed-products .card-body ul.list li.last { border-bottom: unset; }
.block-recently-viewed-products .card-body ul.list li a.product-picture { float: left; padding-bottom: 8px; }

.OCarousel-item input[type="button"] { display: inline-block; height: 40px; border: none; vertical-align: middle; background: none }   /* damit Details-Button auch im Carousel gleich aussieht */
.item-box input[type="button"] { background: none }

.oc-homepage-newproducts .title-container { color: #333; }   /* Titel des Neue-Produkte Carousels */

/* Slider-Text */
.anywhere-slider-white .slider-title, .anywhere-slider-white .slider-subtitle { color: rgb(255,255,255); text-transform: initial; text-shadow: 2px 2px 4px #000000; width: 65%; }
.anywhere-slider-black .slider-title, .anywhere-slider-black .slider-subtitle { color: rgb(0,0,0); text-transform: initial; text-shadow: 2px 2px 4px #ffffff; width: 65%; }
.anywhere-slider-blue .slider-title, .anywhere-slider-blue .slider-subtitle { color: rgb(0,87,163); text-transform: initial; text-shadow: 2px 2px 4px #ffffff; width: 65%; }
.anywhere-slider-white .slider-subtitle, .anywhere-slider-black .slider-subtitle, .anywhere-slider-blue .slider-subtitle { font-size: 32px; letter-spacing: 2px; font-weight: bold; }

/* Magnifier Popup */
.mfp-zoom-out-cur,
.mfp-zoom-out-cur .mfp-image-holder .mfp-close { cursor: auto !important; }
.mfp-image-holder button.mfp-close,
.mfp-iframe-holder button.mfp-close { right: 0px; top: -6px; text-align: center; padding-right: 0px; }

/* Filterboxen */
#ajaxfilter-form .filter-title h4.filtertext { font-weight: bold; letter-spacing: 1px; font-size: 15px; font-family: 'brokmanw00-mediumregular' }
.mobile-filter-view button { background-color: #0c90ea; }

.pre-order-availability-date { margin-top: 10px; font-weight: bold; }

div.estimated-delivery-hints { float: left; text-align: left; }
div.estimated-delivery-hints li { list-style: disc; }

.header-banner-text { width: 60%; padding-left: 5%; padding-right: 5%; float: left; padding: 0; padding-top: 5px; text-align: center }
.header-banner-imgleft { text-align: left; width: 15%; float: left; padding: 0 }
.header-banner-imgright { text-align: right; width: 15%; float: right; padding: 0 }

@media (max-width: 767px) {
  .block-recently-viewed-products .card-body ul.list li a.product-name { display: inline; }   /* formatiert die kürzlich angesehenen Artikel */
  #full-description img { width: 100%; height: auto; }
  .header-banner-text { width: 70%; padding-left: 5%; padding-right: 5%; }
}

@media (max-width: 991px) {
	.block-recently-viewed-products .card-body ul.list li a.product-name { margin-left: 0px !important; }   /* formatiert die kürzlich angesehenen Artikel */
	.top-menu .sublist li a { font-size: 13px }   /* Hamburger-Untermenü kleiner */
	img.teaser { width: 100%; height: auto; } 	
}

@media (min-width: 768px) and (max-width: 991px) {
	.filters-box .filters-box-header h5,
	.block-category-navigation h5,
	.block-recently-viewed-products h5,
	.block-popular-tags h5 {
		font-size: 15px;
		letter-spacing: 1px;
		text-transform: uppercase;
		font-weight: bold;
	} /* diese Überschriften bleiben auch für schmalere Browserfenster gleich groß */
	#full-description img { width: 75%; height: auto; }
}

@media (min-width: 1380px) {
    .col-ml-2 {
        -ms-flex: 0 0 16.666667%;
        flex: 0 0 16.666667%;
        max-width: 16.666667%;
    }   /* eigene Grid Implementation, "ml" für "mega large" */
}

@media (min-width: 992px) {
    .header-menu .navbar-nav .first-lebel-nav > a,
    .header-menu .navbar-nav .dropdown-menu-list > a {
        padding: 4px 12px !important;
    }   /* Menü enger */
    /*.product-details-page .gallery .picture,
    .product-details-page .gallery .picture img {
        width: unset;
    }   /* Produktbild nicht ganz so groß */
}

@media(max-width:1260px) {
    .header-menu .nav-item a {
        font-size: 13px;
    }   /* Menü-Schrift kleiner */
}