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

 /* hier wollte Paypal eine Banner einschalten, über "https://lydia-kirchengemeinde.de/modules/paypal/views/css/paypal_fo.css". Das habe ich abgeschaltet. */ 
#index [paypal-messaging-banner], #category [paypal-messaging-banner] {
  display: none;
}

/* Anpassungen Betreffs Fotogalerie nur für Seite Ekkis Verabschiedung */
@media (min-width: 768px) {
  body.product-id-202 .col-md-6 {
    float: none !important;
    width: 100% !important;
  }
}
body#product.lang-de.country-de.currency-eur.layout-full-width.page-product.tax-display-disabled.product-id-202.product-verabschiedung-pfarrers-ekkehard-brach-beim-gottesdienst-am-28-9-2025-mit-fotogalerie.product-id-category-27.product-id-manufacturer-0.product-id-supplier-0 main section#wrapper div.container div#content-wrapper section#main div.row.product-container div.col-md-6 section#content.page-content {
  position: relative !important;
  max-width: 800px !important;
  margin: 0 auto !important;
}
html body#product.lang-de.country-de.currency-eur.layout-full-width.page-product.tax-display-disabled.product-id-202.product-verabschiedung-pfarrers-ekkehard-brach-beim-gottesdienst-am-28-9-2025-mit-fotogalerie.product-id-category-27.product-id-manufacturer-0.product-id-supplier-0 main section#wrapper div.container div#content-wrapper section#main div.row.product-container div.col-md-6 section#content.page-content div.images-container div.product-cover div.layer.hidden-sm-down {
  display: none;
 }

/* iframe Höhe Lydia-Site Gottesdienste (funktioniert nicht?), weil wird zZ. im js geregelt  */
.iframe35 {
    height: 750px !important;
} 

/*auf Seite Lydia Gottesdienst die Artikel über Costumtext anzeigen - wieder abgeschaltet
/* Das übergeordnete Element als Flexbox anzeigen 
body.category-id-35 #main {
    display: flex;
    flex-direction: column;
}
/* Die Reihenfolge der Elemente ändern 
body.category-id-35 #products {
    order: 1; /* Höhere Priorität */
}
/*
body.category-id-35 #js-product-list-header {
    order: 2; /* Niedrigere Priorität */
}

/* Einblenden der Social Media Links Lydia im Custom Textfeld nur bei Mobilansicht */
/* Gleichzeitig Ausblenden der Social Media Links in der rechten Columne bei Mobilansicht */
@media (max-width: 766px) {
    .social-media-table {
        display: block;
    }

html body#index.lang-de.country-de.currency-eur.layout-right-column.page-index.tax-display-disabled main section#wrapper div.container div#right-column.col-xs-12.col-sm-4.col-md-3 div.column-social-links {
        display: none;
    }
}
@media (min-width: 767px) {
    .social-media-table {
        display: none;
    }

html body#index.lang-de.country-de.currency-eur.layout-right-column.page-index.tax-display-disabled main section#wrapper div.container div#right-column.col-xs-12.col-sm-4.col-md-3 div.column-social-links {
        display: block;
    }
}

/* Bei Artikel Joe Headline ausgeblendet */
html body#product.lang-de.country-de.currency-eur.layout-full-width.page-product.tax-display-disabled.product-id-150.product-ig-dalei-dali-interessen-gemeinschaft-interaktions-gestaltung-fur-regenerativ-kulturen.product-id-category-2.product-id-manufacturer-0.product-id-supplier-0 main section#wrapper div.container div#content-wrapper section#main div.row.product-container div.col-md-6 h1.h1 {
  display: none;
}
/* Ausblenden des Button "weitere Angebote & Termine" auf der Startseite unter den Artikel der zu "Gesammtübersicht führt */
html body#index.lang-de.country-de.currency-eur.layout-full-width.page-index.tax-display-disabled main section#wrapper div.container div#content-wrapper section#main section#content.page-home section.featured-products.clearfix a.all-product-link.float-xs-left.float-md-right.h4 {
  display: none;
}
html body#index.lang-de.country-de.currency-eur.layout-right-column.page-index.tax-display-disabled main section#wrapper div.container div#content-wrapper.right-column.col-xs-12.col-sm-8.col-md-9 section#main section#content.page-home section.featured-products.clearfix a.all-product-link.float-xs-left.float-md-right.h4 {
  display: none;
}

.breadcrumb > ol:nth-child(1) > li:nth-child(3) > a:nth-child(1) > span:nth-child(1),
.breadcrumb > ol:nth-child(1) > li:nth-child(4) > a:nth-child(1) > span:nth-child(1) {
  display: none;
}

.container {
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  padding-right: 0;
}

