/*
 * Custom code goes here.
 * A template should always ship with an empty custom.css
 */ 

p, .page-content.page-cms ul {
  font-size: 0.9rem;
  font-weight: 400;
  color: #232323;
}
  /*Virtuelle Texte auf der HP und ausblenden der Preis bei 0, 1, 2, */
body#contact .card-block::after {
  content: "Gäste & Kunden - Für ihre Anfrage als Nutzer unserer Seite: \A kundendienst21(ät)kulturkalenderruhr.de \A \A Telefon Kulturkalender.Ruhr: \A 0231 317 30 70 \A \A \A Für Anfragen von Netzwerkpartnern wie: \A Kulturschaffende, Veranstalter, Städte, Gemeinden, Kulturbüros & Künstler et cetera: \A netzwerkpartner(ät)kulturkalenderruhr.de \A \A ";
  white-space: pre-wrap;
  font-size: .9rem;
  font-weight: 500;
  color: #555;
  visibility: visible;
  display: block;
  word-wrap: break-word;
}
 /* bei Preisangabe 0, 1, oder 2 wird der Preis bei den Arikelthumbnails ausgeblendet */
.product-price-and-shipping .price[aria-label="Preis"][content="0"] {
  display: none !important;
}
 /* bei Preisangabe 0, 1, oder 2 ändert sich der Text */
.product-prices .product-price .current-price .current-price-value[content="0"] {
  font-size: 0;
}
.product-prices .product-price .current-price .current-price-value[content="0"]::before {
  content: "Ticktverkauf über den Veranstalter";
  font-size: 1rem;
  font-weight: 700;
  color: cadetblue;
  visibility: visible;
  display: block;
}
.product-prices .product-price .current-price .current-price-value[content="0"]::after {
  content: "Für Karten & weitere Infos nutzen Sie bitte den Link zum Veranstalter (siehe unten)";
  font-size: .9rem; 
  font-weight: 500;
  color: #232323;
  visibility: visible;
  display: inline-block;
}
.product-prices .product-price .current-price .current-price-value[content="1"] {
  font-size: 0;
}
.product-prices .product-price .current-price .current-price-value[content="1"]::before {
  content: "Diese Veranstaltung hat bereit stattgefunden!";
  font-size: 1rem;
  font-weight: 900;
  color: red;
  visibility: visible;
  display: inline-block;
}
.product-prices .product-price .current-price .current-price-value[content="2"] {
  font-size: 0;
}
.product-prices .product-price .current-price .current-price-value[content="2"]::after {
  content: "Tickets hier in Kürze verfügbar!";
  font-size: 1rem; 
  font-weight: 900;
  color:cornflowerblue;
  visibility: visible;
  display: inline-block;
}
 .block-category .block-category-inner #category-description strong {
  font-weight: 800;
  color: #000;
}
 /* Verhindert die Überlappung des Beschreibungs-Textes auf den Artikel-Seiten */ 
/* Über 1200px */
@media (min-width: 1201px) {
  /* Setzt die Mindesthöhe für alle Elemente mit einer ID, 
     die mit 'product-description-short-' beginnt, auf 354px. */
  [id^="product-description-short-"] {
    min-height: 354px;
  }
  /* Setzt die Mindesthöhe auf 0 für alle Elemente mit einer ID, 
     die mit 'product-description-short-' beginnt und direkt auf ein 
     Element mit der Klasse '.product-actions' folgen. */
  .product-actions + [id^="product-description-short-"] {
    min-height: 0;
  }
}
/* Bis 1200px */
@media (max-width: 1200px) {
  [id^="product-description-short-"] {
    min-height: 318px; /* (354px * 0.9) */
  }
  .product-actions + [id^="product-description-short-"] {
    min-height: 0;
  }
}
/* Bis 1024px */
@media (max-width: 1024px) {
  [id^="product-description-short-"] {
    min-height: 235px;
  }
  .product-actions + [id^="product-description-short-"] {
    min-height: 0;
  }
}
/* Bis 992px */
@media (max-width: 992px) {
  [id^="product-description-short-"] {
    min-height: 220px; 
  }
  .product-actions + [id^="product-description-short-"] {
    min-height: 0;
  }
}
/* Bis 767px */
@media (max-width: 767px) {
  [id^="product-description-short-"] {
    min-height: 0; 
  }

  .product-actions + [id^="product-description-short-"] {
    min-height: 0;
  }
}

 /* Stile für die mobile Ansicht Menü aufgeklappt */
@media (max-width: 767px) {
  .sf-menu.menu-content {
    display: block !important;
  }
}
@media (max-width: 767px) {
  .sf-menu {
    display: block !important;
  }
}
.img-fluid, .carousel-inner > .carousel-item > img, .carousel-inner > .carousel-item > a > img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
} 
#_desktop_logo {
  display: none;
}
 /* mobil logo einblendebei mobile 
@media (max-width: 767px) {
  #header .top-logo img {
    width:420px;
    max-height: 100%;
  }
} 
#_mobile_user_info {
  padding: 0 0 0 6px;
  margin: 0 0 0 7px;
  }*/
  #header .top-logo {
    min-height: auto;
    display: none;
  }
  #header .header-nav .blockcart {
  margin-left: 0;
}
/* ausgeschaltet alt)
 .header-banner  {
    display: block !important;
    padding: 0  !important;
    margin: 0  !important;
} */
.carousel .carousel-inner, .carousel-inner ul {
  padding: 0;
  margin: 0;
  list-style: none;
}
.banner {
    display: block !important;
}
#carousel.carousel.slide {
    display: block !important;
}
/* Anpassung Text Kategorieseiten */
.block-category .block-category-inner #category-description p:first-child, .block-category .block-category-inner #category-description .page-content.page-cms ul:first-child, .page-content.page-cms .block-category .block-category-inner #category-description ul:first-child {
  margin-bottom: .5rem;
}
  /* Menü Symbol oben links deaktivieren (erschien plötzlich in der Mobilansicht) */
.mobile div#menu-icon.float-xs-left {
  display: none;
}
/* rechts neben dem Text war noch eine ungefüllte Spalte neben dem Custom-Text (ist damit abgeschaltet) muss man prüfen ob das global geht? Beinhaltet auch den Kontakt Button oben */
#header nav.header-nav div.container div.row div.hidden-sm-down div.col-md-5.col-xs-12 {
  display: none;
}
 /* Versucht das den image-slider bei mobilansicht anzuschalten, was aber noch nicht gelungen ist. PS schaltet bei mobilgräten das den slider trotzdem ab. */
 @media screen and (max-width: 100px) {
  .header-banner .carousel {
    display: block !important;
  }
}
.carousel, .carousel-inner, .carousel .carousel-inner {
  display: block !important;
} 
@media screen and (device-width: 100px) and (device-height: 4000px) {
  .header-banner .carousel {
    display: block !important;
  }
}
.header-banner .carousel {
  display: block !important;
}
 /* Hier folgen alle nötigen Einstellungen um den Slider als Banner oben anzupassen. Das ist die bessere Wahl, weil die Bildqualität des Banners (Slider) dann besser ist */
