@import url('https://fonts.googleapis.com/css?family=Muli:600,700,800,900');

/* @group Layout */

html {
  /* Muss fuer rem im html definiert sein */
  font-size: 100%; /* Grundschriftgroesse 16px */
  overflow-y: scroll; /* Huepfen vermeiden (Skrollbalken) */
  min-height: 100vh; /* behebt Problem beim Einpassen iPad hoch */
}

body {
  color: #2d346c;
  background-color: #fff;
  font-family: "Muli", Arial, Helvetica, sans-serif;
  font-style: normal;
  font-weight: 700;
  -webkit-font-smoothing: antialiased; /* behebt Problem mit zu fetten Schriften in Safari MacOS */
  -moz-osx-font-smoothing: grayscale; /* behebt Problem mit zu fetten Schriften in FF MacOS */
}

#wrapper {
  max-width: 1052px;
  margin: 0 auto;
  position: relative;
}

.ym-wrapper {
  max-width: 948px; /* Gesamtbreite 1052px */
  margin: 0 auto;
  padding-right: 4.942965779467681%; /* 52px/1052 */
  padding-left: 4.942965779467681%; /* 52px/1052 */
}

.ym-gbox {
  margin: 0;
  padding: 0;
}

main {
  min-height: 400px;
}

.clear {
  clear: both;
  display: block;
}

.clearfix::before,
.clearfix::after {
  content: "";
  display: table;
} 

.clearfix::after {
  clear: both;
}

div.content-wrapper {
  width: 66.244725738396624%; /* 628px/948 */
  margin-left: 16.877637130801688%; /* 160px/948 */
  margin-right: 16.877637130801688%; /* 160px/948 */
  margin-bottom: 40px;
  padding-top: 1px;
}

div.hires-text-bild-box div.text-wrap {
  bottom: 0; /* Konflikt in TYPO3-RTE: verschoben ins layout.css */
}

/* @end */

/* @group Anchor Links */

.anchor {
  height: 0;
  margin-top: -70px;
  padding-top: 70px;
  position: relative;
  z-index: -1;
}

/* @end */

/* @group Header */

header {
  position: relative;
  background-color: #fff;
}

.logo-metanav-wrapper {
  width: 100%;
  height: 99px;  
  padding-top: 14px;
  margin-bottom: 20px;
  background-color: #fff;
  position: relative;
}

header .logo {
  width: 252px;
  float: left;
  height: 99px; /* hinzugefügt da Höhe sonst seltsamer Wert von 103,... px war... */
}

header .logo-klein {
  width: 32px;
  height: 32px;
  float: left;
  display: none;
}

header .metanav {
  float: right;
}

header .slogan {
  width: 251px;
  position: absolute;
  bottom: 0;
  right: 0;
}

/* @end */

/* @group Header hochfahren + fixieren  */

.header-wrapper.fixed {
  width: 100%;
  position: fixed;
  z-index: 1000;
}

.header-wrapper.fixed .logo-metanav-wrapper {
  height: 32px;
  padding-top: 9px;
  margin-bottom: 9px;
}

.header-wrapper.fixed .metanav {
  position: absolute;
  right: 0;
  bottom: 0;
}

.header-wrapper.fixed .metanav ul {
  margin-bottom: 0;
}

.header-wrapper.fixed div.slogan {
  display: none;
}

.header-wrapper.fixed .logo {
  display: none;
}

.header-wrapper.fixed .logo-klein {
  display: block;
}

main.fixed {
  padding-top: 180px; /* diese Hoehe aus Inspector abgelesen, = Hoehe Header Wrapper + 82px Scroll-Weg nach oben */
}

main.fixed-mobile {
  padding-top: 73px;
}

/* @end  */

/* @group Metanav */

.metanav ul {
  float: right;
}

.metanav li {
  display: inline-block;
  letter-spacing: 0.06em;
  margin-left: 24px;
  font-size: 0.75em;
  line-height: 100%;
  font-weight: 600;
}

.metanav li a {
  color: #919191;
  text-decoration: none;
}

.metanav li a:hover,
.metanav li a.active {
  text-decoration: underline;
}

.disclaimer_impressum li a {
  text-decoration: none;
}