@media (min-width: 1200px) {
  .container {
    width: 1140px;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 1199px) {
  .container {
    width: 95%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 991px) {
  .container {
    width: 96%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 767px) {
  .container {
    width: 98%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 575px) {
  .container {
    width: 98%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
}


/* Regeln für den Iframes in der rechten Columne */
/* Sicherstellen, dass der Container des iframes das Layout korrekt handhabt */
/* Allgemeine Styles für die right-column */
    #right-column {
    overflow: hidden;
    position: relative;
    }

/* Responsive iframe */
@media (min-width: 768px) {
    #eventFrame {
    width: 100%;
    overflow-y: scroll;
    }
}
/* Spezifische Styles für die Mobilansicht */
@media (max-width: 767px) {
    #eventFrame {
    width: 100%;
    overflow-y: scroll;
    }
}

/* Container des iframe rechts, der in der mobilansicht unter den hauptcontent springt und der sich dann an die Bildschirmbreite anpassen darf. */ 
@media (max-width: 767px) {
  .col-sm-4 {
    float: left;
    width: 98%;
    height: auto;
  /*  max-height: 400px; */
    overflow-y: scroll;
  }
}
/* mobil: Abstand footer-inhalt 5px - war auf null */ 
@media (max-width: 767px) {
  .footer-container .wrapper {
    padding-left: 5px !important;
    padding-right: 5px !important;
  }
}
/* footer- menü Rechtliches etwas breiter, damit die Schrift nicht in zwei Zeilen springt bei mobil */
@media (min-width: 768px) {
  .col-md-2 {
    float: left;
    width: 25%;
  }
}
/* Werbebild in Mobilansicht abgeschaltet - Kirche innen */
@media (max-width: 767px) {
  .advertising-block img {
    display: none;
  }
}

/* Bild 2 Kirche nach Werbebilde in Mobilansicht abgeschaltet */
@media (max-width: 767px) {
  #wrapper div.container div#right-column.col-xs-12.col-sm-4.col-md-3 div.advertising-block::after {
    display: none;
  }
}

/* Zurücksetzen für größere Bildschirme */
@media (min-width: 768px) {
  .advertising-block img {
    display: block; /* Oder eine andere passende Anzeigeeigenschaft */
  }

  #wrapper div.container div#right-column.col-xs-12.col-sm-4.col-md-3 div.advertising-block::after {
    display: block; /* Oder zurücksetzen auf 'display: block;' je nach Bedarf */
  }
}
/*
@media (min-width: 768px) {
  .col-sm-8 {
    float: left;
    width: 66.66667%;
  }
} */

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

/* iframe Gottesdienste in Mobil-Ansicht – neue Struktur */
@media (max-width: 768px) {
  html body#category.lang-de.country-de.currency-eur.layout-right-column.page-category.tax-display-disabled.category-id-35.category-gottesdienste-liste.category-id-parent-77.category-depth-level-4 
  main section#wrapper div.container 
  div#right-column.col-xs-12.col-sm-4.col-md-3 
  p iframe#eventFrame {
    height: auto !important;
    min-height: 500px !important;
    /* overflow: auto; */
  }
}

/* Willkommensbanner auf der Index Seite Start Lydia, ersetzen des Bild nur auf der Indexseite */
/* Ersetzen des Bannerbilds nur auf der Indexseite */
#index.lang-de.country-de.currency-eur.layout-right-column.page-index.tax-display-disabled main header#header div.header-top div.container div.row div.col-md-10.col-sm-12.position-static a.banner img.img-fluid {
    content: url("https://pauluskirche.net/img/cms/Lydia/banner-pk-lydia-top-master-1.png") !important;
}

/* Hintergrundfarbe des Hauptconten mitte */
#wrapper {
  background: #f6f6f6;
}
/* Bei Bildschirmgrößen über 600px, nur zwei Artikel pro Zeile Kategorie-Seite Pfarrteam */
@media (min-width: 600px) {
#category.lang-de.country-de.currency-eur.layout-right-column.page-category.tax-display-disabled.category-id-34.category-pfarrteam.category-id-parent-41.category-depth-level-4 main section#wrapper div.container div#content-wrapper.right-column.col-xs-12.col-sm-8.col-md-9 section#main section#products div div#js-product-list div.products.row div.product {
        width: 50%;
        display: flex;
        justify-content: space-around;
    }
}

/* Ausblenden des Iframes und der Überschrift auf bestimmten Seiten, hier Gottesdienste-Liste */
#category.lang-de.country-de.currency-eur.layout-right-column.page-category.tax-display-disabled.category-id-35.category-gottesdienste-liste.category-id-parent-77.category-depth-level-4 
main section#wrapper div.container div#right-column.col-xs-12.col-sm-4.col-md-3 p iframe#eventFrame,
#category.lang-de.country-de.currency-eur.layout-right-column.page-category.tax-display-disabled.category-id-35.category-gottesdienste-liste.category-id-parent-77.category-depth-level-4 
main section#wrapper div.container div#right-column.col-xs-12.col-sm-4.col-md-3 h6.event-heading {
    display: none !important;
}