.carousel {
  margin-bottom: 0;
  background: lavender;
}
/* Beim Image-Slider gab es mobiel plötzlich ein padding-bottom, was einen weißen Balken verursachte ab 991px. Das wird hier auf 0 gesetzt und background: lavender; */
@media (max-width: 991px) {
  .carousel {
    padding-bottom: 0;
    background: lavender;
  }
}
.carousel .carousel-inner {
  height: auto;
}
#carousel.carousel.slide div.direction {
  display: none;
}
.carousel-indicators {
  display: none;
}
/* Einstellungen Slider als Banner oben. Folgende 2 Tags */
@media (min-width: 1200px) {
  .header-banner {
    display: block;
    margin: auto;
    width: 92.5%;
    max-width: 100%;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .header-banner {
    display: block;
    margin: auto;
    width: 94%;
    max-width: 100%;
  }
} 
@media (min-width: 768px) and (max-width: 991px) {
  .header-banner {
    display: block;
    margin: auto;
    width: 100%;
    max-width: 100%;
  }
}
@media (max-width: 991px) {
  .carousel {
  width: 100%;
  max-width: 100%;
  padding-bottom: 0;
  background: lavender;
  position: relative;
  overflow: hidden;
  left: 0;
  right: 0;
  margin: auto;
  }
}
@media (min-width: 576px) and (max-width: 767px) {
  .header-banner {
    display: block;
    margin: auto;
    width: 100%;
    max-width: 100%;
   }
}
@media (max-width: 575px) {
  .header-banner {
    display: block;
    margin: auto;
    width: 100% !important;
    max-width: 100%;
  }
}
/* Anpassung Custom Text */
@media (min-width: 991px) {
    #custom-text {
  position: relative;
  padding: 15px 1rem 0 1rem;
  margin-bottom: 0;
  border: 0px solid #e9e9e9;
  background: #fff;
  width: 100%;
  max-width: 100%;
  display: inline-block;
  }
}
@media (max-width: 991px) {
    #custom-text {
  position: relative;
  padding: 15px 5px 5px 5px;
  margin-bottom: 0;
  border: 0px solid #e9e9e9;
  background: #fff;
  width: auto;
  max-width: 100%;
  display: block;
  }
} 
.footer-container {
  padding-top: .5rem;
  overflow: hidden;
}
/* Hier kommen die Regeln für die Artikel größen auf für die Artikelseiten damit die Artikelanzeige "gleicher Kategorien" und "Angesehene Artikel" nicht zu groß ist. */ 
@media (min-width: 1200px) {
  #product #content-wrapper.js-content-wrapper section#main section.featured-products.clearfix .products .js-product {
    float: left;
    width: 20%;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  #product #content-wrapper.js-content-wrapper section#main section.featured-products.clearfix .products .js-product {
    float: left;
    width: 25%;
  }
}
@media (min-width: 576px) and (max-width: 991px) {
  #product #content-wrapper.js-content-wrapper section#main section.featured-products.clearfix .products .js-product {
    float: left;
    width: 33.33333%;
  }
}
@media (min-width: 375px) and (max-width: 575px) {
  #product #content-wrapper.js-content-wrapper section#main section.featured-products.clearfix .products .js-product {
    float: left;
    width: 50%;
  }
}
@media (max-width: 374px) {
  #product #content-wrapper.js-content-wrapper section#main section.featured-products.clearfix .products .js-product {
    float: left;
    width: 100%;
  }
}

/* Schaltet #left-column auf der Seite Gesammtübersicht ab. De Zeite Tag zieht den Rest des Content auf 100% */  
body#category.category-gesamtubersicht #left-column {
    display: none;
}
body#category.category-gesamtubersicht #content-wrapper.js-content-wrapper {
    width: 100%;
}
 /* Angaben unter kontakt mit CSS eingeblended */
#contact .card-block::before {
  content: "Kontakt: \A \A ";
  white-space: pre; /* Damit der Zeilenumbruch mit \A funktioniert */
  font-size: 1rem;
  font-weight: 700;
  color: #666;
  visibility: visible;
  display: block;
}

/*Bewirkt das die Artikle-Thumbnails sich beim Bildschirm Zoom nicht zusammenschieben und sie die nötige Höhe behalten. 2 Tags */
  .product-miniature {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .product-miniature .thumbnail-container {
    flex: 1;
    max-height: 100%;
    background: lavender;
    overflow: visible;
  }
/* Einschränkung der Höhe der Produktdarstellung auf der Index Seite, um die Anzeige der Produkte zu begrenzen */
/* Darunter jeweils die Anpassung dere Höhe der Produkt-Thumbnails auf eine einheitliche Höhe, damit die Artikel nicht bei der Begenzung der Höhe abgeschnitten oder in Teilen sichtbar sind. Height ist sonst standardmäßig auto -  aber jetzt den Bildschirmgrößen angrepasst (Verschiedene Werte) / Achtung: das entfällt jetzt mit dem Versuch mit den 2 tags oben */ 
/* Für 1200px und größere Bildschirme */
@media (min-width: 1200px) {
  section.featured-products.clearfix div.products.row {
    max-height: 1200px;
    overflow: hidden;
    padding-top: 9px;
  }
}
/* Für 992px bis 1199px */
@media (min-width: 992px) and (max-width: 1199px) {
  section.featured-products.clearfix div.products.row {
    max-height: 1450px;
    overflow: hidden;
    padding-top: 8px;
  }
}
/* Für 768px bis 991px */
@media (min-width: 769px) and (max-width: 991px) {
  section.featured-products.clearfix div.products.row {
    max-height: 1550px;
    overflow: hidden;
    padding-top: 8px;
  }
}
/* Für 576px bis 767px */
@media (min-width: 576px) and (max-width: 768px) {
  section.featured-products.clearfix div.products.row {
    max-height: 1300px;
    overflow: hidden;
    padding-top: 8px;
  }
}
/* Für 575px und kleinere Bildschirme */
@media (max-width: 575px) {
  section.featured-products.clearfix div.products.row {
    max-height: 2100px;
    overflow: hidden;
    padding-top: 8px;
  }
}

/* Artikelseite Beschreibung Textbox näher an Headline-Link "Beschreibung" */
.tabs .tab-pane {
  padding-top: .5rem;
}
/*Artikle Beschreibung Überschrift Aktiviert blau und fetter */
.tabs .nav-tabs .nav-link {
  color: #24b9d7 ;
  border: 0 solid transparent;
  font-weight: 700;
}
.product-features > dl.data-sheet dd.value, .product-features > dl.data-sheet dt.name {
  -ms-flex: none;
  flex: none;
 }
/* Einstellugnen der Darstellung im Checkout */
.product-name {
  float: left !important;
}
.product-quantity {
  float: left !important;
  margin-right: 10px;
   clear: both;
}
#cart-summary-product-list.collapse ul.media-list li.media div.media-body span.product-price.float-xs-right {
  float: left !important;
  color: coral;
  font-weight: 600;
}
.block-promo .promo-name .cart-summary-line span {
  color: #46cc00;
}
.product-line-info {
  float: left !important;
  width: 100%;
  display: block;
}
.h3 {
 font-weight: 500 !important;
 font-size: 1rem !important;
 text-transform: none !important;
 }
