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

 /* ###############  Affix Navigationsleiste fixieren in Bootstrap on!    Anfang ############### */   
 .affix {
  top: -0.4em;
  width: 100%;
  z-index: 9999 !important;
  position: fixed;
}
/* ###############  Affix Ende ############### */   


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

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

 /*############### Logo ############### 
 aus https://www.codeply.com/p/P0KN7DNsEq  
 Logo jetz in Blocklayout in Header gesetzt.
 vorher:      width: auto;
 raus:        z-index: 100;
 In Zeile 16  #main-wrapper: padding-top: 7em;
     margin-bottom: 3em;
 
     */
 
 @media (min-width: 1360px) {
  .navbar-brand {
     position: relative;
      transform: translateX(30%);
    }  
 }
  
 @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: #ff7052 !important;
  text-decoration: none;
  transition: 500ms;
}

/* ###############  LINKs ############### */ 
a {
  text-decoration: none !important;
}
a:link {
  color: #860012;
}

a:visited {
  color: #62000D;
}

a:hover {
  color: #FF5100 !important;
}

/* ###############  LINKs ############### */ 

/* ###############  Überschriften Hover ###################### */ 
/* Dekoration */ 
h2, h3 {
  padding: 10px;
  background-color: #e3e3e3 !important;
}

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


/* ###############  Hauptmenu ################# */ 
@media (min-width: 1360px) {
  #navbar-main {
    background-color: unset !important;
    padding-left: 3em;
    padding-right: unset;
  }
}
/* ###############  Hauptmenu Ende ################# */ 
/* ############### Superfish Einstellungen ################## */
/* Hintergrundfarbe unter dem Hauptmenü */
#navbar-main {
  background-color: unset !important;
}

/* +++++++++++++++ Schriftfarbe +++++++++++++++++++++++++++++ */
ul.sf-menu .sf-with-ul {
  padding-right: 2.1em;
}

#superfish-main a {
  text-decoration: none;
  color: #ffffff;
}

/*   padding-top: 1em;
  padding-right: 2.1em;
  padding-bottom: 1em;
  padding-left: 1.2em;
*/
ul.sf-menu a, ul.sf-menu span.nolink {
  padding: 1em 2.1em 1em 1.2em;
}

/*
background: #xyzzzx;                For browsers that do not support gradients
background: -webkit-linear-gradient For Safari 5.1 to 6.0 
background: -o-linear-gradient      For Opera 11.1 to 12.0 
background: -moz-linear-gradient    For Firefox 3.6 to 15 
background: linear-gradient         Standard syntax
*/

#superfish-main, .sf-menu li {
/* box color for top-level menu items */
background: #FF4D50;      
background: -webkit-linear-gradient(#FF4D50, #cc0000); 
background: -o-linear-gradient(#FF4D50, #cc0000);
background: -molinear-gradient(#FF4D50, #cc0000); 
background: linear-gradient(#FF4D50, #cc0000);
}

.sf-menu li:hover, .sf-menu li.sfHover,
.sf-menu a:focus, .sf-menu a:hover{
  background: #ff9900; 
  color: #030303 !important;
}

ul.sf-menu a.is-active {
  color: #d9fcd8 !important;
}

.sf-menu li li {
/* box color for second-level menu items */
/*   border-bottom: 1px solid #020202; */
background: #838383; 
}
.sf-menu li li li {
/* box color for third-level menu items */
background: #474747; 
}

/* @media (max-width: 992px) { */
/*  ul.sf-menu li {
    border-right: none;
    margin-left: -6rem auto;
  }  
    */
/*
    font-size: medium;
    width: 18em; 
    font-weight: bold;
*/
@media (min-width: 992px) and (max-width: 1290px) {
    ul.sf-menu a {
    padding: 1em 1em;
    font-size: small;
  }
}

/* Horizontale Balken; kleine Ansicht */
/* siehe 235
  ul.sf-menu a {
    width: 18em; 
  }
*/
@media (max-width: 60em) {  
  #main-menu-link-content96fcdbd6-e833-40c0-a511-ea4ff9a2eee3 > ul:nth-child(2) {
    width: auto; 
  }
}





/* ################## Toggle Menu #################### */
#sidebar_second, h1 {
  padding-bottom: 2rem;
}
/*#content .col {
 flex: 1 0 0%;
 margin-top: 3em;
}
 */

/* Wenn navbar.scss bei 992px einschaltet, muss auch ...collaps an sein */
.navbar-collapse {
  flex-basis: 100%;
  flex-grow: 1;
  align-items: center;
  margin-right: 2em;
}
@media (min-width: 992px) and (max-width: 1200px) {
 .navbar-expand-lg .navbar-collapse {
   display: block !important;
 }
}

/*@media (min-width: 992px) {
  .navbar-expand-lg .navbar-collapse {
    display: none !important;
  }
}
  */

/* Hintergrundfarbe des Toggle-Menü und Dicke d. Rechtecks */
.navbar-toggler {
 position: fixed;
 right: 3em;
 top: 1em;
 padding: 0.4em;
 border: var(--bs-border-width) solid #65576f;
 background: #fafafa;
 color: #000000;
 z-index: 888;
}  
@media (max-width: 450px) {  
  .navbar-toggler {
    right: 1em;
  }  
}
 
/* ################## Toggle Menu ENDE #################### */

/* Horizontale Balken; Handy-Ansicht - auch für quer */
@media (max-width: 30em) {  
  ul.sf-menu a {
    font-size: medium;
    width: 15em; 
  }
  #main-menu-link-content96fcdbd6-e833-40c0-a511-ea4ff9a2eee3 > ul:nth-child(2) {
    width: auto; 
  }
  /* Untermenü Länge wie Schatten */
  ul.sf-menu ul li {
    width: 100%;
  }
  /* Abstand des Untermenüs vom Hauptmenü - einzustellen auf die Schriftgröße */
  ul.sf-menu li.sfHover > ul {
    top: 2.3em;
  }  
}