/* Ausblenden von iFrame und Überschrift auf bestimmten Seiten */
body.category-kindergarten iframe#eventFrame,
body.category-kindergarten h6.event-heading,
body.category-pfarrteam iframe#eventFrame,
body.category-pfarrteam h6.event-heading,
body.category-gemeindeburo iframe#eventFrame,
body.category-gemeindeburo h6.event-heading,
body.category-kusterin iframe#eventFrame,
body.category-kusterin h6.event-heading,
body.category-gemeinde-netzwerk iframe#eventFrame,
body.category-gemeinde-netzwerk h6.event-heading {
    display: none !important;
}

/* Blendet das Bild Werbung (Columne links) aus bei Bildschirm unter 768px, wenn auch die linke Columne ausgeblendet vom System ausgeblendet wird.  
@media (max-width: 768px) {
  .advertising-block {
  display: none !important ;
  }
}
/* Ausblenden des advertising-block (Block Werbung (Bild Kirche)) standardmäßig */
.advertising-block {
    display: none;
}
/* Einblenden des advertising-block (Block Werbung (Bild Kirche)) auf den Seiten, auf denen p iframe#eventFrame und h6.event-heading ausgeblendet sind */
#category.lang-de.country-de.currency-eur.layout-right-column.page-category.tax-display-disabled.category-id-34.category-pfarrteam.category-id-parent-41.category-depth-level-4 .advertising-block,
html body#category.lang-de.country-de.currency-eur.layout-right-column.page-category.tax-display-disabled.category-id-51.category-gemeindeburo.category-id-parent-41.category-depth-level-4 .advertising-block, 
#category.lang-de.country-de.currency-eur.layout-right-column.page-category.tax-display-disabled.category-id-35.category-gottesdienste-liste.category-id-parent-77.category-depth-level-4 .advertising-block,
#category.lang-de.country-de.currency-eur.layout-right-column.page-category.tax-display-disabled.category-id-20.category-kindergarten.category-id-parent-61.category-depth-level-3 .advertising-block,
#category.lang-de.country-de.currency-eur.layout-right-column.page-category.tax-display-disabled.category-id-53.category-kusterin.category-id-parent-41.category-depth-level-4 .advertising-block,
#category.lang-de.country-de.currency-eur.layout-right-column.page-category.tax-display-disabled.category-id-12.category-gemeinde-netzwerk.category-id-parent-61.category-depth-level-3 .advertising-block {
  display: block;
}

/* Einfügen eines zusätzlichen Bildes unter das vorhandene Werbebild im Modul "Block Werbung" */
#wrapper div.container div#right-column.col-xs-12.col-sm-4.col-md-3 div.advertising-block::after {
    /* Inhaltsbefüllung für das Pseudo-Element */
    content: "";
    /* Blockelement anzeigen */
    display: block;
    /* Hintergrundbild einfügen und zentrieren */
    background: url("https://lydia-kirchengemeinde.de/img/cms/Lydia/Denkmalbehoerde_Dortmund-Guenther_Wertz-AUSSEN-640x956-hoch.jpg") no-repeat center center;
    /* Hintergrundbild skalieren, um vollständig im Element zu passen */
    background-size: contain;
    /* Höhe des Pseudo-Elements relativ zum Container einstellen */
    padding-bottom: 150%;
    /* Abstand oberhalb des Pseudo-Elements einstellen */
    margin-top: 15px; 
}

/* Überschrift der Iframes ekvw */
.event-heading {
  padding: 0 0 0 9px;
  margin-bottom: 2.5px;
}
h6 {
  margin-bottom: .5rem;
  font-weight: 700;
  line-height: 1.3;
}
.social-sharing {
    margin: 10px 0 0 0;
}
/* Ermöglicht das Popup Image im Textfeld Kategorie (2 Tags) - dazu gibt es noch ein javascript im custom.js das damit korrospondiert */ 
#popupImage {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.8);
}
/* plaziert das Popup vom Bild in der Mitte */ 
#popupImage img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 100%;
  max-height: 100%;
}
/* Der Tooltipp für das Popup Bild korrospondiert auch mit dem Custom.js */
#tooltip {
  visibility: hidden;
  position: absolute;
  background-color: white;
  color: black;
  text-align: center;
  padding: 5px;
  border: 1px solid #888;
  z-index: 10000;
}

html body#index.lang-de.country-de.currency-eur.layout-right-column.page-index.tax-display-disabled main section#wrapper div.container div#right-column.col-xs-12.col-sm-4.col-md-3 h4 {
    margin-top: 10px;
}
.block-category.card.card-block div.block-category-inner div#category-description.text-muted {
  width: 100%;
} 
#content-wrapper.right-column.col-xs-12.col-sm-8.col-md-9 {
    margin-left: 0px;
    padding-left: 0px;
}
#right-column.col-xs-12.col-sm-4.col-md-3 {
    padding-right: 0px;
    padding-left: 0px;
    margin-right: 0px;
    margin-left: 0px;
}
.block-category.card.card-block {
    margin-right: 5px;
}