/* Custom Textfeld in .category-id-18.category-wann-was-wo-aktuell-vorschau ausblenden, weil die Anwendung des Facetten-Modules im Fokus steht */
.category-id-18.category-wann-was-wo-aktuell-vorschau.category-id-parent-2.category-depth-level-2 main section#wrapper div.container div#content-wrapper.js-content-wrapper.left-column.col-xs-12.col-sm-8.col-md-9 section#main div#js-product-list-header {
    display: none;;
}
.products-selection .total-products {
  padding-top: 0;
}
.total-products > p:nth-child(1)  {
 margin:0 0 10px 0;
  }
  #js-product-list-top {
  margin-bottom: 3px;
    text-align: left !important;
}
.active_filters .filter-block {
  display: inline-block;
  padding: 0.25rem;
  margin-right: 0.5rem;
  margin-top: 0;
  margin-bottom: 0;
  font-size: .8125rem;
  color: #232323;
  background: #fff;
}
section#js-active-search-filters.active_filters ul li.filter-block a.js-search-link i.material-icons.close {
  font-weight: 900;
  font-size: 1.5rem;
 }
li.filter-block {
    line-height: 2.3;
}
.active_filters {
  padding: 0 1rem ;
  margin-bottom: 1.25rem;
  background: #dededd;
}
.product-cover {
  position: relative;
  width: 100%;
  }
 .images-container {
  position: relative;
  width: 100%;
 } 
 /*
 .product-container > div:nth-child(1) {
  padding: 0 0 0 15px;
  } */
 /* Produktbild Hintergrund weiß ausgeschaltet - Artikelseiten */
  .product-cover img {
  max-width: 452px; 
  max-height: 452px;
  background: none;
  margin: 0;
  padding: 0;
  }
#product #content {
  z-index: 2; /* was nach vorn soll muss immer die höhere Nummer haben */
  position: relative; /* Stellen Sie sicher, dass #product #content positioniert ist */
  width: auto;
  max-width: 100%;
  padding:0;
  margin:0;
} 
 #content.page-content div.images-container.js-images-container div.js-qv-mask.mask {
  width: 90%;
}
 /* Platz unter Preisangabe Artikelseite */ 
 .product-prices div {
  margin-bottom: 0.3rem;
} /*
.product-container > div:nth-child(1) .js-qv-mask.mask .product-images.js-qv-product-images {
    text-align: left;
} */

 /* Artkikelseiten Bildcontainer 40%, Textcontainer 60% */
 @media (min-width: 768px) {
.product-container > div:nth-child(1) {
    float: left;
    width: 40%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
@media (min-width: 768px) {
.product-container > div:nth-child(2) {
    float: left;
    width: 60% !important;
  }
}
 /* Text Listen li werden nicht in prestashop nicht angezeigt. Dieser Regel bewirkt die korrekte Anzeige. */
 .product-information .product-description ul {
    list-style-position: inside;
    padding-left: 1.5rem;
}
 /* Text Listen li. Dieser Regel stellt die gewünschte Textdarstellung ein. */
 .product-information .product-description ul li {
  font-size: 0.9375rem;
  color: #000;
  text-indent: -0.9rem;
  font-weight: 500 !important;
}
/* Listenanzeige Zeilenhöhe 1.5 */
 #product-description-short-1 > ul > li {
    line-height: 1.8 !important;
} 
 /* Textumbruch bei langem Text bei der Facettennavigation */
 #search_filters .facet .facet-label a {
  width: calc(100% - 30px);
  overflow: hidden;
  text-overflow: inherit;
  white-space: normal;
  }
/* Um sicherzustellen, dass die Checkbox und der Text immer auf der gleichen Höhe beginnen 1 */
#search_filters .facet .facet-label a, #search_filters_brands .facet .facet-label a, #search_filters_suppliers .facet .facet-label a {
  display: inline-block;
  margin-top: 0;
  vertical-align: top !important;
  line-height: 1.5rem;
}
/* Um sicherzustellen, dass die Checkbox und der Text immer auf der gleichen Höhe beginnen 2 */
.facet-label span.custom-checkbox {
  display: inline-block;
  margin-top: 5px;
  line-height: 1.5rem;  
}

 .product-flags li.product-flag {
  margin-top: 0;
  font-size: .9rem;
  font-weight: 600;
  pointer-events: none; /* verhindert den Link des darunter liegenden Bildes nicht */
  background: #24b9d7 !important;
  background-color: rgb(36, 185, 215) !important;
}
.product-flags {
  position: absolute;
  margin-top: -10px;
  margin-left: -10px;
  left: 0;
  z-index: 2;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  width: auto;
  pointer-events: none;
}
.product-flags li.product-flag.on-sale {
  -webkit-box-ordinal-group: 0;
  -ms-flex-order: -1;
  order: -1;
  width: auto;
  margin-top: 0 !important;
  font-size: .9rem;
  font-weight: 600;
  text-align: center;
  text-transform: none;
 }
#main div.cart-grid.row div.cart-grid-right.col-xs-12.col-lg-4 div.card.cart-summary div.cart-detailed-totals.js-cart-detailed-totals div.block-promo div.cart-voucher.js-cart-voucher p.promo-code-button.display-promo a.collapse-button {
  display:none;
}
/* In diesem Code werden alle Elemente ausgewählt, deren id Attribut mit “product-description-short” beginnt. 
Die CSS-Regel min-height: 470px; für die Produkt Kurzbeschreibung, wird dann auf all diese Elemente angewendet. 
@media (min-width: 768px) {
[id^="product-description-short"] {
    min-height: 470px; 
  }
}  */

 /* Artikelseite Produkt-Beschreibung auf 100% Breite und setzt Textfeld unter den Artikelbild Container. */