.metanav div.search {
  width: auto;
  height: auto;
  float: right;
  position: relative;
}

.metanav div.search .search-icon {
  background: url(../images/icon-search-grey.png) right no-repeat;
  background-size: 13px;
  width: 15px;
  height: 25px;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 90;
  cursor: pointer;
  text-indent: -9999px;
}

.metanav div.search .search-icon a,
.mobile-metanav div.mobile-search a {
  display: block;
  text-indent: -9999px;
}

.search-icon.mobile {
  display: none;
  width: 20px;
  height: 20px;
}

.search-icon.mobile a {
  display: block;
}

/* @end */

/* @group Mainnav */

.header-wrapper {
  padding-bottom: 10px;
  background-color: #fff;
}

nav .mainnav {
  margin-bottom: 0;
  border-top: 3px solid #2e356c;
  border-bottom: 1px solid #2e356c;
  position: relative;
}

nav .mainnav li {
  display: inline-block;
  margin-left: 0;
  padding-right: 29px;
  font-size: 15px;
  line-height: 15px;
}

nav .mainnav > li > span,
nav .mainnav > li > a {
  text-decoration: none;
  color: #2d346c;
  display: inline-block;
  min-height: 15px;
  padding-top: 9px;
  border-bottom: 2px solid #fff;
  padding-bottom: 8px;
  cursor: pointer;
}

nav .mainnav li.opened > span,
nav .mainnav li.active > span,
nav .mainnav li.active > a,
nav .mainnav li:hover > a {
  border-bottom: 2px solid #2e356c;
}

nav .mainnav li.opened > span,
nav .mainnav li:hover > a {
  color: #00a1e5;
  font-weight: 700;
  text-decoration: none;
}

nav .mainnav li.opened .subnav li a {
  color: #fff;
}

nav .subnav {
  width: 102.531645569620253%; /* 972px/948 */
  min-height: 280px;
  margin-left: -12px;
  margin-right: -12px;
  padding: 16px 40px;
  background-color: #2e356c;
  top: 34px;
  left: 0;
  position: absolute;
  z-index: 10000;
  display: none;
  box-sizing: border-box;
}

.subnav p.subnav-heading {
  font-size: 0.866666666666667em; /* 13px, ACHTUNG: hier gerechnet von 15px, die weiter oben vergeben werden */
  line-height: 208.333333333333333%;
  font-weight: 600;
  color: #00a1e5;
}

.subnav ul li {
  font-size: 0.9375em;
  line-height: 178.571428571428571%;
  color: #fff;
  display: block;
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 1em;
  padding-right: 20px;
  border-bottom: none;
  margin-bottom: 6px;
  margin-right: 0;
}

.subnav ul li a {
  color: #fff;
  padding-top: 0;
  text-decoration: none;
}

/* column-count zusammen mit a::before macht teilweise Probleme in Safari und FF: li:before funktioniert in allen Browsern */
.subnav ul li::before {
  content: '›';
  display: inline-block;
  width: 1em;
  margin-left: -1em;
}

.subnav ul li a:hover,
.subnav ul li a.active {
  text-decoration: underline;
}

.subnav .einspaltig {
  float: left;
  width: 33.258426966292135%; /* 296px/890, ca.-Wert */
}

.subnav .zweispaltig {
  float: left;
  width: 66.51685393258427%; /* 2 x 296px, da 2 Spalten */
}

.subnav .zweispaltig ul {
  -webkit-column-count: 2;
  -moz-column-count: 2;
  column-count: 2;
  -webkit-column-gap: 0;
  -moz-column-gap: 0;
  column-gap: 0;
}

.mainnav li:first-child div.einspaltig:nth-child(1) {
  float: left;
  width: 18.609865470852018%; /* 166/892 */
}

.mainnav li:first-child div.einspaltig:nth-child(2) {
  float: left;
  width: 28.475336322869955%;/* 254/892 */
}

.mainnav li:first-child div.zweispaltig {
  float: left;
  width: 52.914798206278027%; /* 472/892 */
}

.mainnav a span.light-blue {
  color: #00a1e5;
}

.mainnav a span.red {
  color: #da374c;
}

.mainnav a > span.gold,
.mainnav > li span.gold {
  font-weight: 800;
  color: #C3AF5F;
}

