@media screen {


/*--------------------------------------------------------------
# Responsive Navigation
# Navigation muss die Klasse .nav--mobile enthalten
# Muss nach dem Module als html vorhnaden sein
# <div class='nav-toggler'>
# <button class="nav-toggler__button"><span>? Menü</span></button>
# </div> 
* aus #wrapper
--------------------------------------------------------------*/

/* ========================
   Horizontale Navigation standard
   ===================== */

/* standard  */
.nav--horizontal {
  white-space: nowrap;
  overflow: hidden;
  text-overflow:ellipsis;
  padding-bottom:10px;
  
  .invisible { position:absolute;top:-1000px;left:-1000px;width:0px;heigth:0px;z-index:0; } 
  li {
  }
  ul {margin-bottom:0px;}
  span, a { display: block;text-align: center;margin: 0 5px;font-size: 10pt;
  }
  span, a {float:left;}
  
  ul.level_1{float:left;padding: 0;background-color: var(--pb-container-bg);
    li{float:left;margin-top: 0px; list-style-type: none;width:auto;  background-color: var(--pb-header-navi-item-bg);  
    }
  } 
 
  /* Menüpunkte gestalten */
  ul.level_1 a,span {
    display: block; text-decoration: none;background-color: var(--pb-header-navi-item-bg);color: var(--pb-link-color-navigation);font-weight: bold;
    height:2rem;  
  }
  /* Rollover und TAB-Fokus */
  ul.level_1 a:hover, ul.level_1 li:hover, .mod_navigation a:focus {
    background-color: var(--pb-link-hover-color-navigation-bg);
    color: var(--pb-link-hover-color-navigation);
  }
  /* Aktiven Menüpunkt hervorheben */
  ul.level_1 li.active,
  span.active
  {
    background-color: var(--pb-component-active-bg);
    color:var(--pb-component-active-color);
  }
  ul.level_1 .trail {
    background-color: var(--pb-component-active-bg);
    color:var(--pb-component-active-color);
  }
  /* alle links im aktiven Listenelemaent einfärben
  .submenu a {
  background-color: var(--pb-component-active-bg);
  color:var(--pb-component-active-color);
  }
   */

  }     /* ende nav--horizontal */
  .nav-toggler__button {
    color: var(--pb-text-color);
    font-size: var(--pb-font-size-small);
    float:right;
  }
}

/*--------------------------------------------------------------
# Responsive
* aus .site wird #wrapper
--------------------------------------------------------------*/

/*--------------------------------------------------------------
## x >= 480px
--------------------------------------------------------------*/
@media screen and (min-width: 480px) {

  .nav-toggler {
	  display: block;     /* ab dieser Groesse toggle einschalten wird bei 768 wieder ausgeschaltet */
  }
  .nav--horizontal {      /* standard horizontal ausschalten wird bei 768 eingeschaltet */
    display:none;
  }
  #header .mod_breadcrumb {
    display:none; 
  }



  div.zoomContainer {
    display:none;
  }
}



/*--------------------------------------------------------------
## x <= 768px
--------------------------------------------------------------*/

@media screen and (max-width: 768px) {
  #container {
    background-color: unset !important;
  }
  .nav--mobile {                   /* Styling der Mobile Navigation */
    max-height: 0;
    visibility: hidden;
    transition: max-height 0s 3s, background 0.3s;
    background: transparent;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    font-size: 1.25rem;
    text-shadow: 0.025rem 0.025rem 2rem rgba(0, 0, 0, 0.7);
  }
  .nav--mobile ul {
    position: relative;
  }
  .nav--mobile li {
    float: none;
    transition: opacity 0.3s;
    opacity: 0;
    padding: 0.5rem;
    margin: 0.5rem;
  }
  .nav--mobile a,
  .nav--mobile span.active,
  .nav--mobile span.trail {
  }
  .cookiebar {
    width:auto;
    height:auto;
  }
  .cookiebar__text, .cookiebar__message, .cookiebar__button {
    display:none;
  }
  .site-branding {
    padding:0;
  }
  #footer {
    display:none;
  }
  .display--max {
    display:none;
  }
  

}
/* Klasse nav--mobile--active wird durch click hinzugefügt 
   Angaben wichtig erst nach dem nach obigem css
 */
/*--------------------------------------------------------------
## x <= 767px    Konfiguration Menu Handy 
--------------------------------------------------------------*/
@media screen and (max-width: 767px) {  
  .nav--mobile--active {
    max-height: 100%;
    transition: max-height 0s, background 0.3s;
    background: var(--pb-body-bg);
    visibility: visible;
    display:block;
    z-index:1;
    font-size: var(--pb-font-size-base);
    text-shadow: none;
    width:auto;
    height:auto;
  }
  .nav--mobile--active {
      display:block !important;
      margin: 10px;
      li {
        border:1px solid var(--pb-text-color);
        line-height: var(--pb-headings-line-height);
        opacity: 1;
        padding: 0;
        margin: 0;
      }
    ul.level_1 li {
      float:unset;
    }
    span, a {float:unset;text-align: unset;}
  }
  .nav--mobile--active  .level_2 {
      display:block;
      padding-left: 50px;
      li {
        line-height: var(--pb-headings-line-height);
        background: blue;
        opacity: 1;
        padding: 0;
        margin: 0;
      }
  }


}