@media (min-width: 768px) {
    .tabs {
        position: relative; /* Stellen Sie sicher, dass .tabs positioniert ist */
        width: calc(100% + 21%); /* Setzt die Breite auf % */
        margin-left: -45%; /* Verschiebt .tabs nach links, um es zentriert zu halten */
        z-index: 3; /* Stellt sicher, dass .tabs über #product #content angezeigt wird */
            }
}
/* etwas größerer Abstand zur Brotkrümmel Navigation oben */
.product-container {
  padding-top: 15px;
}
 #payment-option-1-additional-information.js-additional-information.definition-list.additional-information.ps-hidden section p a {
  color:#24b9d7;
   cursor: pointer;
}
 /* ausblenden des Titels der Adressse im Checkout "Lieferadresse" */ 
 .card.noshadow div.card-block h4.h5.black.addresshead { 
  display: none;
} 
/* zweite Adresse im Checkout ausblenden */
 div.row:nth-child(3) > div:nth-child(2) > div:nth-child(1) > div:nth-child(1) { 
  display: none;
} 
 /* Newsletter Eintrag ausblenden */
 #blockEmailSubscription_displayFooterBefore { 
  pointer-events: none;
  display: none;
} 
/* Macht das modal-popup der Artikelseite unsichtbar, weil es immer noch kurz aufblitzte vor der Weiterleitung - (Die Weiterleitung des Popup auf die Warenkorbsite wird in der custom.js bewirkt) */
#blockcart-modal {
    visibility: hidden;
} 
/* schaltet die Abdunklung des Bildschirmes ab, die beim Modal-Popup #blockcart-modal für die Artikelseite verwendet wird. */
.product-available-for-order.modal-open div.modal-backdrop.fade.in {
  opacity: 0;
}
 /* klappt die Liste der gekauften Produkte im Checkout auf - man braucht beide: .collapse und .collapse.in */
#cart-summary-product-list.collapse { 
  display: block;
} 
#cart-summary-product-list.collapse.in {
  display: block;
} 
/* Zusatzinfo bei der Fehlermeldung auf der Warenkorbseite, entweder wenn zu wenig oder zuviel Artikel im Warenkorb sind */
#notifications .alert-danger ul li::after {
  content: "Pro Bestellung sind maximal 2 Tickets für ein Event möglich. Überprüfen Sie bitte ihren Warenkorb.";
  font-weight: 600;
  line-height: 2rem;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  width: 100%;
}

 /* Die Error Anzeige "Sie haben bereits die maximale verfügbare Menge für dieses Angebot" war im Backend nicht zu übersetzten. Daher dieses CSS. Hier für die Anzeige auf der Artikelseite. Die folgenden 2 Tags gehören zusammen. */
 .ajax-error {
  width: auto;
  margin: 0;
  padding:0;
  visibility: hidden;
} /* bei ::before anstatt ::after liegt das Feld vor der unsichbar gemachten Text-Anzeige und ist höhe, näher am Warenkorb Button */
 .ajax-error::before {
  content: "Regel: Pro Bestellung sind maximal 2 Tickets für ein Event möglich. Überprüfen Sie bitte ihre Warenkorb-Anzeige (oben rechts).";
  visibility: visible;
  display: block;
  background-color:#f2dede;
  font-weight: 600;
  color: darkred;
  padding: .75rem 1.25rem;
  margin-bottom: 1rem;
  border: 1px solid;
    border-top-color: #24b9d7;
    border-right-color: #24b9d7;
    border-bottom-color: #24b9d7;
    border-left-color: #24b9d7;
  border-radius: 1rem;
} 
 /* Die Error Anzeige "Sie haben bereits die maximale verfügbare Menge für dieses Angebot" war im Backend nicht zu übersetzten. Daher dieses CSS. Hier für die Anzeige auf der Warenkorbseite. 
#notifications div.container article.alert.alert-danger {
  width: auto;
  margin: 0;
  padding:0;
  visibility: hidden;
}
#notifications div.container article.alert.alert-danger::after {
  content: "Sie können nur maximal 2 Ticket kaufen. Überprüfen Sie bitte ihren Warenkorb (hier & oben rechts).";
  visibility: visible;
  display: block;
  background-color:#f2dede;
  font-weight: 600;
  color: darkred;
  padding: .75rem 1.25rem;
  margin-bottom: 1rem;
  border: 1px solid;
    border-top-color: #24b9d7;
    border-right-color: #24b9d7;
    border-bottom-color: #24b9d7;
    border-left-color: #24b9d7;
  border-radius: 1rem;
} */
 
 #header {
  color: #333;
  background: lavender;
}
.header-top {
  background: #f6f6f6;
}
#wrapper {
  padding-top: 1.4rem;
  background: lavender;
}
#footer {
  padding-top: 0;
}
#products .all-product-link, .featured-products .all-product-link, .product-accessories .all-product-link {
  margin-top: 1rem;
  margin-bottom: 1rem;
  clear: both;
  font-weight: 500;
  color: #222;
}
/* Anpassung Kunden-Icon */
#header .header-nav .material-icons {
  margin-right: 8px;
}
/* Abmelden und Kunden Account in Mobileansicht neben einander (zwei Tags & 3. */
positionierung) *
.logout.hidden-sm-down {
    display: flex;
    flex-direction: row;
}
/* Abmelden und Kunden Account in Mobileansicht neben einander (viele Tags, weil es erst nicht ging: bitte prüfen ob wirklich alle gebraucht werde */
.logout > i:nth-child(1) {
    display: flex;
    flex-direction: row;
} 
/*
#_mobile_user_info {
    display: flex !important;
    flex-direction: row;
} */
.user-info {
    display: flex;
    flex-direction: row;
}
.logout {
    display: flex;
    flex-direction: row;
}
#header .header-nav .user-info {
    display: flex;
    flex-direction: row;
}
#header .header-nav .user-info a.account {
    display: flex;
    flex-direction: row;
}
.float-xs-right {
  display: flex;
  flex-direction: row;
  padding-right: 13px;
}
/*Das gleiche für den Anmelde-Button mit Icon */
.user-info > a:nth-child(1) {
    display: flex;
    flex-direction: row;
} 
/* ausblenden der Überschriften bei Mobilansicht UnterMenü footer - aber nur an 767px breite - 3 Tags zugeordnet */
@media (max-width: 767px) {
#footer.js-footer div.footer-container div.container div.row div.col-md-6.links div.row div.col-md-6.wrapper p.h3.hidden-sm-down {
    display: none !important;
  }
#footer.js-footer div.footer-container div.container div.row div.block-contact.col-md-3.links.wrapper p.h4.text-uppercase.block-contact-title.hidden-sm-down {
    display: none !important;
  }
  #footer.js-footer div.footer-container div.container div.row div#block_myaccount_infos.col-md-3.links.wrapper p.h3.myaccount-title.hidden-sm-down a.text-uppercase {
    display: none !important;
  }
 } /* diese drei sind eine Gruppe - daher die 2 Klammern am Ende */

  /* Einstellung  der Buttons: Anmeldung, Name, Warenkorb */ 
.row .hidden-sm-down {
    font-weight: 500; 
   // display: block !important;
   // display: flex !important;
   // flex-direction: row;
  } 
  .blockcms-title, .myaccount-title, .myaccount-title a, .block-contact-title {
  font-size: 1rem;
  font-weight: 500;
}
/* Ausblenden des Warenkorb-Symbols
 .hidden-sm-down .material-icons {
    display: block !important;
    display: flex !important;
    flex-direction: row;
  }
/* Artikel-Thunbnail padding Breite left & right von 15px auf 0,75-1,5% kleiner: zwei Tags */
.js-product {
    padding-right: .75% !important;
    padding-left: .75% !important;
 }
 @media (max-width: 767px) {
     .js-product {
    padding-right: 1.5% !important;
    padding-left: 1.5% !important;
 }
 } 