/* @end */

/* @group Sticky Social Icons */

.sticky-icons-wrapper {
  width: 40px;
  height: 40px;
  right: 4px;  /* kleiner Abstand, damit auf kleinen Screens Icons nicht rechten Rand berühren */
  position: absolute;
  z-index: 1000;
}

.social-icons-contact {
  width: 40px;
  height: 40px;
  top: 293px;
  position: fixed;
}

.social-icons-contact div.kontakt {
  background-image: url(../images/social-icon-contact.png);
  background-size: 40px;
  background-repeat: no-repeat;
  text-indent: -9999px;
  display: block;
  width: 40px;
  height: 40px;
  cursor: pointer;
  z-index: 1000;
}

.social-icons-contact .sticky-contact-box {
  width: 315px;
  background-color: #fff;
  transition: all 0.5s ease;
  box-sizing: border-box;
  border: 1px solid #ccc;
  border-top: none;
}

.social-icons-contact .sticky-contact-box .csc-header h3 {
  font-size: 1.3125em; /* 21px */
  font-weight: 700;
  line-height: 40px;
  letter-spacing: 0;  
  color: #fff;
  background-color: #222653;
  margin-top: 0;
  margin-bottom: 0;
  padding-left: 30px; 
}

.social-icons-contact .sticky-contact-box .csc-textpic-text {
  padding: 5px 30px 15px;
}

.social-icons-contact .slide-in {
  position: absolute;
  top: 0;
  right: 40px;
  overflow: hidden;
  z-index: 10;
}

.social-icons-contact .slide-in .sticky-contact-box {
  margin-right: -315px;
}


.social-icons-contact .slide-in.show .sticky-contact-box {
  margin-right: 0;
}

.social-icons-contact.show > div.kontakt {
  background-image: url(../images/social-icon-contact-dark.png);
}

.social-icons-contact > div.kontakt:hover {
  background-image: url(../images/social-icon-contact-dark.png);
}

.social-icons-search a {
  background-image: url(../images/social-icon-search.png);
  background-size: 40px;
  background-repeat: no-repeat;
  text-indent: -9999px;
  display: block;
  width: 40px;
  height: 40px;
  top: 334px;
  position: fixed;
  z-index: 1000;
}

.social-icons-search a:hover {
  background-image: url(../images/social-icon-search-dark.png);
}

/* @end  */

/* @group AddThis */

div.addthis_inline_share_toolbox {
  display: block;
  width: 40px;
  height: 40px;
  top: 252px;
  position: fixed;
  z-index: 1000;
}

span.at-icon-wrapper,
span.at-label,
span.at4-share-count-container {
  display: none;
}

a.at-icon-wrapper.at-share-btn.at-svc-compact {
  background-color: #fff !important;
  width: 40px;
  height: 40px;
  background-image: url(../images/social-icon-share.png);
  background-size: 40px;
  background-repeat: no-repeat;
  display: block;
  margin: 0;
  padding: 0;
}

a.at-icon-wrapper.at-share-btn.at-svc-compact:hover {
  background-image: url(../images/social-icon-share-dark.png);
}

div#at15s.atm {
  display: none !important;
}

#at-expanded-menu-host .at-expanded-menu-mask {
  background-color: rgba(45, 52, 108, .95) !important;
}

#at-expanded-menu-host .at-expanded-menu-fade {
  background: linear-gradient(to bottom, transparent 0%, transparent 0%) !important;
}

/* @end */

/* @group Scroll Top  */

.scroll-top {
  width: 40px;
  height: 40px;
  position: absolute;
  bottom: 550px;
  right: 4px; /* kleiner Abstand, damit auf kleinen Screens Icons nicht rechten Rand berühren */
  z-index: 200;
}

.scroll-top a {
  background-image: url(../images/icon-scroll-top.png);
  background-size: 40px;
  background-repeat: no-repeat;
  text-indent: -9999px;
  display: block;
  width: 40px;
  height: 40px;
  position: fixed;
  bottom: 30px;
  z-index: 200;
}

.scroll-top a:hover {
  background-image: url(../images/icon-scroll-top-dark.png);
}

/* @end  */

/* @group Breadcrump */

