@font-face {
  font-family:'Roboto';
  font-style:normal;
  font-weight:300;
  font-display:swap;
  src:local('Roboto Light'),local('Roboto-Light'),url("/fonts/Roboto/roboto_light.woff2") format("woff2"),url("/fonts/Roboto/roboto_light.woff") format("woff"),url("/fonts/Roboto/roboto_light.ttf") format("truetype");
}
@font-face {
  font-family:'Roboto';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:local('Roboto'),local('Roboto-Regular'),url("/fonts/Roboto/roboto_regular.woff2") format("woff2"),url("/fonts/Roboto/roboto_regular.woff") format("woff"),url("/fonts/Roboto/roboto_regular.ttf") format("truetype");
}
@font-face {
  font-family:'Roboto';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:local('Roboto Medium'),local('Roboto-Medium'),url("/fonts/Roboto/roboto_medium.woff2") format("woff2"),url("/fonts/Roboto/roboto_medium.woff") format("woff"),url("/fonts/Roboto/roboto_medium.ttf") format("truetype");
}


/* --------------------------- *\
   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;
}

#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;
    white-space: nowrap;
}

#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;
  }
}

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

  #zpo-nav .titel-se {
    display:none;       
  }
}

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

  #zpo-nav .se-nichtsichtbar {
    display:none;       
  }
}

#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;
}


/* --------------------------- *\
  CSS RESET
\* --------------------------- */

html,body {
  margin:0;
  padding:0;
}

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:rgb(8,104,108);
background-color:rgb(8,104,108);  
}

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,.strong {
  font-weight:500;
  color:#333;
}

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


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

a {
color:rgb(0,104,108);
-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);
}

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

a:hover {
  text-decoration:underline;
-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);
}

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:110px;
  font-size:16px;
  color:rgb(8,104,108);
  padding:0.6em 1.5em;
  border:solid 2px rgb(8,104,108);
  border-radius:2em;
  margin-top:2em;
  opacity:1;
  -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;
background:rgb(8,104,108);
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);
}


/* --------------------------- *\
   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
\* --------------------------- */

.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;
}



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

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

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

.inline {
    display: inline;
}

.inline-block {
  display:inline-block;
}

.nowrap {
    white-space:nowrap;
}

.hyphens-auto {
    hyphens:auto;
}

.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
\* --------------------------- */

.section {
z-index:20;
position:relative;
text-align:left;
background-color:#ffffff;
}

.section.kontrast, .kontrast {
background-color:#f6f6f6;
}

.section-inhalt {
  width:100%;
  padding:0 1.5em;
}

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



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

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

.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-padding {
    padding-top:4em;
    padding-bottom:4em;
  }
  
  .padding-top {
    padding-top:4em;
    padding-bottom:0;
  }

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

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

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



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

.large-3 {
  max-width:1064px;
  margin:0 auto;
}


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

.large-3 {
    max-width:464px;
  }
}



/* --------------------------- *\
   TEXT MODIFIKATIONEN
\* --------------------------- */

.section-titel {   
font-weight:500; 
letter-spacing:0.01em;
color:#222;
}

.titel-padding {
    padding-bottom:1.5em;
}

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

.normal,.section-titel.normal {
  font-weight:400;
}

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

.thin {
  font-weight:300;
}

.italic {
  font-style: italic;
}

.hero {
  font-size:3.2em;
}

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

.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:1.1em;
}

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

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

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

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

  .hero {
    font-size:3.1em;
  }
  
  .hero-1 {
  font-size:2.5em;
}
  
  .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 {
    font-size:2.1em;
  }
  
    .hero-1 {
  font-size:1.8em;
}
  
  .hero-2 {
    font-size:1.6em;
  }
  
  .hero-3 {
    font-size:1.5em;
  }
  
  .hero-4 {
    font-size:1.35em;
  }

  .titel-1,.titel-2 {
    font-size:1.2em;
  }
    
  .titel-4,.titel-5 {
    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;
  }
}

.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(/zpo/main/styles/images/logoheader/360/360b.png);
}

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

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

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

    .logoheader {
    background-image:url(/zpo/main/styles/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;
  }
}



/* INFOOBX */
.infobox {
margin: 0 auto;
border: solid 1px #dadada;
border-radius: 0.8em;
box-shadow:0px 0px 5px rgba(0,0,0,0.05);
}

.infobox-inhalt {
font-size: 17px;/* !wichtig */
padding: 1.5em;
}

.infobox-abschnitt {
border-bottom: solid 1px #dadada;
padding: 2em 0;
}

.infobox-abschnitt:first-child {
padding-top: 0;
}

.infobox-abschnitt:last-child {
padding-bottom: 0;
border:none;
}