/* Bilder im Textfeld Kategorieseiten werden an den Rahmen Container angepasst, damit sie nicht überlappen. 
.block-category img {
  max-width: 100%; /* Maximale Breite auf 100% setzen 
  height: auto; /* Höhe automatisch anpassen 
} */

/* Artikelbild Thumbnail auf Kategorieseiten dockt an das Artikeltextfeld an *
#products .thumbnail-container .product-thumbnail img, .featured-products .thumbnail-container .product-thumbnail img, .product-accessories .thumbnail-container .product-thumbnail img, .product-miniature .thumbnail-container .product-thumbnail img {
  max-width: 100%;
  position: absolute;
  top: inherit;
  bottom: 0;
  left: 0;
  right: 0;
  margin: none;
} */
/* Schaltet den Sammelordner in der Brotkrümmelnavigation ab und zweiter Tag schaltet die content: "/"; aus mit Hilfe von "" */
.breadcrumb > ol:nth-child(1) > li:nth-child(2) > a:nth-child(1) > span:nth-child(1) { 
  display: none;
  }
  #wrapper .breadcrumb li::after {
  content: "";
  color: #7a7a7a;
  margin: .3125rem;
}

/* schaltet den Link bei Lydia auf "veranstaltung" ab. */
.sf-menu > li > a[href="https://lydia-kirchengemeinde.de/73-veranstaltungen"] {
    pointer-events: none;
}
/* schaltet den Link bei Lydia auf "ansprechpartner-kontakt" ab. */
.sf-menu > li > a[href="https://lydia-kirchengemeinde.de/41-ansprechpartner-kontakt"] {
    pointer-events: none;
}

/* Ausblenden der Artikel Nav "Beschreibung und Artiklenummer (als "-" dargestellt) */
.product-information .tabs ul.nav.nav-tabs { 
  display: none;
  }
/* wenn Produkt Details, also ID, aktiv wird - wird es ausgeblendet */
#product-details.tab-pane.fade.in.active {
    display: none !important;
}
/* Blendet das Textfeld Produktbeschreibung aus wenn es keinen Inhalt hat */
.tabs {
  box-shadow: none;
  margin-top: 0;
  background: none;
  padding: 0;
}
/* erzeugt die Formatierung des Textfeldes bei den Produktseiten anhand der Produktbeschreibung, weil diese Formatierung für .tab hier drüber abgeschalter wurde. */ 
#description.tab-pane.fade.in.active {
  box-shadow: 2px 2px 8px 0 rgba(0,0,0,.2);
  margin-top: 0;
  background: #fff;
  padding: 1.25rem 1.875rem .5rem 1.875rem;
  margin-bottom: 1.5rem;
}

/* Macht das Artiklebild und seine Bildergalerie groß auf den Produktseiten 
#product #content {
  position: relative;
  max-width: 100%;
  margin: auto;
} 
/* Schaltet den Overlayer mit der Möglichkeit die Artikelbilder mit der Bilder-Galerie zu vergößern ab. 
.product-cover .layer {
  display: none;
}
/* Klappt alle collapsed auf, also auch das Submenü in Menü 2 in der Columne Links */
/* Stil für Desktop-Geräte */
.collapse {
  display: block;
}
/* Öffnet alle Untermenüs in der mobilen Ansicht */
@media (max-width: 767px) {
  .menu-mobile {
    display: block;
  }
}
/* Verringert den Abstand der Custom Textfelder nach unten */ 
.block-category {
  min-height: 5rem; 
  padding-bottom: .9rem;
  margin-bottom: 1.5rem;
}
/* Korrigiert den Abstand der Textumbrücke in den Customtexten bei p auf 0.5rem - Betrifft nicht die Start Index Seite */ 
.block-category .block-category-inner #category-description p:first-child {
  margin-bottom: 0.5rem;
}
/* Navigation oben über Banner ganz ausgeblendet (Abstand Banner nach oben etwas verringert von 30 auf 15) */
.header-nav { 
  display: none ;
  }
/* Lydia & Klima Allianz: verbreitert die Ansicht breite des Content auf 1280px oder wenn Fenster kleiner auf min. 100% */ 
/* zurückgesetzt, weil Artikel zu eng aneinander bei Kategorie ohne Columne links 
.container {
  margin-top: 15px ;
  width: 1280px;
  max-width: 100%;
}
/* Verringert etwas den Abstand des Hauptmenüs nach unten - damit alles kompakter wird */
.sf-menu {
  float: left;
  margin-bottom: .1rem;
}
/* Submenü des Hauptmenüs Schrift etwas fetter */
.sf-menu ul {
  font-weight: 600 !important ;
  color: #2fb5d2;
 }
 /* Felder Breite des Submenü etwas kleiner von 300 auf 250px */
 .sf-menu li li {
  padding-left: 20px ;
  width: 250px;
}
/* Korrigiert den Abstand der Textumbrüche in den Customtexten bei p auf 0.5rem - Betrifft nicht die Start Index Seite */ 
.block-category .block-category-inner #category-description p { 
  margin-bottom: .5rem;
}
/* verkleinert die großen Abstände oben und unten im Textfeld im mittleren Contentbereich */
 #custom-text { padding: 2rem 3.125rem 1rem 3.125rem; }