.breadcrump {
  width: 100%;
  margin-top: 10px;
  margin-bottom: 20px;
}

.breadcrump p {
  font-size: 0.6875em; /* 11/16px */
  line-height: 109.090909090909091%;
  color: #aeadaf;
  letter-spacing: 0.15em;
  font-weight: 600;
}

.breadcrump a,
.breadcrump a:hover {
  color: #aeadaf;
  text-decoration: none;
}

/* @end */

/* @group Anchor-Menu */

.anchor-menu {
  width: 100%;
  border-bottom: 1px solid #2e356c;  
  margin-top: 10px;
  margin-bottom: 10px;
  padding-bottom: 5px;
}

.anchor-menu p {
  font-size: 0.875em;
  line-height: 178.571428571428571%;
  color: #2e356c;
  letter-spacing: 0.15em;
}

.anchor-menu a {
  margin-right: 34px;
  white-space: nowrap;
  display: inline-block;
}

.anchor-menu a,
.anchor-menu a:hover {
  color: #2e356c;
  text-decoration: none;
}

.anchor-menu a::before {
  content: "› ";
}

body.vorteile-mitgliedschaft .anchor-menu {
  padding-bottom: 2em;
}

body.vorteile-mitgliedschaft .anchor-menu a {
  display: block;
}

/* @end */

/* @group Footer */

footer .impressum {
  float: right;
  margin-top: 12px;
}

footer .impressum li {
  display: inline-block;
  letter-spacing: 0.06em;
  margin-left: 24px;
  font-size: 0.75em;
  line-height: 100%;
  font-weight: 600;
}

footer a {
  color: #919191;
  text-decoration: none;
}

footer li a:hover,
footer li a.active {
  text-decoration: underline;
}

footer .footer-wrapper {
  border-top: 1px solid #2e356c;
  border-bottom: 4px solid #2e356c;
  padding-top: 23px;
  padding-bottom: 20px;
}

footer .ym-gl.col-1-footer {
  width: 67.510548523206751%;
}

footer .ym-gr.col-2-footer {
  width: 32.489451476793249%;
}

footer .left-wrap {
  margin-left: 0;
  padding-right: 20px;
}

footer p.bodytext {
  margin-top: 16px;
  margin-bottom: 0;
}

div.mobile-footer {
  display: none;
  box-sizing: border-box;
  width: 100%;
  color: #fff;
  background-color: #2e356c;
  padding: 10px 10px 20px 10px;
}

div.mobile-footer h3 {
  font-size: 0.875em;
  color: #fff;
  margin-top: 20px;
  margin-bottom: 0;
}

/* @end */

/* @group Mobile Navigation */

.mobile-nav {
  display: none;
}

.mobile-nav {
  background-color: #fff;
  width: 100%;
  height: auto;
}

.mobile-nav.opened {
  background-color: #2e356c;
}

.mobile-nav .mobile-metanav {
  height: 50px;
}

.mobile-nav .mobile-metanav {
  text-align: center;
  border-bottom: 3px solid #2e356c;
}

.mobile-nav.opened .mobile-metanav {
  border-bottom: 3px solid #fff;
}

.mobile-nav .mobile-main-sub-nav-wrapper {
  display: none;
  position: absolute;
  z-index: 5000;
  left: 0;
  background-color: #2e356c;
  width: 100%;
  box-sizing: border-box;
  top: 53px;
}

.mobile-nav .mobile-metanav .mobile-logo {
  display: inline-block;
  float: left;
}

.mobile-nav .mobile-metanav .mobile-logo a {
  background-image: url(../images/zhk-logo-small.png);
  background-size: 32px;
  background-repeat: no-repeat;
  text-indent: -9999px;
  display: block;
  width: 32px;
  height: 50px;
  background-position: center;
}

.mobile-nav.opened .mobile-metanav .mobile-logo a {
  background-image: url(../images/zhk-logo-small-mobnav.png);
}

.mobile-nav .mobile-metanav .mobile-search {
  display: inline-block;
  float: right;
}

.mobile-nav .mobile-metanav .mobile-search a {
  background-image: url(../images/icon-search-blue.png);
  background-size: 18px;
  background-repeat: no-repeat;
  background-position: center;
  display: block;
  width: 32px;
  height: 50px;
}