/* Anpassung mobiles Menü */
@media (max-width: 767px) {
  .cat-title {
    padding: .5rem .2rem;
    height: 45px !important;
  }
}
@media (max-width: 767px) {
  .cat-title::after {
     display: none;  
    top: 10px;
  }
}
/* Anpassung Breite Banner 
#header .header-banner a.banner img.img-fluid {
  padding-left: 17px;
  padding-right: 17px;
} 
/* Alt: nur für die Mobilansicht unter 575 pixel damit die Artikelbilder bei einer Spalte mittig bleiben 
@media (max-width: 575px) {
  .col-xs-12 {
   float: left;
   width: auto;
  }
} */
/* Einstellungen Banner oben folgende 4 Tags */
@media (min-width: 576px) {
  .banner img.img-fluid {
    display: block;
    margin: auto;
    width: 100%;
    max-width: 100%;
  }
} 
@media (min-width: 768px) {
  .banner img.img-fluid {
    display: block;
    margin: auto;
    width: 100%;
    max-width: 100%;
  }
}
@media (min-width: 992px) {
  .banner img.img-fluid {
    display: block;
    margin: auto;
    width: 100%;
    max-width: 100%;
  }
} 
@media (min-width: 1200px) {
  .banner img.img-fluid {
    display: block;
    margin: auto;
    width: 100%;
    max-width: 100%;
  }
}
/* Einstellungen Bildschirme Content zusammen: folgende 4 Tags */
@media (min-width: 576px) {
.container {
  display: block;
  margin: auto;
  width: 94%;
  max-width: 100%;
  }
} 
@media (min-width: 768px) {
.container {
  display: block;
  margin: auto;
  width: 97%;
  max-width: 100%;
  }
}
  @media (min-width: 992px) {
.container {
  display: block;
  margin: auto;
  width: 96%;
  max-width: 100%;
  }
} 
@media (min-width: 1200px) {
.container {
  display: block;
  margin: auto;
  width: 94%;
  max-width: 100%;
  }
}
/* Artikle-Thumbnails: Größen neu & mit Hilfe von Bing generierter Code zu Anpassung von Artikelthumbnails bei bestimmten Bildschirmgrößen Page-Home Startseite Index Highlights*/
@media (min-width: 1250px) {
 #content.page-home section.featured-products.clearfix div.products.row div.js-product {
    width: 20%;
  }
}
@media (min-width: 950px) and (max-width: 1249px) {
 #content.page-home section.featured-products.clearfix div.products.row div.js-product {
    width: 25%;
  }
}
@media (min-width: 750px) and (max-width: 949px) {
 #content.page-home section.featured-products.clearfix div.products.row div.js-product {
    width: 33.3333%;
  }
}

@media (min-width: 700px) and (max-width: 749px) {
  #content.page-home section.featured-products.clearfix div.products.row div.js-product {
    width: 50%;
  }
} 
@media (min-width: 567px) and (max-width: 699px) {
  #content.page-home section.featured-products.clearfix div.products.row div.js-product {
    width: 50%;
  }
} 
@media (min-width: 400px) and (max-width: 566px) {
  #content.page-home section.featured-products.clearfix div.products.row div.js-product {
    width: 50%;
  }
}
@media (max-width: 399px) {
  #content.page-home section.featured-products.clearfix div.products.row div.js-product {
    width: 50%;
  }
}
/* und für die Kategorieseiten - hier sind andere Größen erforderlich wegen der linken Columne, die den Container der Artikel-Thumbnails kleiner macht - aber .category-id-2 muss jeweils anders behandelt werden, weil dort die columne links ausgeblendet ist */
@media (min-width: 1450px) {
[class*="category-id-"] .js-product {
    width: 25%;
  }
}
@media (min-width: 1450px) {
.category-id-2 .js-product {
width: 20%;
  }
}
@media (min-width: 1150px) and (max-width: 1449px) {
  class*="category-id-"] .js-product {
    width: 33.3333%;
  }
}
@media (min-width: 1150px) and (max-width: 1449px) {
 .category-id-2 .js-product {
    width: 25%;
  }
}
@media (min-width: 768px) and (max-width: 1149px) {
  [class*="category-id-"] .js-product {
    width: 50%;
  }
}
@media (min-width: 768px) and (max-width: 1149px) {
  .category-id-2 .js-product {
   width: 33.3333%;
  }
}
@media (min-width: 400px) and (max-width: 767px) {
 [class*="category-id-"] .js-product {
   width: 50%;
}
  }
@media (min-width: 400px) and (max-width: 767px) {
  .category-id-2 .js-product {
   width: 50%;
  }
}
@media (max-width: 399px) {
  [class*="category-id-"] .js-product {
    width: 50%;
  }
}
@media (max-width: 399px) {
   .category-id-2 .js-product {
    width: 50%;
  }
}
/* Banner und Menü über volle Breite*/ 
.col-sm-12 {
    width: 100%;
} 
#header .header-nav {
  max-height: 100%;
  }
  #header .header-top {
  padding: 0;
  min-height: 36px;
}

/* Anpassung Hauptcontent bei Kategorie Seiten, damit alles mit den oberen Elementen in einer Linie ist */
#left-column.col-xs-12.col-sm-4.col-md-3 {
  padding-left: 0;
}
.left-column.col-xs-12.col-sm-8.col-md-9 {
  padding-right: 0;
}
 /* Texte etwas kleiner */
 h1, .h1 {
  font-size: 1.2rem;
}
h2, .h2 {
  font-size: 1rem;
}
/* Text Uppercase an mehrern Stellen abschalten */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    color: #232323;
    text-transform: none ;
}
/* Artikelseite Headline schmaller */
#main div.row.product-container.js-product-container div.col-md-6 h1.h1 {
  font-size: 1rem;
  font-weight: 600;
 }
/* bei Anzeige von weiteren Artiken: Abstand Überschrift größer */
#main section.featured-products.clearfix.mt-3 h2 {
  font-weight: 600;
  margin-bottom: 1rem;
}
/* Quick View Vorschau bei Artikel-Thumbnails deaktivieren: dazu sind die zwei folgenden Regeln nötig */
.thumbnail-top div.highlighted-informations.no-variants {
  display: none;
}
.product-miniature .highlighted-informations .quick-view {
  display: none;
} 
/* Überschrift Facetten-Navigation kleiner */
#search_filters > .h6, #search_filters_brands > .h6, #search_filters_suppliers > .h6 {
  font-size: 1rem;
  font-weight: 600;
}
/* Artikeltext in Product-Thumbnails kompakter - oben Abstand für Flagge SALE */
.product-miniature .product-description, .product-miniature .product-title {
    padding: 2px;
    padding-bottom: 5px;
    margin: 0; 
    text-transform: none;
}
 /* Anpassung Text der unteren Seiten-Navigation auf den Kategorieseiten unter den Artikel Thumbnails (2 Tags) */ 