/* verkleinert die großen Abstände auch links und recht bei mobil Ansicht im Textfeld im mittleren Contentbereich */
@media (max-width: 768px) {
    #custom-text { padding: 1rem 1.5rem 0.4rem 1.5rem; 
    }
}
/* nur für Normalansicht - verkleinert den großen Abstand zwischen Header und Customtext etwas, aber nicht so stark wie in der mobil Ansicht */
#wrapper {
  padding-top: .9rem;
}
/* nur für mobil Ansicht - verkleinert den großen Abstand zwischen Header und Customtext - in Normalansicht wird der Platz jedoch benötigt */
@media (max-width: 768px) {
#wrapper {
  padding-top: .3rem;
}
a:hover {
  color: #85388e;
  text-decoration: none;
  }
}
#wrapper .breadcrumb li a:hover {
  color: #85388e;
}
/* Roll over Farbe bei Button unten rechts "weitere Angebote & Termine" */
#products .all-product-link:hover, .featured-products .all-product-link:hover, .product-accessories .all-product-link:hover, .product-miniature .all-product-link:hover {
  text-decoration: none;
  color: #85388e;
}
/* Text Link: "weitere Angebote & Termine" unten kleiner */ 
#products .all-product-link, .featured-products .all-product-link, .product-accessories .all-product-link, .product-miniature .all-product-link {
  clear: both;
  font-size: 1.1rem;
  color: #555555;
  font-weight: 700;
  margin-top: 1.5rem;
  margin-bottom: 0;
}
/* Roll over Farbe bei den Artikeltexten Links in den Produkt Thumbnails */
#products .product-title a:hover, 
.featured-products .product-title a:hover, 
.product-accessories .product-title a:hover, 
.product-miniature .product-title a:hover {
  color: #85388e;
}
/* Text Produktbeschreibung dunkler & Text etwas fetter */
#products .product-title a, .featured-products .product-title a, .product-accessories .product-title a, .product-miniature .product-title a {
  color: #232323;
  font-size: .875rem;
  text-decoration: none;
  text-align: center;
  font-weight: 600;
}
/* Alter code vor der bing Einstellung für die felxiblen Textfelder bei den ArtikelThumbnails */
/* Anpassung der größen für Textfeld im Artikel Thumbnail - 2 Tags 
#products .thumbnail-container, .featured-products .thumbnail-container, .product-accessories .thumbnail-container, .product-miniature .thumbnail-container
{ height:340px }
#products .thumbnail-container .product-thumbnail, .featured-products .thumbnail-container .product-thumbnail, .product-accessories .thumbnail-container .product-thumbnail, .product-miniature .thumbnail-container .product-thumbnail { height:250px }

/* Textfeld Produktbeschreibung Titel in Artikelfeld hoher setzten */
#products .product-title, .featured-products .product-title, .product-accessories .product-title, .product-miniature .product-title {
  text-align: center;
  text-transform: none;
  margin-top: .2rem;
}
 #products .product-description, .featured-products .product-description, .product-accessories .product-description, .product-miniature .product-description 
 {position: relative; padding-left: 0.3rem; padding-right: 0.3rem; }

 .mt-3 { margin-top: 0rem; margin-bottom: 1rem; }

 /* Lupe Vorschau bei Artikle aus  */
 .highlighted-informations { display:none !important; }

/* Keine Großbuchstaben am Wortanfang bei den Artikelbeschreibungen. Verhindert text-transform: capitalize; */
 #products .product-title, .featured-products .product-title, .product-accessories .product-title, .product-miniature .product-title 
 { text-transform: none !important }

/* Suchfeld über Artikel rechts abschalten */
.products-selection {
  display: none;
  }
/* Anpassung Schrift im Hauptmenü auf 17 statt 18px - Uppercase (Großbuchstaben) abschalten */
.sf-menu li a {
  font: 700 17px/16px "Open Sans",sans-serif;
  text-transform: none;
  color: #484848;
  padding: 14px 22px;
}
/* Artikel in mobil Ansicht mittig "center) Index-Seite */
@media (max-width: 768px)  {
#content-wrapper section#main section#content.page-home section.featured-products.clearfix div.products {
  display: flex;
  justify-content: center;
  align-items: center;
 } 
}
/* Artikel in mobil Ansicht mittig "center) Kategorie-Seite */
@media (max-width: 768px)  {
 #products .products {
  margin-top: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
 } 
}
 /* Höhe des Artikel Containers (Hightlights) auf der Startseite auf 2 Zeilen begrenzen - schaltet aber in der Handyansicht ab*/
