/* --------------------------- *\
   NAVIGATION
\* --------------------------- */

#zpo-nav,#zpo-nav:before,#zpo-nav:after,#zpo-nav *,#zpo-nav *:before,#zpo-nav *:after {
  box-sizing:content-box;
  margin:0;
  padding:0;
  letter-spacing:0.03em;
}

#zpo-nav *,#zpo-nav *:before,#zpo-nav *:after {
  font-size:1em;
  font-family:inherit;
  font-weight:inherit;
  line-height:inherit;
  text-align:inherit;
}

#zpo-nav nav {
  display:block;
}

#zpo-nav ul {
  list-style:none;
}

#zpo-nav,#zpo-nav input {
  direction:ltr;
  text-align:left;
  font-family:"Roboto", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
}

#zpo-nav a,#zpo-nav a:hover {
  text-decoration:none;
  color:#fff;
  -webkit-transition:opacity 0.3s cubic-bezier(0.24, 0.06, 0.56, 1);
  transition:opacity 0.3s cubic-bezier(0.24, 0.06, 0.56, 1);
}

#zpo-nav {
  position:fixed;
  top:0;
  left:0;
  z-index:99;
  display:block;
  width:100%;
  height:44px;
  background:rgba(8,104,108,1);
  font-size:17px;
}

#zpo-nav .zpo-nav-inhalt {
  position:relative;
  z-index:2;
  max-width:1046px;
  margin:0 auto;
  padding-left:11px;
  padding-right:11px;
}

@supports (padding:max(0px)) {
  #zpo-nav .zpo-nav-inhalt {
    padding-left:max(11px, env(safe-area-inset-left));
    padding-right:max(11px, env(safe-area-inset-right));
  }
}

@media only screen and (max-width:767px) {
  #zpo-nav .zpo-nav-inhalt {
    min-width:320px;
    padding:0;
  }
  
  @supports (padding:max(0px)) {
    #zpo-nav .zpo-nav-inhalt {
      padding-left:max(0, env(safe-area-inset-left));
      padding-right:max(0, env(safe-area-inset-right));
    }
  }
}

#zpo-nav .zpo-nav-titel {
  position:relative;
  z-index:200;
  display:inline-block;
  font-size:18px;
  font-weight:500;
  padding-left:11px;
  line-height:1.2em;
  color:#fff;
}

#zpo-nav .zpo-nav-untertitel {
  font-size:17px;
  font-weight:300;
  color:#fff;
  opacity:0.8;
  padding-left:0.5em;
}

@media only screen and (max-width:514px) {
  #zpo-nav .zpo-nav-untertitel,#zpo-nav .nav-mobil-nichtsichtbar {
    position:absolute;
    height:1px;
    width:1px;
    overflow:hidden;
  }
}

#zpo-nav .zpo-nav-links {
    display:flex;
    justify-content:space-between;
    align-items:center;
    height:44px;
    font-size:14px;
    line-height:1em;
}

#zpo-nav .zpo-nav-link {
  display:block;
  padding:5px 11px;
  font-weight:400;
  color:#fff;
  opacity:0.8;
  white-space:nowrap;
}

#zpo-nav .zpo-nav-link:hover {
  opacity:1;
}



/* --------------------------- *\
   MAIN
\* --------------------------- */

body {
  background:#fff;
}

/* IMAGEFLEX */
.spalten-imageflex {
  display:flex;
  justify-content:space-around;
  align-items:center;
  max-width:844px;
  margin:0 auto;
  padding:5em 1.5em 5.5em 1.5em;
}

.spalte-image {
  width:360px;
  min-width:350px;
}

.spalte-image-text {
  max-width:330px;
}

@media only screen and (max-width:867px) {
    
  .spalten-imageflex {
    flex-direction:column;
    justify-content:center;
    width:100%;
    padding:2.5em 0 4em 0;
  }  
  
  .spalte-image-text {
    text-align:center;
    padding:1em 0 0 0;
  }
}

@media only screen and (max-width:728px) {
  
  .spalte-image {
    width:320px;
    min-width:320px;
  }
  
  .spalte-image-text {
    width:320px;
    padding:1em 1.5em 0 1.5em;
  }
}


/* IMAGEFLEX ERROR404 GRAFIKEN */
.error-grafik {
  height:350px;
  width:350px;
  background-image:url(/errors/images/image_large.png);
  background-repeat:no-repeat;
  background-position:center center;
  background-size:contain;
}

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

  .error-grafik {
    height:250px;
    width:inherit;
    background-image:url(/errors/images/image_small.png);
    margin:0 auto;
    background-position:center right 22px;
  } 
}


/* --------------------------- *\
   FOOTER
\* --------------------------- */