.pagination .page-list {
  font-size: 1.1rem;
 }
 .pagination .current a {
  font-size: 1.1rem;
}
/* Blendet den Block über den Artikel Thumbnails mit Paganierung und Suchfeld aus
 #js-product-list-top {
  display: none;
} */
/* Hier nur für das Suchfeld: Blendet das Suchfeld über den Artikel Thumbnails aus auch falls #js-product-list-top noch angeschaltet ist - siehe eins höher (Angebote ermittelt) */
.sort-by-row {
  display: none !important;
}
/* Überschrift im Kategorietextfeld "Übersicht" kleiner (eventuell global wirksam) */
 .block-category h1 {
     color: #232323;
  margin-bottom: 1rem;
  font-size: inherit;
}
/* Block "Unterkategorien" auf den Kategorieseiten wird ausgeblendet */
#subcategories {
  display: none;
}
 /* Product-title deutlicher - fetter und dunkler */
 .product-miniature .product-title a {
  font-size: .875rem;
  font-weight: 400;
  color: #222;
 }
.has-discount .discount {
  text-transform: none;
  /*background: #b00; */
}
span.discount {
  margin-top: 10px;
}
/* Costum text auf Katgorieseiten ausblenden */
 .category-depth-level-2 main header#header nav.header-nav div.container div.row div.hidden-sm-down div.col-md-7.right-nav div#custom-text {
    display: none ;
}
/* Costum text auf Katgorieseiten ausblenden */
 .category-depth-level-3 main header#header nav.header-nav div.container div.row div.hidden-sm-down div.col-md-7.right-nav div#custom-text {
    display: none ;
}
/* Costum text auf Artikelseite ausblenden */
#cart #custom-text, #product #custom-text {
    display: none ;
}
/* Costum text auf customer-account & my-account Seite ausblenden */
.page-customer-account #custom-text, .page-my-account #custom-text {
    display: none ;
}
/* Untermenü Abstand zum Hauptmenü Lücke nach oben schliessen weil Höhe der Felder verkleinert top: 57px; auf 50px*/
.sf-menu li:hover ul, .sf-menu li.sfHover ul {
    left: 0;
    top: 42px;
    /* match top ul list item height */
    z-index: 99;
    width:auto;
}
/* Menü Großbuchstaben "Uppercase" abschalten */
 .sf-menu > li > a {
  font: 600 18px/22px "Open Sans", sans-serif;
  text-transform: none;
  color: #484848;
  display: block;
  padding: 7px 10px;
}
/* Nav2 über ganze Breite mit Anmelde Link rechts (auch wenn custom text nicht sichtbar) Nav1 wird abgeschaltet weil keine Inhalt */
@media (min-width: 768px) {
  .col-md-7 {
    float: left;
    width: 100%;
    max-width: 100%;
  }
}
/* Anpassung Anmelde Link in Nav2 rechts*/
#header .header-nav .user-info {
  margin: 10px 5px 0 0 ;
  margin-left: 0;
  text-align: right;
  white-space: nowrap;
  }
#custom-text p, #custom-text .page-content.page-cms ul, .page-content.page-cms #custom-text ul {
  font-size: 0.9rem;
  font-weight: 500;
  color: #232323;
}
/* Abstände Textfeld Kategorie */
html body#category.lang-de.country-de.currency-eur.layout-left-column.page-category.tax-display-enabled.category-id-2.category-gesamtubersicht.category-id-parent-1.category-depth-level-1 main section#wrapper div.container div#content-wrapper.js-content-wrapper.left-column.col-xs-12.col-sm-8.col-md-9 section#main div#js-product-list-header div.block-category.card.card-block h1.h1 {
  margin-bottom: .7rem;
  } 
html body#category.lang-de.country-de.currency-eur.layout-left-column.page-category.tax-display-enabled.category-id-2.category-gesamtubersicht.category-id-parent-1.category-depth-level-1 main section#wrapper div.container div#content-wrapper.js-content-wrapper.left-column.col-xs-12.col-sm-8.col-md-9 section#main div#js-product-list-header div.block-category.card.card-block div.block-category-inner div#category-description.text-muted p {
   margin: 0 0 .5rem 0 ;
}
/* Textfeld auf Kategorieseiten passt sich an Inhalt an */
.block-category {
  margin: 0 0 .5rem 0;
  min-height: auto;
  padding-bottom: 1rem;
  /* display: inline-block; Passt die Breite an den Inhalt an */
  display: block; 
  }

@media (min-width: 100px) and (max-width: 767px) {
.block-category {
  margin: 0;
  min-height: auto;
  padding: 0;
  display: inline-block; /* Passt die Breite an den Inhalt an */
  }
}
/* Menü weniger Abstände */
.sf-menu {
  float: left;
  margin-bottom: 0;
}
/* Headline Highlights ändern 2 Tags */
#products .products-section-title, .featured-products .products-section-title, .product-accessories .products-section-title {
  margin: 0 0 1rem 0;
  font-weight: 500;
  color: #333;
  text-align: center;
} 
.sf-menu {
  position: relative;
  padding: 0;
  width: 100%;
  border-left: 1px solid #e9e9e9;
  border-right: 2px solid #e9e9e9;
  border-bottom: 0px solid #e9e9e9;
  background: aliceblue;
}
.sf-menu > li {
  border-left: 0px solid #e9e9e9;
  border-right: 0px solid #e9e9e9;
} 
.sf-menu > li > a {
  font: 600 16px/22px "Open Sans", sans-serif;
  text-transform: none;
  display: block;
  padding: 7px 10px;
  border-left: 0px solid #e9e9e9;
  border-right: 2px solid #e9e9e9;
}
.text-uppercase {
   text-transform: none !important;
}
/* links im Text blau */
#custom-text p a {
  color: #24b9d7;
  text-decoration: none;
} 
  /* Sitz des großen Artikelbild im Container Artikelbilder anpassen 
.img-fluid {
  margin-left: 15px;
  margin-right: 15px;
}
/* Artikleseite Foto vergrößern RolloverLink mit Lupe abschalten */
.product-cover .layer .zoom-in {
    display: none !important;
}
/* Artikleseite Foto vergrößern Layer Rollover abschalten */
.product-cover .layer {
    display: none !important;
}
/* Container Artikelbilder auf 452px breite begrenzen, weil ich in der "product-cover-thumbnails.tpl" veranlasst habe, dass die Bilder medium_default mit 452px geladen werden und nicht mehr die großen "large_defaut" Bilder mit 800px 
#product #content {
  position: relative;
  max-width: 452px;
  margin: 0 auto;
} */
.control-label {
  font-size: .9rem;
}
/* Button Warenkorob ändern */
.btn-primary, .btn-secondary, .btn-tertiary {
  padding: 0.5rem 1.25rem;
  padding-top: 0.5rem;
  font-size: .9rem;
  font-weight: 500;
  text-transform: none;
}
/* Auf Artikelseite: Button "zum Warenkorb" Klickbarkeit abschalten - wenn nur one Click bestellung über PayPal gewünscht 
.add-to-cart {
  pointer-events: none;
} */
/* Warenkorb Pictogramm ausblenden bei Warenkorb Artikelseite (wahrscheinlich Global) 
.material-icons.shopping-cart {
  display: none;
} */
/* Warenkorb Button oben unter Banner zum Checkout Abschalten und Ausblenden - ist aber auch durchs abschalten Warenkorb Modul deaktiviert 
#_desktop_cart {
  pointer-events: none;
  display: none;
} */
/* Blendet "Einkauf fortsetzen" Button auf Warenkorbseite aus 
a.label:nth-child(2)  {
  pointer-events: none;
  display: none;
} */