@media (min-width: 576px) {
#content-wrapper section#main section#content.page-home section.featured-products.clearfix div.products {
  max-height: 725px;
  overflow: hidden;
  } 
} 
/* Verschiebt die breadcrumb "Brotkrümelnavigation" mehr nach rechts innen (damit sie nicht übersteht) */
#wrapper .breadcrumb ol {
  padding-left: 15px;
  margin-bottom: 0px;
}
/* Verschiebt die linke Columne mehr nach links */
.block-categories {
  box-shadow: 2px 2px 8px 0 rgba(0,0,0,.2);
  background: #fff;
  padding: 1.563rem 1.25rem;
  margin-left: -15px; 
  margin-bottom: 1.563rem;
}
/* Macht das Bild etwas größer (Bild Kirche Modul Block Werbung) in der rechten Kolumne, damit es zum Iframe passt */
.advertising-block {
  width: 102%; 
}
/* Verschiebt die rechte Columne (Textfeld Kategorie-Seite, Hauptcontent) mehr nach rechts */
.card-block {
  margin-right: -15px;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
/* erste versuche den Menüpunkt "Ansprechpartner & Kontakt zu deaktivieren. Klappt im Hauptmenü, aber nicht durchgängig für die Brotkrümmel Navigatiuon und das Submenu. Daher wird jetzt oben mit"a[href="https://lydia-kirchengemeinde.de/41-ansprechpartner-kontakt"]2 gearbeitet  
/* Link vom Menüpunkt "Ansprechpartner & Kontakt" abschalten, aber Rollover behalten (Betrifft Columne 10) 
#header div.header-top div.container div.row div.col-md-10.col-sm-12.position-static div#block_top_menu.sf-contener.clearfix.col-lg-12 ul.sf-menu.clearfix.menu-content.sf-js-enabled.sf-arrows li a.sf-with-ul  {
  pointer-events: none;
}
/* Links "Ansprechpartner & Kontakt" ebenfalls abgeschaltet in Menü 2 left columne 
.category-top-menu > li:nth-child(2) > ul:nth-child(1) > li:nth-child(2) > a:nth-child(1) {
  pointer-events: none;
}
/* Abschalten des Links "Ansprechpartner & Kontakt" in der breadcrumb "Brotkrümelnavigation" 
.breadcrumb > ol:nth-child(1) > li:nth-child(3) > a:nth-child(1) {
  pointer-events: none;
}
/* Klappt alle collapsed auf, also auch das Submenü in Menü 2 in der Columne Links */
.collapse {
  display: block;
}
/* vom Menü 2 columne links "+", "-" ausgeblendet weil Untermenüpunkte immer offen (2 folgende Tags) */
.block-categories .collapse-icons {
   display: none;
}
/* Block "In dieser Kategorie gibt es zur Zeit keine Angebote" ausblenden */
#content.page-content.page-not-found { display:none !important; }
/* "Powered by"unten Text etwas kleiner */
#footer div.footer-container div.container div.row div.col-md-12 p.text-sm-center a._blank {
  font-size: .8375rem;
  color: #555555;
}
/* Menü rollover green (nur für klima-allianz, geht weil Menü in Hock wide */
#header div#block_top_menu.sf-contener.clearfix.col-lg-12 ul.sf-menu.clearfix.menu-content.sf-js-enabled.sf-arrows li a:hover {
  text-decoration: none;
  color: rgb(75, 150, 75);
}

/* Demonstration Rollover Farbe Violet im Menü Vertikal in der Standard Class. Betrifft Lydia */
#header div.header-top div.container div.row div.col-md-10.col-sm-12.position-static div#block_top_menu.sf-contener.clearfix.col-lg-12 ul.sf-menu.clearfix.menu-content.sf-js-enabled.sf-arrows li a:hover {
  text-decoration: none;
  color: #85388e; /* vorher zum test 993399 */
} 

/* Banner und Menü auf die Volle Breite bringen (mit columne iframe) - 102% */
.col-md-10 {
  float: left;
  width: 100%;
}
/* Hauptmenü Abstand zum Logobanner */
#header div.header-top div.container div.row div.col-md-10.col-sm-12.position-static div#_desktop_top_menu.menu.js-top-menu.position-static.hidden-sm-down {
    margin-top: .7rem;
}
/* Vom Hauptmenü Abstand Submenü oben zum Hauptmenü Top (erster Tag für die indexseite und zweiter für die kategorieseiten */
/* muss aber für die Mobil-Ansicht abgeschaltet werden */
@media (min-width: 768px) {
.sf-menu li:Hover ul {
  top: 45px;
  } 
}
@media (min-width: 768px) {
.sf-menu li.sfHover ul {
  top: 45px;
  } 
}
/*Schrift anpassen: Größe, Farbe, Großbuchstaben abschalten */
.h1 {
  font-size: 1.1rem;
  text-transform: none;
  color: #232323;
}
/*Schrift anpassen: Farbe von h Headlines von Grau nach Black, Großbuchstaben abschalten */
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
  text-transform: none;
  color: #232323;
}
/* bringt die Funktion fett für den Text im custom textfeld - ist wohl regulär in PS abgeschaltet */
.block-category .block-category-inner #category-description strong {
  font-weight: 600;
  color: #232323;
}
/* Lesetext von Grau nach Schwarz */
p {
  font-size: .9375rem;
  color: #232323;
  font-weight: 400;
}
/* Textfeld HP Start & Custom Text etwas kleiner von 1.1em auf 1em */
#custom-text p {
  color: #232323;
  font-weight: 400;
  font-size: 1em;
}
/* Text im Footer von Grau auf Normal und Link wieder blau */
.footer-container li a {
  color: inherit;
  cursor: pointer;
  font-size: .875rem;
}