/* Hintergrundfarbe des Menüblocks oben */	
#CollapsingNavbar .block-superfish {
    background: linear-gradient(#306DAC, #095cb1);
  }  
  ul.sf-menu.menu {
    margin-bottom: unset;
  } 
  ul.sf-menu li {
    border-bottom: none;
    border-right: 1px solid #b4b4b4;
  }  
  ul.sf-menu li li {
    border-bottom: 1px solid #5f5f5f;
    border-right: none;
    }  
@media (min-width: 30em) {     
/* Abstand des Untermenüs vom Hauptmenü - einzustellen auf die Schriftgröße */
    ul.sf-menu li.sfHover > ul {
    top: 2.9em;
  }  
}
/*############### Superfish Einstellungen Ende ################## */

/* ############### Tabellen ############### */ 
/* Startseite */
tr td, tr th {
  padding: 4px 9px;
  border: 1px solid #fff;
  text-align: left;
  background-color: white;
  font-size: medium;
}
/* ############### 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);
}
#views_slideshow_cycle_main_sliderblock-block_2 img {
  transform: translateX(90%) !important;
}
/* ############### Bilder Ende ############# */

/* ############### LINKS im Text  ################## */
/*  color: #952228 !important; */

/* Farbänderung hover */
/* - rechte Leiste */
.sidebar .block .content {
  line-height: 1.7;
}

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

  @media (min-width: 768px) {
  #sidebar_first, .col-md-2 {
      width: auto;
    }
  }  
  @media (max-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: auto;
      }
    }
  /*    
/* ############### LINKS im Text 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;
    }
  }
  /*
  .node--view-mode-teaser, .node__content {
    font-size: 1em;
    font-weight: 400;
    padding-bottom: 1rem;
  }
    */
   /* 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: #095cb1;
    text-decoration: none;
  }
  /* ################# Vorschautext der Startseite ENDE ################# */

  
  /* ################# Main-Fußbereich ################# */
  #block-bootstrap-barrio-subtheme-weiterelinksfurunserepraxis  h2 {
    font-size: 1rem;
    background-color: #e6e6e6 !important;
    margin-top: 5em;
  }
  /* ################# Main-Fußbereich Ende ################# */


  /* ################# Fußbereich  ################# */
  .view-display-id-page_1 .row > * {
    width: auto;
    margin-top: 2em;
  }
  .nav {
    --bs-nav-link-color: #484848 !important;
  }
  .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: #095cb1 !important;
  border-color: #b5b5b5 !important;
}
.btn-primary:hover,
.btn-primary:focus {
  background-color: #373737 !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 #################### */