.card-block.cart-summary-totals {
  padding: 0 1.25rem;
}
.card-block.checkout {
  padding-top: 0;
  padding-bottom: 0;
  height: fit-content;
  min-height: 40px;
}
.input-color:checked + span, .input-color:hover + span, .input-radio:checked + span, .input-radio:hover + span {
  border: 2px solid #24b9d7;
 }

/* Platz unter PayPal Button Warenkorbseite (oben unten) */
#main div.cart-grid.row div.cart-grid-right.col-xs-12.col-lg-4 div.card.cart-summary div.checkout.cart-detailed-actions.js-cart-detailed-actions.card-block div.text-sm-center div {
  margin: 7px 0 -2px 0;
} 
#main div.row.product-container.js-product-container div.col-md-6 div.product-information div.blockreassurance_product {
    margin-top: -15px;
}
 /* ID spezifische Regeln in CSS umgehen */
/* die individuelle Regel für den Produkt Short Text, der normal nur mit der Artikel ID verbunden ist, wird hier für alle IDs geschrieben - sehr guter und wichtiger Code */
#main div.row.product-container.js-product-container div.col-md-6 div.product-information div[id^="product-description-short-"].product-description p {
  color: #000 !important;
}
/* Einstellung für Text Produkt-Beschreibung lang auf Artikelseite */
.product-information div.tabs div#tab-content.tab-content div#description.tab-pane.fade.in.active.js-product-tab-active div.product-description p {
  font-size:  0.9375rem !important;
  font-weight: 400 !important;
  color: #000 !important;
  line-height: 1.5;
}
/* Einstellung für die Text-Überschriften custom-reassurance-block auf Artikelseite */
#main div.row.product-container.js-product-container div.col-md-6 div.product-information div.blockreassurance_product div span.block-title {
  font-size: .9rem !important;
  font-weight: 400 !important;
  color: #000 !important;
}
.product-quantity > div:nth-child(12) {
  float: right;
  margin: 0 0 0 0;
}

.blockreassurance_product > div:nth-child(1) > p:nth-child(3) {
  font-size: .9rem !important;
  font-weight: 400 !important;
  color: #000 !important;
}
.blockreassurance_product {
  font-size: .9rem !important;
  font-weight: 400 !important;
  color: #000 !important;
}
/* Einstellung für die Text-Link des custom-reassurance-block auf Artikelseite */
#main div.row.product-container.js-product-container div.col-md-6 div.product-information div.blockreassurance_product div p {
  font-size: 0.9rem !important;
  font-weight: 400 ;
  color: #24b9d7 ;
}

/* bewirkt auf der Artikelseite, dass die Felder ArtikelInfo, nach Ende des Bildcontainers, sich über die ganze Breit der Seite erstrecken. Die 4 folgenden Tags regeln das Verhalten der Einblendungen: .blockreassurance_product, .social-sharing, .tabs */
/*
.product-container > div:nth-child(2) {
    float: none;
    width: auto; 
  } 
.col-md-6 h1.h1 {
  float: right;
  width: 50%;
  display: block;
  clear: right;
} 
.product-prices {
  float: right;
  width: 50%;
  display: block;
  clear: right;
} 
#product-description-short-7 {
  float: right;
  width: 50%;
  display: block;
  clear: right;
} 
.product-actions {
  float: right;
  width: 50%;
  display: block;
  clear: right; // Fügt eine 'clear' Eigenschaft hinzu, um sicherzustellen, dass nachfolgende Elemente unter diesem Element angezeigt werden 
} 
#main div.cart-grid.row div.cart-grid-right.col-xs-12.col-lg-4 div.blockreassurance_product {
  float: right;
  width: 100%;
  display: block;
  clear: right;
 } 
#wrapper div.container div#content-wrapper.js-content-wrapper section#main div.row.product-container.js-product-container div.col-md-6 div.product-information div.blockreassurance_product {
  float: right;
  width: 50%;
  display: block;
  clear: right;
 } 

.tabs  {
    float: right;
    width: 100%;
    max-width: auto;
    display: block;
    clear: right;
  } 
  .product-features {
  width: 33%;
  max-width: auto;
  margin-top: 1.25rem;
  margin-left: 0.3125rem;
}
/* das float: none des Produkt-Containers 2 rechts, hatte die Links der Thumbnails abgeschaltet. Mit z-index: 1; eine habe ich die Produktbilder in der Hirachie nach vorn gestellt und die Links gehen wieder. */
 /*
.social-sharing  {
    width: 235px;
    padding: 5px 15px 2px 18px;
    margin-right: 10px;
    background: lightblue;
    border-radius: 25px;
  }
 .product-prices div {
  margin-bottom: 0.25rem;
}
p, .page-content.page-cms ul {
  font-size: .9rem;
  color: #333;
  margin-bottom: .75rem;
} 
/* Korrigiert die Darstellung von .col-md-7 exklusiv für das Popup-Fenster "Artikel wurde in den Korb gelegt" */ 
#blockcart-modal.modal.fade.in div.modal-dialog div.modal-content div.modal-body div.row div.col-md-7 {
    float: right;
    width: inherit;
    max-width: inherit;
  }