/* Logo ausblenden - veringert den Abstand des Banners oben */
div#_desktop_logo.col-md-2.hidden-sm-down { display:none; }

/* Titel bzw Punkte im Zusatzmenü ganz oben unsichtbar machen */
#header nav.header-nav div.container div.row div.hidden-sm-down div.col-md-5.col-xs-12 div.col-md-6.links div.row div.col-md-6.wrapper p.h3.hidden-sm-down 
{  visibility:hidden; }
#header nav.header-nav div.container div.row div.hidden-sm-down div.col-md-5.col-xs-12 {
  float: left;
  width: auto;
}
#header nav.header-nav div.container div.row div.hidden-sm-down div.col-md-5.col-xs-12 div.col-md-6.links {
  float: left;
  width: auto;
}

/* Einstellungen Artikelbeschreibung und ausblenden Preis */
/* Produkt-Preise und Steuer explizieht ausgeblendet - aber bestellbar*/
.product-prices .tax-shipping-delivery-label { display:none !important; }

/* Anpassung der Highligts Überschrift des Artikel Containers "Themen - Angebote - Termine" */ 
.text-uppercase {
  text-transform: none !important;
  font-size: 1.2rem;
}

/* Position der Artikel Thumbnails (Artikel Container) hier für die Start Index Site */
.featured-products .products {
  display: flex; 
  flex-wrap: wrap;
  width: 102%;
  margin-left: -12px;
  justify-content: space-evenly;
}
/* Auch bei Mobil-Ansicht mittig */
@media (max-width: 768px) {
  .products-selection {
   justify-content: space-evenly;
  }
}
/* bing 3: Position der Artikel Thumbnails - 2 Tags nötig - hier für die Kategorie-Seiten */
#products .products {
  display: flex; 
  flex-wrap: wrap; 
  width: 103%;
  padding-left: 16px;
  justify-content: space-evenly;
}
#products .product-miniature {
  margin-left: 0;
  margin-right: 0;
}
/* Damit die Artikle auch in der unteren Reihe die Spalten Linie einhalten, musste hier, "content: "";" auf "content: inherit;" gesetzt werden */ 
.row::after {
  content: inherit;
  display: table;
  clear: both;
}

.thumbnail-container div.product-description div.product-price-and-shipping span.price { display:none !important; }

/* Vorschau-Lupe bei Artikeln abschalten */
.highlighted-informations {
	display: none;
}
/* die Punkte bzw Überschriften über den oberen Link- Menü ausblenden, aber den Raum den sie einnehmen erhalten */
#header nav.header-nav div.container div.row div.hidden-sm-down div.col-md-7.right-nav div.col-md-6.links div.row div.col-md-6.wrapper p.h3.hidden-sm-down {
	visibility: hidden; 
}
/* Ausblenden all-product-link 
#content.page-home section.featured-products.clearfix a.all-product-link.float-xs-left.float-md-right.h4 {
	display: none;
}

/* footer reduzieren nach ausblenden Newsletter */ 
#footer div.footer-container div.container div.row div.aeuc_footer_info {
	display: none;
}
#footer {
    padding-top: 0;
}
.footer-container {
    margin-top: 0;
    padding-top: .7rem;
}

#header .header-top {
    padding-bottom: 11px;
}

/* verteilt das footer Menü gleichmäßig auf die breite - beide folgenden Tags sind nötig: ".col-md-6" und ".col-md-6.links" */
#footer div.footer-container div.container div.row div.col-md-6.links {
  float: left;
  width: 50%;
}
#footer div.footer-container div.container div.row div.col-md-6 {
  float: left;
  width: 50%;
}
/* das ist die Zählung der Artikel - wird nicht gebraucht */
.pagination { display: none; }