.mobile-nav.opened .mobile-metanav .mobile-search a {
  background-image: url(../images/icon-search-white.png);
}

.mobile-nav .mobile-metanav .mobile-nav-icon {
  display: inline-block;
  background-image: url(../images/mobile-nav-open.png);
  background-size: 20px;
  background-repeat: no-repeat;
  background-position: center;
  width: 32px;
  height: 50px;
  margin: 0 auto;
}

.mobile-nav.opened .mobile-metanav .mobile-nav-icon {
  background-image: url(../images/mobile-nav-close.png);
}

.mobile-nav .main-nav ul {
  margin-bottom: 0;
}

.mobile-nav .main-nav li {
  color: #fff;
  margin-left: 0;
  border-bottom: 1px solid #fff;
  display: block;
}

.mobile-nav .main-nav li a:hover,
.mobile-nav .main-nav div.first-level:hover,
.mobile-nav .main-nav div.first-level:hover p.main-nav,
.mobile-nav .mobile-back-to-mainmenu p:hover {
  color: #00a1e5;
}

.mobile-nav .mobile-subnav li a:hover,
.mobile-nav .mobile-nav-footer li a:hover {
  color: #fff;
  text-decoration: underline;
}

.mobile-nav .main-nav li a,
.mobile-nav .main-nav p.main-nav {
  color: #fff;
  text-decoration: none;
  display: block;
  cursor: pointer;
}

.mobile-nav .main-nav li p.main-nav {
  display: inline-block;
  padding-top: 17px;
  padding-bottom: 17px;
  width: calc(100% - 51px); /* Gesamtbreite minus Breite des rechten DIVs inkl. margin/padding */
  vertical-align: middle;
  padding-right: 10px;
  padding-left: 10px;
  box-sizing: border-box;
  font-size: 0.9375em;
  line-height: 153.333333333333333%;
}

.mobile-nav .main-nav li p.main-nav a.active,
.mobile-nav .main-nav li p.main-nav a.active:hover {
  color: #fff;
  text-decoration: underline;
}

.mobile-nav .main-nav li div.icon-open {
  width: 30px;
  height: 100%;
  display: inline-block;
  float: right;
  padding-left: 20px;
  vertical-align: middle;
  border-left: 1px solid #fff;
  padding-top: 10px;
  padding-bottom: 10px;
  font-size: 1.4375em;
  line-height: 152.173913043478261%;
}

.mobile-back-to-mainmenu {
  color: #fff;
  padding-left: 10px;
  padding-top: 10px;
  padding-bottom: 25px;
  display: none;
  cursor: pointer;
}

span.mobile-back-arrow {
  font-size: 1.4375em; /* 23px */
  margin-right: 22px;
  display: none;
  line-height: 0;
}

.mobile-nav div.main-nav > ul > li.open p.main-nav {
  border-right: none;
}

.mobile-nav div.main-nav > ul > li.open div.icon-open {
  display: none;
}

.mobile-nav .mobile-nav-footer ul {
  padding-left: 10px;
  margin-top: 20px;
  margin-bottom: 20px;
}

.mobile-nav .mobile-nav-footer ul li {
  color: #fff;
  list-style-type: none;
  list-style-image: none;
  margin: 0;
  padding: 0;
  font-size: 0.875em;
  line-height: 50px;
  line-height: 178.571428571428571%;
  padding-top: 5px;
  padding-bottom: 5px;
}

.mobile-nav .mobile-nav-footer li a {
  color: #fff;
  display: block;
}

.mobile-nav .mobile-nav-footer .social-media-wrapper {
  border-top: 1px solid #fff;
  padding-left: 10px;
  padding-top: 20px;
  padding-bottom: 35px;
  color: #fff;
}

.mobile-nav .mobile-nav-footer .social-media-wrapper p {
  font-size: 0.875em;
  line-height: 178.571428571428571%;
}

.mobile-nav .mobile-subnav {
  border-top: 1px solid #fff;
  padding-left: 45px;
  padding-top: 20px;
  padding-bottom: 10px;
  display: none;
}

.mobile-nav .mobile-subnav ul li a {
  text-decoration: none;
  display: block;
}

.mobile-nav .mobile-subnav ul li a.active {
  text-decoration: underline;
}

