@media all {
  /* ---------- Landing Pages ---------- */
  .red .navigation.navigation--horizontal li a:focus, .red .navigation.navigation--horizontal li a:hover, .red .navigation.navigation--horizontal li.is--active > a { color: #AE0018; }
  .basis .navigation.navigation--horizontal li a:focus, .basis .navigation.navigation--horizontal li a:hover, .basis .navigation.navigation--horizontal li.is--active > a { color: #F27C00; }
  .balance .navigation.navigation--horizontal li a:focus, .balance .navigation.navigation--horizontal li a:hover, .balance .navigation.navigation--horizontal li.is--active > a { color: #0087C0; }
  .skoll .navigation.navigation--horizontal li a:focus, .skoll .navigation.navigation--horizontal li a:hover, .skoll .navigation.navigation--horizontal li.is--active > a { color: #0085CF; }
  
  .red .navigation.navigation--vertical li a:focus, .red .navigation.navigation--vertical li a:hover, .red .navigation.navigation--vertical li.is--active > a { color: #AE0018; }
  .basis .navigation.navigation--vertical li a:focus, .basis .navigation.navigation--vertical li a:hover, .basis .navigation.navigation--vertical li.is--active > a { color: #F27C00; }
  .balance .navigation.navigation--vertical li a:focus, .balance .navigation.navigation--vertical li a:hover, .balance .navigation.navigation--vertical li.is--active > a { color: #0087C0; }
  .skoll .navigation.navigation--vertical li a:focus, .skoll .navigation.navigation--vertical li a:hover, .skoll .navigation.navigation--vertical li.is--active > a { color: #0085CF; }
  
  .bruecke .navigation.navigation--mobile { top: 96px; }
  .basis .navigation.navigation--mobile { top: 86px; }
  .balance .navigation.navigation--mobile { top: 98px; }
  .skoll .navigation.navigation--mobile, .praevention .navigation.navigation--mobile { top: 79px; }
  .sb .navigation.navigation--mobile { top: 80px; }
  
  
  /* ---------- Navigation ---------- */
  .navigation { position: relative; line-height: 1; }
  .navigation:after { content: "."; display: block; clear: both; font-size: 0; height: 0; visibility: hidden; }  
  .navigation ul, .navigation li { list-style-type: none; margin: 0; padding: 0; font-size: 1em; line-height: 1; }
  

  /* ---------- Navigation Horizontal ---------- */
  .navigation.navigation--horizontal ul, .navigation.navigation--horizontal li { display: inline; float: left; }  
  .navigation.navigation--horizontal li a { display: block; width: auto; margin: 0 0.75em; line-height: 1; font-size: 1.25em; text-transform: uppercase; font-style: normal; }
  .navigation.navigation--horizontal li:first-child a { margin-left: 0; }
  .navigation.navigation--horizontal li:last-child a { margin-right: 0; } 
  .navigation.navigation--horizontal li a:focus, .navigation.navigation--horizontal li a:hover, .navigation.navigation--horizontal li.is--active > a { color: #006837; }
  

  /* ---------- Navigation Vertical ---------- */
  .navigation.navigation--vertical { margin: 0 0 1.5em; }
  .navigation.navigation--vertical ul { overflow: hidden; }
  .navigation.navigation--vertical ul ul { padding: 0 0 0 1em; } 
  .navigation.navigation--vertical li a { display: inline-block; margin: 0.45em 0; line-height: 1.2; font-style: normal; color: #333; }
  .navigation.navigation--vertical li a:hover, .navigation.navigation--vertical li a:focus, .navigation.navigation--vertical li.is--active > a { font-style: italic; color: #006837; } 

  .navigation.navigation--vertical li.back--link { display: block; margin: 0 0 1em; }
  .navigation.navigation--vertical li.back--link a { font-style: italic; }
  

  /* ---------- Navigation Mobile ---------- */
  .navigation.navigation--mobile { position: fixed; top: 102px; right: -40%; bottom: 0; width: 40%; height: auto !important; margin: 0; padding: 0; background-color: rgba(33,33,33,0.98); -webkit-transition: right .3s linear; transition: right .3s linear; overflow: hidden; z-index: 99; }
  .is--mobile-open .navigation.navigation--mobile { right: 0; }
  .navigation.navigation--mobile > ul { width: 100%; height: 100%; height: -webkit-calc(100% - 3em); height: calc(100% - 3em); margin: 3em 0 0; padding: 0 0.5em 1.5em 3.5em; overflow-y: auto; }
  .navigation.navigation--mobile ul ul { width: auto; margin: 0; padding: 0 0 0.5em 1.5em; }
  .navigation.navigation--mobile ul ul ul { padding: 0 0 0.5em 1em; }
  .navigation.navigation--mobile li { position: relative; padding: 0; }
  .navigation.navigation--mobile li a { font-size: 1.25em; color: #fff; }
  .navigation.navigation--mobile li li a { font-size: 1em; }
  .navigation.navigation--mobile li li li a { font-style: italic; }
  .navigation.navigation--mobile li a:hover, .navigation.navigation--mobile li a:focus, .navigation.navigation--mobile li.is--active > a { color: #fff; }

  .icon-line { /*float: right; padding: 12px 0 0;*/ overflow: hidden; z-index: 100; }
  .icon-line .icon { position: relative; float: right; padding: 6px 0; cursor: pointer; z-index: 10; }
  .icon-line .icon .line { display: block; width: 48px; height: 5px; background: #4d4d4d; }
  .icon-line .icon:hover .line, .icon-line .icon:focus .line { background-color: #333; }
  .icon-line .icon .line.middle { margin: 8px 0; }

  .mobilenav-background { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 10; }

  .navigation.navigation--mobile .icon-line { padding: 0; width: auto; margin: 2em 0 2em 2em; float: left; overflow: visible; }
  .navigation.navigation--mobile .icon { width: 40px; color: #fff; padding: 0; }
  .navigation.navigation--mobile .icon .line { background: #fff; width: 45px; height: 4px; }
  .navigation.navigation--mobile .icon .line.first { -webkit-transform: rotate(45deg) translate(0, 2px); -moz-transform: rotate(45deg) translate(0, 2px); transform: rotate(45deg) translate(0, 2px); }
  .navigation.navigation--mobile .icon .line.last { -webkit-transform: rotate(-45deg) translate(0, -3px); -moz-transform: rotate(-45deg) translate(0, -3px); transform: rotate(-45deg) translate(0, -3px); }
  
  .menu--back-to-start { display: block; float: right; width: 2.5em; height: 2.5em; text-indent: -999999px; color: transparent; background: none no-repeat scroll 0.25em 0.25em transparent; background-size: 2em 2em; overflow: hidden; background-image: url(/fileadmin/gfx/suchthilfe-home.svg); margin: 1em 2em 1em 0; }


  /* ---------- Navigation Meta ---------- */
  #metanav { overflow: hidden; }
  #metanav ul, #metanav li { display: block; float: none; }
  #metanav ul li a { font-size: 1.25em; font-style: normal; text-align: center; background: #fff; color: #333; margin: 1em 0 0; display: block; width: 12em; padding: 0.5em 1em; text-transform: none; }
  #metanav ul li a:hover, #metanav ul li a:focus { background: #333; color: #fff; }


  /* ---------- Navigation Sitemap ---------- */
  #sitemap { background: #333; }
  #sitemap h3 { font-size: 2.5em; font-style: italic; margin: 0 0 0.5em; color: #fff; }
  .sitemaps { overflow: hidden; }
  .sitemap { float: left; padding: 0 3em 1.5em 0; width: 20%; margin: 0 0 1.5em; }
  .sitemap:nth-child(5n+1) { clear: both; }
  .sitemap ul, .sitemap ul li { list-style-type: none; margin: 0; padding: 0; }
  .sitemap ul ul ul { padding-left: 1em; }
  .sitemap a { display: inline-block; font-size: 1.25em; line-height: 1.2; margin: 0.25em 0; color: #fff; text-decoration: none; font-style: normal; }
  .sitemap a:hover, .sitemap a:focus { text-decoration: underline; }
  .sitemap li li a { font-size: 1em; text-transform: none; }  
}