/* macht die Textfelder bei den Artikel-Thumpbnails flexibel - sie dennen sich nach unten aus - die nächsten 4 Tags gehören zusammen */
.product-description {
  position: relative; /* Setzt die "position"-Eigenschaft auf "relative" */
  /* top: 250px; */ /* Verschiebt das Textfeld um 250px nach unten (hier anscheinend nicht nötig oder sogar falsch) */
  resize: none !important;
  /* width: fit-content !important; */ /* verursacht hier fehler und wird wohl auch nicht gebraucht */ 
  height: fit-content !important;
  overflow: hidden !important;
  display: inline-block !important; /* display: table !important; */
  vertical-align: middle !important;
  margin-top: 0 !important;
  padding-left: 0.2rem; /* Damit der Text nicht an den Rand stößt */
  padding-right: 0.2rem; 
}
/* weil sich durch den oberen Befehl auch ".product-description" auf den Produktseiten verschob, wird hiermit verhindert, dass der Befehl vom Custom.css hier wirkt. */ 
body.page-product div.product-description {
  /* "all: initial; würde alle CSS Befehl auf standard setzten */ 
  top: auto;
}
/* Erlaubt es dem Element, sich in der Höhe zu erweitern */
article.product-miniature.js-product-miniature,
div.thumbnail-container {
  height: auto; 
}
/* Anpassung des .thumbnail-container */
/* Und nach dem sich jetzt das Textfeld nach unten ausdehnt, muss der Abstand zum den unteren Artikeln vergrößert werden mit "margin-bottom: 3.5rem;" */
#products .thumbnail-container, .featured-products .thumbnail-container, .product-accessories .thumbnail-container, .product-miniature .thumbnail-container {
  position: relative;
  height:318px;
  width: 250px;
  background: #fff;
  box-shadow: 2px 2px 8px 0 rgba(0,0,0,.2);
  margin-bottom: 3.5rem;
}
/* Der Text Preis bekommt nach unten mehr Abstand in Textfeld */
#products .product-price-and-shipping, .featured-products .product-price-and-shipping, .product-accessories .product-price-and-shipping, .product-miniature .product-price-and-shipping {
  margin-bottom: 2px !important;
}

/* Verschiebt die Sale Flags (Ticket Klick ins Bild) im Home Block Ticketshop nach unten. die nächsten drei Tags */
#content.page-home section.featured-products.clearfix .products .product article.product-miniature.js-product-miniature .thumbnail-container ul.product-flags {
  margin-top: 223px;
  margin-left: -12px;
} 
#content.page-home div#featured-category-products-block-center.featured-products.clearfix div.products div.product article.product-miniature.js-product-miniature div.thumbnail-container ul.product-flags {
  margin-top: 223px;
  margin-left: -12px;
}
#js-product-list .products.row .product article.product-miniature.js-product-miniature .thumbnail-container ul.product-flags {
  margin-top: 223px;
  margin-left: -12px;
}
/* das macht das Element Flagge durchlässig für die  Funktion des darunterliegenden Link, ansonsten blockiert die Flagge den Link, jetzt kann man auch auf die Flagge drücken */
.product-flags .product-flag.on-sale {
    pointer-events: none;
}

/* Flagge Tickethinweis schmaller */ 
 .product-flags {
  width: 247px;
}
.product-flags li.product-flag{pointer-events:auto;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;background:#ed7f11;font-weight:700;padding:.3125rem .4375rem;text-transform:uppercase;color:#fff;margin-top:.625rem;font-size:1rem;box-shadow:2px 2px 4px 0 rgba(0,0,0,.2)}

.product-flags li.product-flag{pointer-events:auto;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;background:#ed7f11;font-weight:700;padding:.3125rem .4375rem;text-transform:uppercase;color:#fff;margin-top:.625rem;font-size:1rem;box-shadow:2px 2px 4px 0 rgba(0,0,0,.2)} 

 .product-flags li.product-flag.discount,.product-flags li.product-flag.discount-amount,.product-flags li.product-flag.discount-percentage{background-color:#cc3300}.product-flags li.product-flag.on-sale{-webkit-box-ordinal-group:0;-ms-flex-order:-1;order:-1;background:#cc3300;width:100%;text-align:center;margin-top:0!important}
 
   /* Produkttitel Abstand oben unten weniger */
  #products .product-title, .featured-products .product-title, .product-accessories .product-title, .product-miniature .product-title {
  margin-top: .1rem;
  margin-bottom: .3rem;
  }
   
/* Schrift der Sale Flag auf 0.94, also etwas kleiner */
#main section#content.page-home section.featured-products.clearfix div.products div.product article.product-miniature.js-product-miniature div.thumbnail-container ul.product-flags li.product-flag.on-sale {
  font-size: 0.94rem;
}
li.product-flag.on-sale {
  font-size: 0.94rem;
}
/* Untermenü des Hauptmenüs Text Blau und roll over Violet */
.sf-menu li li a {
  color: #2fb5d2 !important ;
  font-weight: 600 !important ;
}
.sf-menu li li a:hover {
  color: #85388e !important ;
  font-weight: 600 !important ;
}
#left-column a:hover {
  color: #85388e !important ;
}
.sf-menu li a:hover {
  color: #85388e !important ;
}