/* ############################################# */
/*                                               */
/* Coaching  paarberatung analog zu stechpalme   */
/*  ACHTUNG die css sind 100% gleich             */
/*  Nur händisch ändern, nicht überschreiben!!!  */
/*                                               */
/* ############################################# */


/* ###################### Farben ###################### */

/**
lila #82215a
gruen (brand primary, Überschriften) #479733
gruen matt  #67985a
kräftig gruen (Hintergrund Zitat, Back-to-top-Button) #669859
dunkle grün Links im Text beim hovern #1b510e
dunkelgrau im Logo #727272 (nicht verwendet)

/*########################################################*/
/*                                                        */
/*                    Artikel und Blogs                   */
/*                                                        */
/*########################################################*/
 /* muss über Grid stehen! Grid wird derzeit im css aber nicht angesprochen          */
/* Sorgt dafür, dass die eingebetteten Videos responsive größer bzw. kleiner werden  */
.video-container iframe,.video-container object,.video-container embed {
                 position: absolute;
                 top: 0;
                 left: 0;
                 width: 100%;
                 height: 100%;
}
.video-container {
                 position: relative;
                 padding-bottom: 56.25%;
                 padding-top: 30px;
                 height: 0;
                 overflow: hidden;
}


/*########################################################*/
/*                                                        */
/*                 Fonts                                  */
/*                                                        */
/*########################################################*/
/* raleway-regular - latin */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 400;
  src: url('https://paarberatung-hanf.de/templates/t4_bs5_blank/fonts/raleway/raleway-v12-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Raleway'), local('Raleway-Regular'),
       url('https://paarberatung-hanf.de/t4_bs5_blank/fonts/raleway/raleway-v12-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('https://paarberatung-hanf.de/t4_bs5_blank/fonts/raleway/raleway-v12-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('https://paarberatung-hanf.de/t4_bs5_blank/fonts/raleway/raleway-v12-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('https://paarberatung-hanf.de/t4_bs5_blank/fonts/raleway/raleway-v12-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('https://paarberatung-hanf.de/t4_bs5_blank/fonts/raleway/raleway-v12-latin-regular.svg#Raleway') format('svg'); /* Legacy iOS */
}

/*########################################################*/
/*                                                        */
/*          Back to top Button                            */
/*                                                        */
/*########################################################*/
#back-to-top {
  background: rgba(71, 151, 51, 1);
  border-radius: 5px;
  display: none;
  position: fixed;
  right: 4rem;
  bottom: 1rem;
}
#back-to-top:hover {
  background: rgba(130, 33, 90, 0.5);
}
/*########################################################*/
/*                                                        */
/*                    Bilder                              */
/*                                                        */
/*########################################################*/
/* abgerundete Ecken für die Porträtbilder  */
.t4-row.row img, .blog img {
     border: 1px solid #cccccc;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
  -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
/*########################################################*/
/*                                                        */
/*                 Überschriften                          */
/*                                                        */
/*########################################################*/
/* Überschriften sind im template mit raleway definiert, dies hier nur zur Sicherheit, damit für den Fall dass Raleway nicht lädt auf jeden Fall Helvetica... genommen wird */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .module-title
{
  font-family: "Raleway", Helvetica, Arial, sans-serif;
  color: #479733;
  font-weight: normal;
}
h5, .h5 {
     color:  #479733;
}
.t4-content .page-header h1 {
        font-size: 28px;
        line-height: 26px;
        text-transform: none;
        font-weight: normal;
        margin-top: 0px;
        padding-bottom: 10px;
        border-bottom: 1px solid #eeeeee;
}
@media screen and (max-width: 767px) {
      .t4-content .page-header h1 {
           margin-top: 20px;
        }
}
.t4-content h4 {
        margin-top: 20px;
        margin-bottom: 10px;
}
/*########################################################*/
/*                                                        */
/*                       Text                        */
/*                                                        */
/*########################################################*/
 /* normaler Text */
.t4-content {
        font-family: Helvetica, Arial, sans-serif;
         font-size: 16px;
        line-height: 22.8571px;
}
/*########################################################*/
/*                                                        */
/*                       Hauptmenü                        */
/*                                                        */
/*########################################################*/
 /* Hintergrund */
.t4-menu {

          border-top: 1px solid #ddd;
         border-bottom: 1px solid #ddd;
}
.t4-megamenu .navbar-nav > li > a, .t4-megamenu .navbar-nav > li > .nav-link {
   font-size: 1.1rem;
   font-family: Helvetica, Arial, sans-serif;
}
 /* nicht aktiv li.nav-item {padding-right: 20px;}  */

.t4-nav-height-sm .t4-megamenu .navbar-nav > li > a, .t4-nav-height-sm .t4-megamenu .navbar-nav > li > .nav-link {
  height: 54px;
}
.mainnav {
           margin-top: -16px;
}
 /* Das folgende bestimmt, wie groß der Abstand zwischen den Menüpunkten ist und wie groß der gefärbte Hintergrund beim hovern über den Text des Links hinausgeht */
.nav-align-left .t4-megamenu .navbar-nav > li > a, .nav-align-left .t4-megamenu .navbar-nav > li > span {
  padding-left: 20px;
  padding-right: 20px;   /* im template sind padding left und right gleich null, aber dann sind die Hintergründe beim hovern ohne Abstand zum Text */
  margin-right: 0px;     /*hier ist im template ein Abstand, so dass beim hovern zwischen den lila Hinergründen eine Lücke bleibt, daher hier auf 0 gesetzt */
}
.navbar-nav  {
 /* nicht aktiv   padding-left: 20px;  rückt das Menü von links her etwas ein, aber auch das Dropwodnmenue, daher muss das wieder aufgehoben werden */
}

/* Schriftart und Kapitälchen bei den Menüpunkten */
a.nav-link {
    text-transform: uppercase;
}
/* Die Hintergrundfarbe beim hovern und bei aktiven Menüpunkten */
a.nav-link:hover,
a.nav-link:focus {
  background-color: #82215a;
}
.active > a.nav-link,
.active > a.nav-link:hover,
.active > a.nav-link:focus {
  background-color: #82215a;
}
.open > a.nav-link,
.open > a.nav-link:hover,
.open > a.nav-link:focus {
  background-color: #82215a;
}

/* Farbe der Menüpunkte beim Hovern und im Fokus */
li > a.nav-link:hover,
li > a.nav-link:focus
{
  background-color: #82215a;
}
.open > a.nav-link,
.open > a.nav-link:hover,
.open > a.nav-link:focus
{
  background-color: #82215a;
}
/* Farbe der aktiven Menüpunkte beim Hovern und im Fokus */
.active > a.nav-link,
.active > a.nav-link:hover,
.active > a.nav-link:focus
{
  background-color: #82215a;
}
/*########################################################*/
/*                                                        */
/*             Menu Toggle   und Dropdown-Menu            */
/*                                                        */
/*########################################################*/

/* Das führt dazu, dass die Balken des Menütoggles NICHT die Farbe ändern beim hovern und draufklicken, dann wenn sie weiß werden, sieht man sie nicht mehr gut */
.navbar-toggler:hover {
   color: #82215a;
}
.navbar-toggler {
   padding: 10px 10px 10px 20px;
  }
#t4-megamenu-mainmenu {
  background-color: #f8f8f8;
}

