/* --------------------------- *\
  CSS RESET + ALLGEMEIN
\* --------------------------- */

html,body {
  margin:0;
  padding:0;
    background-repeat:#fff;
}

ul,li,h1,h2,h3,h4,h5,h6,p,figure,table {
  margin:0;
  padding:0;
}

header,nav,main,article,section,figure,figcaption,summary,details,aside,footer {
  display:block;
}

html {
  font-family:"Roboto","Helvetica Neue","Helvetica","Arial",sans-serif;
  font-size:100%;
  quotes:"„" "“";
}

*, ::before, ::after {
  box-sizing:border-box;
}

body {
  min-width:320px;
  direction:ltr;
  text-align:left;
  font-style:normal;
  font-family:"Roboto","Helvetica Neue","Helvetica","Arial",sans-serif;
  font-size:20px;
  font-weight:normal;
  letter-spacing:normal;
  line-height:1.45;
  color:#474747; 
  background-color:#f6f6f6;
  background:#f6f6f6;
}

h1,h2,h3,h4,h5,h6 {
  color:#111;
}

h1+*,h2+*,h3+*,h4+*,h5+*,h6+* {
  margin-top:1em;
}

p {
  font-size:1em;
}

p+h1,ul+h1,p+h2,ul+h2,p+h3,ul+h3,p+h4,ul+h4,p+h5,ul+h5,p+h6,ul+h6 {
  margin-top:3em;
}

p+*,ul+* {
  margin-top:1.5em;
}

p+ul {
  margin-top:1em;
}

ul+p {
  margin-top:2.5em;
}

.margin-0+p,.margin-0+ul,.margin-0+h1,.margin-0+h2,.margin-0+h3,.margin-0+h4,.margin-0+h5,.margin-0+h6,.margin-0+table {
  margin-top: 0.5em;
}

ul {
  list-style:disc;
  margin-left:1.2em;
}

nav ul {
  list-style:none;
  margin:0;
}

table {
  border:none;
  border-spacing:0;
}

strong {
  font-weight:500;
  color:#333;
}

small {
  font-size:0.8em;
  font-weight:300;
}


/* --------------------------- *\
   LINKS
\* --------------------------- */

a {
  color:rgb(0,132,138);
}

a:link,a:visited {
  text-decoration:none;
}

a:hover {
  text-decoration:underline;
}

a:active {
  text-decoration:none;
}

a:focus {}


/* STANDART LINK */
a.mehr-link {
  display:inline-block;
  position:relative;
  font-size:20px;
  padding-right:14px;
}

a.mehr-link::before,a.mehr-link::after {
  content:'';
  position:absolute;
  right:0;
  width:9px;
  height:2px;
  border-radius:1em;
  background-color:currentColor;
}

a.mehr-link::before {
  top:12.51px;
  -webkit-transform:rotate(45deg);
  transform:rotate(45deg);
}

a.mehr-link::after {
  bottom:9.49px;
  -webkit-transform:rotate(135deg);
  transform:rotate(135deg);
}


/* LINK BUTTON */
a.mehr-button {
  display:inline-block;
  position:relative;
  min-width:115px;
  font-size:16px;
  color:#333;
  padding:0.7em 1.5em;
  border:solid 2px #333;
  border-radius:2em;
  margin-top:2em;
  opacity:1;
  background:rgba(20,20,20,0);
  -webkit-transition:background 0.3s cubic-bezier(0.24, 0.06, 0.56, 1),color 0.3s cubic-bezier(0.24, 0.06, 0.56, 1);
  transition:background 0.3s cubic-bezier(0.24, 0.06, 0.56, 1),color 0.3s cubic-bezier(0.24, 0.06, 0.56, 1);
}

a.mehr-button:hover {
  text-decoration:none;
  opacity:1;
  background:rgba(20,20,20,1);
  color:#fff;
  -webkit-transition:background 0.3s cubic-bezier(0.24, 0.06, 0.56, 1),color 0.3s cubic-bezier(0.24, 0.06, 0.56, 1);
  transition:background 0.3s cubic-bezier(0.24, 0.06, 0.56, 1),color 0.3s cubic-bezier(0.24, 0.06, 0.56, 1);
}

.link-ext-icon {
  position:absolute;
  right:0;
  height:12px;
  width:2px;
  background:currentColor;
  border-radius:1em;
  right:18px;
  top:16px;
  -webkit-transform:rotate(45deg);
  transform:rotate(45deg);
}

.link-ext-icon::before,.link-ext-icon::after {
  content:'';
  position:absolute;
  width:2px;
  height:7px;
  background-color:currentColor;
  border-radius:1em;
}

.link-ext-icon::before {
  top:-2.49px;
  left:2px;
  -webkit-transform:rotate(135deg);
  transform:rotate(135deg);
}

.link-ext-icon::after {
  bottom:7.49px;
  left:-2px;
  -webkit-transform:rotate(45deg);
  transform:rotate(45deg);
}


/* --------------------------- *\
   LISTEN
\* --------------------------- */

