/**
 * @file
 * Subtheme specific CSS.
 * Es müssen bei Übernahme von CSS-Einstellungen alle Design-Einstellungen des Themes gleich sein
 */

/* ###############  Navigationsleiste fixieren in Bootstrap on!    Anfang ############### */   
   .affix {
    z-index: 9999 !important;
    margin-top: -2em !important;
    transition: 1000ms;
    position: fixed;
  }
/* ###############  Ende ############### */   

/* Anmeldeformular */
.form-control {
  width: 90%;
}
 /* Anmeldeformular ENDE */

 /* Hintergrundfarbe des Content-Blocks 
   border-top: 1px solid #5f5f5f !important;
 */
#main-wrapper{
  background: #faf8f4 !important;
  padding-top: 4em;
}
/* ################# Logo-Block  ################# */
/* Hintergrundfarbe des Logoblocks */
#navbar-top {
  background-color: #ffffff  !important;
}
/* ################# Logo-Block ENDE ################# */

 /*############### Logo ############### 
 aus https://www.codeply.com/p/P0KN7DNsEq  */
 @media (min-width: 1360px) {
  .navbar-brand {
     position: absolute;
     width: auto;
     left: 20%;
     transform: translateX(-50%);
     text-align: center;
     z-index: 900;
   }  
 }
 @media (max-width: 1360px) {
   .navbar-brand * {
     padding-left: 3rem;
     width: 70%;
   }
 }
 @media (max-width: 30em) {
   .navbar-brand * {
     padding-left: 3rem;
     width: 70%;
   }
 }
 /*############### Logo ENDE ############### */
 
 /* ###############  Theme-Menü Einstellungen ################## */
#block-bootstrap-barrio-subtheme-main-menu a:hover {
  color: #000 !important;
  text-decoration: none;
  transition: 1000ms;
}
/* +++++++++++ Für Navbar-Toggler +++++++++++++++++++ */
@media (min-width: 1360px) {
  #navbar-main {
    background-color: unset !important;
    padding-left: 2em;
    padding-right: 2em;
    z-index: 888;
  }
}