/*########################################################*/
/*                                                        */
/*                       Sidebar                          */
/*                                                        */
/*########################################################*/
.sidebar-l  {
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.sidebar-l h2, .h2
{
  font-family: "Raleway", Helvetica,Arial,sans-serif;
}
.sidebar-l h4, .h4
{
  font-family: "Raleway", Helvetica,Arial,sans-serif;
}

/* Stylt den Telefonnummer-Link als nicht sichtbar */
.sidebar-l a[href^="tel"]:link,
.sidebar-l  a[href^="tel"]:visited,
.sidebar-l  a[href^="tel"]:hover {
    text-decoration: none;
    color: #333;
}
/*########################################################*/
/*                                                        */
/*                    Zitat                               */
/*                                                        */
/*########################################################*/
.zitat {
        margin-top: 0px;
        margin-bottom: 0px;
        margin-left: auto;
        margin-right: auto;
        width: 60%;
        border: 2px #757575;
        border-radius: 4px;
        background-color: #669859;
        color: #fff;
        padding: 20px 20px 20px 30px;
}
.zitat h6, .h6 {
        color: #fff;
        font-style: italic;
        font-family: "Raleway", Helvetica, Arial, sans-serif;
        font-size: 20px;
}
/*########################################################*/
/*                                                        */
/*                Einzelne Seiten                         */
/*                                                        */
/*########################################################*/
.smallscreenonly {
display: block;
margin: auto;
width: 80%;
}
@media screen and (min-width: 768px) {
    .smallscreenonly {
    display: none !important;
    }
}
/*########################################################*/
/*                                                        */
/*                Kontaktformular                         */
/*                                                        */
/*########################################################*/
.mod-visforms h1 {
        margin-top: 0px;
        padding-bottom: 10px;
        border-bottom: 1px solid #eeeeee;
}
/* Dies stylt den Einleitungstext des Formulars, wenn einer benötigt wird, im Moment gibt es keinen. */
.category-desc {
      padding-top: 0px;
      padding-bottom: 0px;
      border: 0px;
 }
 #modvisform122viscaptcha_response {
      margin-left: 170px;
 }
 .absenden {
     color: #fff;
     background-color: #479733;
 }
 /* Erfolgsmeldung */
#system-message-container joomla-alert {
           color: #595959;
     background-color: #c3e8ba;
     border: 0px;
 }
 
.impressum {
        font-size: 28px;
        line-height: 26px;
        text-transform: none;
        font-weight: normal;
        margin-top: 10px;
        padding-bottom: 10px;
        border-bottom: 1px solid #eeeeee;
}
.kontakt-schmal {
          margin-top: 12px;
}
 
/*########################################################*/
/*                                                        */
/*               Footer                                   */
/*                                                        */
/*########################################################*/

.t4-footer {
   font-size: 1.1rem;
}

@media screen and (max-width: 550px) {
    .t4-footer {
    font-size: 80%;
    }
}