/* Ausblenden des Headers mit Menü in Top auf der Warenkorbseite 
html body#cart.lang-de.country-de.currency-eur.layout-full-width.page-cart.tax-display-enabled main header#header div.header-top {
  pointer-events: none;
  display: none;
} */
/* Abschalten des Bannerlinks auf die Indexseite von der Warenkorbseite 
html body#cart.lang-de.country-de.currency-eur.layout-full-width.page-cart.tax-display-enabled main header#header div.header-banner {
  pointer-events: none;
} */
/* Abschalten des Artikel-Links der zurück zum Artikel der im Warenkorb ist führt 
#main div.cart-grid.row div.cart-grid-body.col-xs-12.col-lg-8 div.card.cart-container div.cart-overview.js-cart ul.cart-items li.cart-item div.product-line-grid div.product-line-grid-body.col-md-4.col-xs-8 div.product-line-info {
  pointer-events: none;
} */
/* Abschalten der Leiste: "Als Gast bestellen" oder "Eröffnen sie ein Konto" & Anmelden auf der Checkout Seite 
html body#checkout.lang-de.country-de.currency-eur.layout-full-width.page-order.tax-display-enabled main section#wrapper div.container div#content-wrapper.js-content-wrapper section#content div.row div.cart-grid-body.col-xs-12.col-lg-8 section#checkout-personal-information-step.checkout-step.-current.-reachable.js-current-step.-clickable div.content ul.nav.nav-inline.my-2 {
  pointer-events: none;
  display: none;
} */
/* die nächsten drei Regeln schalten den Content vom Checkout ab, behalten aber die Warenkorb-Anzeige & den Paypal Button - das ist nötig weil ich die checkout Seite nicht direkt abschalten kann 
html body#checkout.lang-de.country-de.currency-eur.layout-full-width.page-order.tax-display-enabled main section#wrapper div.container div#content-wrapper.js-content-wrapper section#content div.row div.cart-grid-body.col-xs-12.col-lg-8 section#checkout-personal-information-step.checkout-step.-current.-reachable.js-current-step.-clickable div.content div.tab-content {
  pointer-events: none;
  display: none;
} */
/*
html body#checkout.lang-de.country-de.currency-eur.layout-full-width.page-order.tax-display-enabled main section#wrapper div.container div#content-wrapper.js-content-wrapper section#content div.row div.cart-grid-body.col-xs-12.col-lg-8 section#checkout-personal-information-step.checkout-step.-current.-reachable.js-current-step.-clickable div.content div.tab-content div#checkout-guest-form.tab-pane.active {
  pointer-events: none;
  display: none;
} */
/*
html body#checkout.lang-de.country-de.currency-eur.layout-full-width.page-order.tax-display-enabled main section#wrapper div.container div#content-wrapper.js-content-wrapper section#content div.row div.cart-grid-body.col-xs-12.col-lg-8 section#checkout-personal-information-step.checkout-step.-current.-reachable.js-current-step.-clickable div.content div.tab-content div#checkout-guest-form.tab-pane.active form#customer-form.js-customer-form {
  pointer-events: none;
  display: none;
  */
}  /* Blendet im selben Checkout das Eingabefeld "Persönliche Daten" aus 1 
html body#checkout.lang-de.country-de.currency-eur.layout-full-width.page-order.tax-display-enabled main section#wrapper div.container div#content-wrapper.js-content-wrapper section#content div.row div.cart-grid-body.col-xs-12.col-lg-8 section#checkout-personal-information-step.checkout-step.-current.-reachable.js-current-step.-clickable h1.step-title.js-step-title.h3 {
  pointer-events: none;
  display: none;
} */
 /* Blendet im selben Checkout das Eingabefeld "Persönliche Daten" aus 2 
html body#checkout.lang-de.country-de.currency-eur.layout-full-width.page-order.tax-display-enabled main section#wrapper div.container div#content-wrapper.js-content-wrapper section#content div.row div.cart-grid-body.col-xs-12.col-lg-8 section#checkout-personal-information-step.checkout-step.-reachable.-complete.-clickable {
  pointer-events: none;
  display: none;
} */
 /* Blendet im selben Checkout das Addressfeld und das Bezahlfeld aus 
#checkout-addresses-step, #checkout-payment-step {
  pointer-events: none;
  display: none;
} */
/* Blendet im selben Checkout das Feld Versandart aus 
html body#checkout.lang-de.country-de.currency-eur.layout-full-width.page-order.tax-display-enabled main section#wrapper div.container div#content-wrapper.js-content-wrapper section#content div.row div.cart-grid-body.col-xs-12.col-lg-8 section#checkout-delivery-step.checkout-step.-unreachable {
  pointer-events: none;
  display: none;
} */
/* Ausblenden und Abschalten des Buttons "zur Kasse" auf Warenkorb-Seite - in zwei Tags (funktioniert evt. auch einzelnd 
.text-sm-center a.btn.btn-primary {
  display: none;
} */
/*
button.btn.btn-primary.disabled {
  pointer-events: none;
  display: none;
} */

/* Paganierung Abstand zu Artikel-Thumbnails auf Kategorie Seiten kleiner */
.products-selection {
  margin-bottom: 0;
}
html body#product.lang-de.country-de.currency-eur.layout-full-width.page-product.tax-display-enabled.product-id-7.product-02-03-2021-20h-central-park-duo-simon-and-garfunkel-tribute-roadhouse-schwerte.product-id-category-3.product-id-manufacturer-0.product-id-supplier-1.product-available-for-order main section#wrapper div.container div#content-wrapper.js-content-wrapper section#main div.row.product-container.js-product-container div.col-md-6 div.product-information div.product-actions.js-product-actions form#add-to-cart-or-refresh div.product-add-to-cart.js-product-add-to-cart p.product-minimal-quantity.js-product-minimal-quantity {
  margin: 0;
  padding: 0;
}
html body#product.lang-de.country-de.currency-eur.layout-full-width.page-product.tax-display-enabled.product-id-7.product-02-03-2021-20h-central-park-duo-simon-and-garfunkel-tribute-roadhouse-schwerte.product-id-category-3.product-id-manufacturer-0.product-id-supplier-1.product-available-for-order main section#wrapper div.container div#content-wrapper.js-content-wrapper section#main div.row.product-container.js-product-container div.col-md-6 div.product-information div.product-actions.js-product-actions form#add-to-cart-or-refresh div.product-add-to-cart.js-product-add-to-cart div.product-quantity.clearfix div {
  margin: 0;
  padding: 0;
}
/* Überschrift Warenkorb auf Warenkorb-Site kleiner - Text wir dann zusätzlich bei der Übersetzung im Backend angepasst */
.cart-grid-body .card-block h1 {
  margin-bottom: 0;
  font-size: .9rem;
  font-weight: 500;
} 

#left-column.col-xs-12.col-sm-4.col-md-3 {
  padding-left: 0;
  display: none;
}

@media (min-width: 768px) {
  .col-md-9 {
    float: left;
    width: auto;
  }
}

@media (min-width: 576px) {
  .col-sm-8 {
    float: left;
    width: auto;
  }
}

.product-miniature .thumbnail-container .product-thumbnail img {
  position: relative;
  display: block;
  max-width: 100%;
  height: auto;
  margin: auto;
  width: 100%;
}

#products div#js-product-list section#content.page-content.page-not-found {
  margin-bottom: 1.563rem;
  display: none;
}

/* Standard: auf allen Seiten ausblenden */
div#custom-text {
    display: none;
}

/* Ausnahme: auf der Indexseite anzeigen */
body#index div#custom-text {
    display: block;
}
/* Textfelder Kategorien max 800px */ 
#js-product-list-header {
  max-width: 800px;
}