.liste {
  display:block;
  font-size:1em;
  list-style:disc;
  margin-left:1.2em;
} 

.liste-space li {
  padding-bottom:0.75em;
}

.liste-space li:last-child {
  padding-bottom:0;
}


/* --------------------------- *\
   CSS ICONS / LABEL
\* --------------------------- */

.hinweis-icon {
  display:inline-block;
  position:relative;
  top:3px;
  width:18px;
  height:18px;
  margin-right:0.5em;
  border:solid 2px currentColor;
  border-radius:10px;
}

.hinweis-icon::before,.hinweis-icon::after {
  content:'';
  position:absolute;
  left:6px;
  width:2px;
  border-radius:1em;
  background-color:currentColor;
}

.hinweis-icon::before {
  top:3px;
  height:2px;
}

.hinweis-icon::after {
  top:6px;
  height:5px;
}

.hinweis-icon-text {
  font-size:18px;
  font-weight:300;
}

.mehr-icon {
  display:inline-block;
  position:relative;
  top:4px;
  left:0.45em;
  width:20px;
  height:20px;
  border:solid 2px currentColor;
  border-radius:12px;
}

.mehr-icon::before,.mehr-icon::after {
  content:'';
  position:absolute;
  left:7px;
  width:2px;
  background-color:currentColor;
  border-radius:1em;
}

.mehr-icon::before {
  top:3px;
  height:2px;
}

.mehr-icon::after {
  top:7px;
  height:6px;
}

.infolabel {
  display:inline-block;
  font-size:18px;
  font-weight:300;
  line-height:1.3em;
  color:#999;
  padding:0.3em 0.75em;
  border:solid 1px currentColor;
  border-radius:0.3em;
  margin-top:1.75em;
}

.label-aktuell {
  font-weight:400;
  color:orange;
  border-width:2px;
}


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

.zpo-main {
  width:100%;
    padding-top:44px;
}

.sprungmarke {
  position:absolute;
  top:-44px; 
}

.inline-block {
  display:inline-block;
  white-space: nowrap;
}

.nichtsichtbar {
  position:absolute;
  height:1px;
  width:1px;
  overflow:hidden;
}

@media only screen and (min-width:729px) {
  
  .nur-mobil {
    display:none;
  }
}

@media only screen and (max-width:728px) {
  
  .mobil-nichtsichtbar {
    display:none;
  }
}

@media only screen and (min-width:350px) {

  .nur-se {
    display:none;       
  }
}

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

  .se-nichtsichtbar {
    display:none;       
  }
}


/* --------------------------- *\
   SECTION INHALT PADDINGS
\* --------------------------- */

.section {
  position:relative;
  background-color:#fff;
  z-index:18;
}

.section-header {
  padding-top:44px;
}

.section-inhalt {
  width:100%;
  padding:5em 1.5em;
  text-align:left;
}

.padding-top {
  padding-top:5em;
  padding-bottom:0;
}

.padding-bottom {
  padding-bottom:5em;
  padding-top:0;
}

@media only screen and (min-width:729px) and (max-width:1068px) {
  
  .section-inhalt {
    padding:4em 1.5em;
  }
  
  .padding-top {
    padding-top:4em;
    padding-bottom:0;
  }

  .padding-bottom {
    padding-bottom:4em;
    padding-top:0;
  }
}

@media only screen and (max-width:728px) {
 
  .section-inhalt {
    padding:3.5em 1.5em;
  }
  
  .padding-top {
    padding-top:3.5em;
    padding-bottom:0;
  }

  .padding-bottom {
    padding-bottom:3.5em;
    padding-top:0;
  }
}


/* --------------------------- *\
   SECTION INHALT WEITEN
\* --------------------------- */

.fokus {
  max-width:544px;
  margin:0 auto; 
}

.kompakt {
 max-width:644px;
 margin:0 auto;
}

.standart {
 max-width:744px;
 margin:0 auto;
}

.medium {
 max-width:744px;
 margin:0 auto;
}

.large {
  max-width:964px;
  margin:0 auto;
  padding-left:0;
  padding-right:0;
}

.max {
  max-width:1024px;
  margin:0 auto;
  padding-left:0;
  padding-right:0; 
}

@media only screen and (min-width:729px) and (max-width:1068px) {

  .kompakt,.standart {
    max-width:644px;
  }
  
  .large {
    padding-left:2.5em;
    padding-right:2.5em;
  }
}

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

  .fokus,.kompakt,.standart,.medium,.max {
    max-width:464px;
  }
  
  .large {
    max-width:464px;
    padding-left:1.5em;
    padding-right:1.5em;
  }
}


/* --------------------------- *\
   SECTION TITEL
\* --------------------------- */

.section-titel {   
 color:#222;
 font-weight:500;
}

.titel-text {
  font-size:1em;
  font-weight:500;
  letter-spacing:0.015em;
}

.normal {
  font-weight:400;
}

.small {
  font-weight:400;
  font-size:17px;
}

.thin {
  font-weight:300;
}

.italic {
  font-style: italic;
}