@media (min-width: 1360px) {
  .navbar-expand-lg .navbar-collapse {
    flex-grow: unset;
    background: #65171b;
    background: -webkit-linear-gradient(#65171b, #962228);
    background: -o-linear-gradient(#65171b, #962228);
    background: -moz-linear-gradient(#65171b, #962228);
    background: linear-gradient(#65171b, #962228);
    -webkit-box-shadow: 1px 2px 3px -1px rgba(0,0,0,0.75);
    -moz-box-shadow: 1px 2px 3px -1px rgba(0,0,0,0.75);
    box-shadow: 1px 2px 3px -1px rgba(0,0,0,0.75);
    border-radius: 3px;
    position: inherit;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    margin-top: 6em;
    width: max-content;
  }

  .navbar-expand-lg .navbar-nav .nav-link {
    padding-left: 3em !important;
    padding-right: 3em !important;
    font-size: large;
    border-left: 1px solid #b9b9b9;
  }
}

nav-link:focus, .nav-link:hover {
  background: linear-gradient(#a6a18b, #a6a18c);
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
  border-top-right-radius: 3px;
  color: white !important;
}
.dropdown-item {
  padding-top: 0.5em !important;
  padding-bottom: 0.5em !important;
  border-bottom: 1px solid #b9b9b9 !important;
}
.navbar-nav .nav-link.active {
  color: #9fff11 !important;
}
.dropdown-menu.show {
  background-color: #962228;
}
.dropdown-menu a {
  text-decoration: none;
  color: #fff !important;
}
.dropdown-item:hover {
  color: #575656 !important; 
  background-color: #a6a18b !important;
}
.dropdown-item.active {
  background-color: #a3a3a3 !important;
  color: #97ff00 !important;
  width: auto;
}

/* +++++++++++ Für Navbar-Toggler 992px +++++++++++++++++++ */
/* @media (max-width: 1360px) { */
@media (max-width: 992px) {
  #navbar-main {
    margin-left: 1em;
    padding-left: 2em;
    padding-right: 2em;
    background: unset !important;
    width: max-content;
    z-index: 888;
    width: 100%;
  }
  .navbar-nav {
    background: linear-gradient(#65171b, #962228);
    font-size: large;
    padding-left: 2em;
    padding-right: 2em;
    padding-bottom: 0.2em;
  }
  .dropdown-item {
    padding-top: 1em !important;
    padding-bottom: 1em !important;
    border-bottom: 1px solid #b9b9b9 !important;
  }
}  

/* NEU 27.08. NEU NEU NEU NEU NEU NEU NEU NEU NEU */
@media (min-width: 992px) and (max-width: 1360px) {
  #navbar-main {
    background-color: unset !important;
    margin-left: 1em;
    padding-left: 2em;
    padding-right: 2em;
    width: max-content;
  }

  .navbar-nav {
    background: linear-gradient(#65171b, #962228);
    background: #65171b;
    font-size: large;
  }
  
  .dropdown-item {
    padding-top: 1em !important;
    padding-bottom: 1em !important;
  }

  .affix {
    z-index: 9999 !important;
    margin-top: 0.1px !important;
    transition: 1000ms;
    position: fixed;
  }
}  

  /*  Toggle-Menü position; Hintergrundfarbe und Rechteck */
  @media (max-width: 1360px) {
    .navbar-toggler {
      position: fixed;
      right: 3em;
      top: 1.5em;
      padding: 0.4em;
      border: var(--bs-border-width) solid #65576f;
      background: #fafafa;
      color: #000000;
      z-index: 888;
    }  
    .nav-link {
      border-bottom: 1px solid #b9b9b9;
    }
  }
  
  @media (min-width: 992px) {
    .navbar-expand-lg .navbar-nav .nav-link {
      background: #65171b;
      background: -webkit-linear-gradient(#65171b, #962228);
      background: -o-linear-gradient(#65171b, #962228);
      background: -moz-linear-gradient(#65171b, #962228);
      background: linear-gradient(#65171b, #962228);
      border-bottom: none;
      border-right: 1px solid #b9b9b9;
      padding-left: 1.3em;
      padding-right: 1.3em;
    }
  }
/* ############### Theme-Menü Einstellungen ENDE ############## */

/* ###############  Raum für Toggle-Menü ############### */ 
#sidebar_second, h1 {
   padding-bottom: 2rem;
}

#content .col {
  flex: 1 0 0%;
  margin-top: 3em;
}
/* ###############  Raum für Toggle-Menü ENDE ########## */ 
/* ###############  Überschriften Hover ###################### */ 
/* Dekoration */ 
h2, h3 {
  padding: 10px;
  background-color: #e3e3e3 !important;
}

/* ###############  Überschriften Hover Ende ################# */ 

/* ############### Tabellen ############### */ 
/* Startseite */
tr td, tr th {
  padding: 4px 9px;
  border: 1px solid #fff;
  text-align: center;
  background-color: white;
}
/* ############### Tabellen Ende ########### */ 

/* ############### Bilder ################## */
.content img {
  box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 0 15px 0 rgba(0, 0, 0, 0.19);
}
/* ############### Bilder Ende ############# */

/* ################# Rechte Leiste  ################# */
#block-bootstrap-barrio-subtheme-sprechzeiten 
  .content a:hover, .link:hover {
    color: #202020;
  }

/* - TextLINK */
.content a:hover, .link:hover {
    color: #202020;
  }
  
  @media (min-width: 768px) {
    #sidebar_first, .col-md-2 {
        width: auto;
      }
    }  
  
  @media (min-width: 992px) {
      #sidebar_second, .col-md-2 {
          width: 30%;
       }
    }
  
  @media (max-width: 992px) {
      #sidebar_second, .col-md-2 {
          width: 100%;
        }
      .col-md-2 {
          width: auto;
        }        
    }  
  /* ################# Rechte Leiste ENDE ################# */

/* ################# Container wegen Sliderbilder  ################# */
/* ################# Container ENDE ################# */ 
  
/* ###############  Main Content  ############## */
/* Hintergrundfarbe unter dem Hauptmenü */
@media (min-width: 768px) {
  .offset-md-1 {
    margin-left: 0.3%;
  }
}
/* ###############  Main Content Ende  ############## */
/* ###############  Blöcke rechts und links   ############## 
  width: fit-content;
*/
.sidebar .block {
  background-color: #fff !important;
}
/* ###############  Blöcke rechts und links Ende  ############## */

/* ################# Vorschautext der Startseite ################# */
	/* Hintergrundfarbe der Vorschaublöcke */
  @media (min-width: 70em) { 
    .node--view-mode-teaser {
    border-bottom: 1px solid #d3d0d0;
    background-color: #f6f7f3;
    box-shadow: 0 0 8px 1px #cccccc;
    border-radius: 0.5em;
    padding: 1.8rem;
    max-width: 71rem;
    }
  }
   /* Linien (Farbe) über und unter Vorschautext der Startseite  */
  .inline__links {
    border-top: 1px solid #33333363;
    border-bottom: 1px solid #33333363;
    margin-top: 2rem auto;
  }
  /*  Überschrift Vorschautext  
    Farbe der Vorschautext-Überschrift */
  .node--view-mode-teaser h2 a {
    color: #801d22;
    text-decoration: none;
  }
  /* ################# Vorschautext der Startseite ENDE ################# */


  /* ################# Fußbereich  ################# */
  .site-footer {
    background: #8a8a8a !important;
  }
  .site-footer__bottom {
    border-top: none;
  }
  .site-footer .block {
    border: none;
    border-color: unset;
    padding: 1px;
  }
 .site-footer__top .content li a {
    border-bottom: none;
    padding-left: 2em;
    padding-right: 2em;
    text-decoration: none;
  }
  .site-footer__top .region {
    width: auto;
  }
/* ################# Fußbereich ENDE ################# */

/* ################# Such-Buttonfarbe #################  */
.btn-primary {
  background-color: #8d2026 !important;
  border-color: #b5b5b5 !important;
}
.btn-primary:hover,
.btn-primary:focus {
  background-color: #856163 !important;
}
@media (min-width: 851px) {
  .site-footer__top .region {
    width: auto;
  }
}/* ################# Such-Buttonfarbe ENDE #################  */

/* ################# Cookie-Button: Im Modul einstellen ##############  */
#popup-text, .eu-cookie-compliance-message p {
  font-size: 0.9em;
}
.eu-cookie-compliance-message button {
  color: #626262;
}
/* ################# Cookie-Buttons ENDE ##############  */

/* #################### LINK-ICO zueiner externen Website #################### */
svg.ext {
  width: 24px;
  height: 24px;
  fill: #fb0000;
  margin: 0px 0px 6px 5px;
}
svg.mailto {
  width: 24px;
  height: 24px;
  fill: #fb0000;
  margin: 0px 0px 6px 5px;
}
/* #################### LINK-ICO zueiner externen Website ENDE #################### */

/* #################### Back to top #################### */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  #backtotop {
    background-size: 32px 32px;
  }
}
/* #################### Back to top ENDE #################### */