.mobile-nav .mobile-subnav ul li {
  border: none;
  font-size: 0.875em;
  line-height: 178.571428571428571%;
  padding-top: 10px;
}

.mobile-nav .mobile-subnav ul li:first-child {
  border: none;
}

.mobile-nav .mobile-subnav p.mobile-subnav-heading {
  font-size: 0.866666666666667em;
  line-height: 208.333333333333333%;
  color: #00a1e5;
}

.mobile-nav .mobile-subnav ul {
  margin-bottom: 30px;
}

.mobile-nav .mobile-subnav ul li a {
  padding-left: 1em;
}

.mobile-nav .mobile-subnav ul li a::before {
  content: '›';
  margin-left: -1em;
  position: absolute;
}

/* @end */

/* @group Media Queries */

@media only screen and (max-width: 899px) {
  
  .ym-wrapper {
    max-width: 628px; /* Gesamtbreite 768px, 628 = 2 x 308px + 12px Abstand */
    margin: 0 auto;
    padding-right: 9.114583333333333%; /* 70px/768 */
    padding-left: 9.114583333333333%; /* 70px/768 */
  }
  
  div.content-wrapper {
    width: 100% !important;
    margin-left: 0;
    margin-right: 0;
  }
  
  header .logo-metanav-wrapper {
    display: none;
  }
  
  header nav {
    display: none;
  }
  
  .header-wrapper div.mobile-nav,
  .header-wrapper div.mobile-nav nav {
    display: block;
  }
  
  div.additional .home-teaser-box {
    width: 49.044585987261146%;  /* 308px/628 */
    margin-right: 1.910828025477707%;  /* 12px/628px */
  }  
  
  div.additional .news .article:nth-child(2) {
    margin-right: 0;
  }
  
  div.additional .news .article:nth-child(3) {
    display: none;
  }
  
}

@media only screen and (max-width: 767px) {
  
  .scroll-top,
  .sticky-icons-wrapper .social-icons-contact,
  .sticky-icons-wrapper .social-icons-search,
  .sticky-icons-wrapper .addthis_inline_share_toolbox {
    display: none;
  }

  .video-teaser-ribbon,
  .mitglied-ribbon {
    top: 160px !important;
  }

 .video-teaser,
  .mitglied-werden {
    width: 140px;
    height: 140px;
    top: -10px;
  }
  
  footer {
    display: none;
  }
  
  div.mobile-footer {
    display: block;
  }
  
  div.addthis_inline_share_toolbox {
    display: block;
    width: 100%;
    height: 40px;
    top: auto;
    position: relative;
    text-align: center;
  }
  
  a.at-icon-wrapper.at-share-btn.at-svc-compact {
    background: url(../images/social-icon-share-mobile.png) center center no-repeat #2d346c !important;
    background-size: 90px !important;
    width: 100%;
    height: 40px;
    display: inline-block;
    margin: 0;
    padding: 0;
  }
  
  a.at-icon-wrapper.at-share-btn.at-svc-compact:hover {
    background: url(../images/social-icon-share-mobile.png) center center no-repeat #222653 !important;
    background-size: 90px !important;
  }
  
}

@media only screen and (max-width: 680px) {

  div.additional .home-teaser-box {
    height: 211px; /* Seitenverhaeltnis Boxen ist 308/240 = 1.28333... hier gerechnet: Breite 272 / 1.28333px */
  }
  
}

@media only screen and (max-width: 640px) {

  div.additional .home-teaser-box {
    height: 199px; /* Seitenverhältnis Boxen ist 308/240 = 1.28333... hier gerechnet: Breite 256...px / 1.28333... */
  }
  
}

@media only screen and (max-width: 540px) {
  
  .ym-wrapper {
    max-width: 308px; /* Gesamtbreite 320px */
    margin: 0 auto;
    padding-right: 1.875%; /* 70px/768 */
    padding-left: 1.875%; /* 70px/768 */
  }
  
  div.additional .home-teaser-box {
    width: 100%;
    margin-right: 0%;
    margin-bottom: 12px;
    height: 240px;
  }  
  
  div.additional .news .article:nth-child(3) {
    display: block;
  }
  
}

/* Print output */  
@media print {}

/* @end */