.toptitel {
  margin-bottom:0.5em;
}

.toptitel + .section-titel {
  margin-top:0;
}

.hero-1 {
  font-size:3.2em;
}

.hero-2 {
  font-size:2.2em;
}

.hero-3 {
  font-size:1.9em;
}

.hero-4 {
  font-size:1.6em;
}

.titel-1 {
  font-size:1.4em;
}

.titel-2 {
  font-size:1.3em;
}

.titel-3 {
  font-size:1.1em;
}

.titel-4 {
  font-size:1em;
}

.titel-5 {
  font-size:0.9em;
}

@media only screen and (min-width:729px) and (max-width:1068px) {

  .hero-1 {
    font-size:3.1em;
  }
  
  .hero-2 {
    font-size:2.1em;
  }
  
  .hero-3 {
    font-size:1.7em;
  }
    
  .hero-4 {
    font-size:1.5em;
  }

  .titel-1 {
    font-size:1.3em;
  }
}

@media only screen and (max-width:728px) {
 
  .hero-1 {
    font-size:2.1em;
  }
  
  .hero-2 {
    font-size:1.6em;
  }
  
  .hero-3 {
    font-size:1.5em;
  }
    
  .hero-4 {
    font-size:1.3em;
  }

  .titel-1,.titel-2 {
    font-size:1.2em;
  }
  
  .titel-3 {
    font-size:1em;
  }
}


/* --------------------------- *\
   SECTION MODIFIKATIONEN
\* --------------------------- */

.center,.center-mobil-left {
  text-align:center;
}

@media only screen and (max-width:728px) {
  .center-mobil-left {
    text-align:left;
  }
}

.kontrast {
  background-color:#f6f6f6;
}

.border {
  border-bottom:solid 1px #dadada;
}

.section-abschnitt {
  padding-bottom:3em;
}

.section-abschnitt:last-child {
  padding-bottom:0;
}

h1+.section-abschnitt,h2+.section-abschnitt,h3+.section-abschnitt,h4+.section-abschnitt,h5+.section-abschnitt,h6+.section-abschnitt {
  margin-top:3em;
}


/* --------------------------- *\
   HEADER MIT HINTERGRUND
\* --------------------------- */

.section-header.mit-hintergrund {
  display:flex;
  flex-wrap:wrap;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  height:360px;
  overflow:hidden;
}

@media only screen and (min-width:729px) and (max-width:1068px) {

  .section-header.mit-hintergrund {
    height:350px;
  }
}

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

  .section-header.mit-hintergrund {
    height:220px;
  }
}

/* HEADER HINTERGRUND */
.header-hintergrund-img {
  position:absolute;
  top:0;
  left:0;
  right:0;
  z-index:15;
  width:100%;
  height:360px;
  background-repeat:no-repeat;
  background-position:center center;
  background-size:2600px 360px;
}

@media only screen and (min-width:729px) and (max-width:1068px) {
  
  .header-hintergrund-img {
    height:350px;
       background-size:1068px 350px;
  }
}

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

  .header-hintergrund-img {
    height:220px;
    background-size:728px 220px;
  }
}

 .logoheader {
  background-image:url(images/logoheader/360/360.png);
}
 .logoheader-black {
  background-image:url(images/logoheader/360/360b.png);
}

@media only screen and (min-width:729px) and (max-width:1068px) {

  .logoheader {
    background-image:url(images/logoheader/350/350.png);
  }
    .logoheader-black {
    background-image:url(images/logoheader/350/350b.png);
 
  }
}

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

  .logoheader {
    background-image:url(images/logoheader/220/220.png);
  }
    .logoheader-black {
    background-image:url(images/logoheader/220/220b.png);
  }
}

.mit-hintergrund .section-inhalt {
  display:flex;
  flex-direction: column;
  justify-content:center;
  align-items:center;
  position:absolute;
  top:0;
  height:100%;
}


/* --------------------------- *\
   SPALTEN LAYOUTS
\* --------------------------- */

.spalten {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
}

.spalten-space {
  display:flex;
  align-items:flex-start;
  justify-content:space-around;
}

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

  .spalten,.spalten-space {
     display:flex;
     flex-flow:column;
     justify-content:flex-start;
  }
}

.spalte {
  width:100%;
}

.spalte:nth-child(1) {
  padding-right:1em;
}

.spalte:nth-child(2) {
    padding-left:1em;
  }

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

  .spalte:nth-child(1) {
    padding-right:0;
  }

  .spalte:nth-child(2) {
    padding-left:0;
    padding-top:2.5em;
  }
}


/* STANDART SPALTEN NUR TYPO */
.spalte-titel {
  max-width:345px;
}

@media only screen and (min-width:729px) and (max-width:1068px) {
  
  .spalte-titel {
    max-width:330px;
  }
}

@media only screen and (max-width:728px) {
  
  .spalte-titel {
    max-width:100%;
  }
}

.spalte-text{
  width:55%;
  padding-top:0.5em;
}

@media only screen and (max-width:728px) {
  
  .spalte-text {
    width:100%;
  }
}