/*--------------------------------------------------------------
## x >= 768px
--------------------------------------------------------------*/
@media screen and (min-width: 768px) {

	.nav-toggler {
	  display: none;     /* ab dieser Groesse toggle ausschalten */
	}
  .nav--horizontal {
    display:block;
  }
  #header .mod_breadcrumb {
    display:block; 
  }


	/* Content */
	/* Header 
	.site-branding {
		margin: 0;
		text-align: center;
		width: 100%;
	}
	.site-title {
		font-size: 40px;
		line-height: 1.2;
	}
	.has-menu .site-title {
		padding: 0;
	}
	.site-description {
		display: block;
	}
	.has-menu .header-image {
		margin-top: -24px;
	}
*/

}

.login--Navigation {
  opacity: 0.5;
} 
/* macht den Rahmen um den navigationsbutton
 * die klasse im seitenbaum gesetzt.
 */

/* Tab "vertrag widerrufen" IMMER hervorheben */

/* wenn NICHT aktiv (a) */
/* nicht aktiv */
/* nicht aktiv */
.mod_navigation a[href$="vertrag-widerrufen.html"] {
  border: 4px solid var(--pb-container-bg);
}

/* aktiv */
.mod_navigation li.nav_vertrag > span {
  border: 4px solid var(--pb-container-bg);
}
.navigation-alignment{
    text-align:center;
    margin: auto;
}

  /* navigation Pfadleiste  */
#header .mod_breadcrumb {
  background-color: var(--pb-header-navi-bg);
  background-color: var(--pb-body-bg);  
}
#header .mod_breadcrumb ul {
    float:left;
    width:auto;
    line-style-type:none;
    padding: 0;
    margin: 0;
}
#header .mod_breadcrumb li {
    float:left;
    width:auto;
    margin: 0;  
    padding-right:10px;
    list-style-type: none;
      color:var(--pb-link-color-navigation);
}
#header .mod_breadcrumb li a {
      text-decoration:none;
      margin: 0 5px;
}
#header .mod_breadcrumb li a:hover {
      background-color:var(--pb-link-hover-color-bg);
      color:var(--pb-link-hover-color);
}
  

#header .mod_breadcrumb ul li:after { content: " \00A0\2794 ";  }     /* damit lassen sich hexwerte einsetzen also hier -> */
#header .mod_breadcrumb ul li.active:after { display:none;}



.nav-ebene-2 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow:ellipsis;
  padding-bottom:10px;
 .invisible {
 
  position:absolute;
  top:-1000px;
  left:-1000px;
  width:0px;
  heigth:0px;
  z-index:0;
  } 
  ul {margin-bottom:0px;}
  span,
  a {
    display: block;
    text-align: center;
    margin: 0 5px;
    font-size: var(--pb-font-size-small);
  }
  span, a {
   float:left;
  }
  
  ul.level_1{
      float:left;
      line-style-type:none;
      padding: 0;
      background-color: var(--pb-body-bg);
  
   li{
     float:left;
     margin-top: 0px;  
     list-style-type: none;
     width:auto;  
     background-color: var(--pb-header-navi-item-bg);      
   }
 
  /* Menüpunkte gestalten */
  ul.level_1 a,
  span {
    display: block;          
    text-decoration: none;
    background-color: var(--pb-header-navi-item-bg);
    color: var(--pb-link-color-navigation);
  }
  /* Rollover und TAB-Fokus */
  ul.level_1 a:hover, ul.level_1 li:hover,
  #header .mod_navigation a:focus {
    background-color: var(--pb-link-hover-color-navigation-bg);
    color: var(--pb-link-hover-color-navigation);
  }
  /* Aktiven Menüpunkt hervorheben */
  ul.level_1 li.active,
  span.active
  {
    background-color: var(--pb-component-active-bg);
    color:var(--pb-component-active-color);
  }
  ul.level_1 .trail {
    background-color: var(--pb-component-active-bg);
    color:var(--pb-component-active-color);
  }
  /* alle links im aktiven Listenelemaent einfärben
  .submenu a {
  background-color: var(--pb-component-active-bg);
  color:var(--pb-component-active-color);
  }
   */

 }

.nav-ebene-3 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow:ellipsis;
  
 .invisible {
 
  position:absolute;
  top:-1000px;
  left:-1000px;
  width:0px;
  heigth:0px;
  z-index:0;
  } 
  .navigation-alignment{
    text-align:left;
    margin: auto;
}
  ul {
    margin-bottom:0px;
    }
  span,
  a {
    display: block;
    margin-top: 0px;
    
    
  }
  
  ul.level_1{
      line-style-type:none;
      padding-left:30%;
  
   li{
     margin-top: 0px;  
     list-style-type: none;
   }
   li.last {
    border:none;
    }
  } 
 
  /* Menüpunkte gestalten */
  ul.level_1 a,
  span {
    display: block;          
    text-decoration: none;
    color: var(--pb-link-color-navigation);
    margin-left:-20%;
    margin-right:5px;
  }
  /* Rollover und TAB-Fokus */
  ul.level_1 a:hover, 
  ul.level_1 li:hover,
  ul.level_1 a:focus {
    background-color: var(--pb-link-hover-color-navigation-bg);
    color: var(--pb-link-hover-color-navigation);
  }
  /* Aktiven Menüpunkt hervorheben */
  ul.level_1 li.active,
  span.active
  {
    background-color: var(--pb-component-active-bg);
    color:var(--pb-component-active-color);
  }
  ul.level_1 .trail {
    background-color: var(--pb-component-active-bg);
    color:var(--pb-component-active-color);
  }
  /* alle links im aktiven Listenelemaent einfärben
  .submenu a {
  background-color: var(--pb-component-active-bg);
  color:var(--pb-component-active-color);
  }
   */

 }
  .nav-ebene-breadcrumb, .mod_breadcrumb {
    padding-bottom:10px;
    /* font-weight: bold; */
    font-size: var(--pb-font-size-small);
    color: var(--pb-link-color-navigation);
  }