@font-face{font-family:Roboto;font-style:italic;font-weight:300;src:url(../fonts/roboto-v18-latin-300italic.eot);src:local('Roboto Light Italic'),local('Roboto-LightItalic'),url(../fonts/roboto-v18-latin-300italic.eot?#iefix) format('embedded-opentype'),url(../fonts/roboto-v18-latin-300italic.woff2) format('woff2'),url(../fonts/roboto-v18-latin-300italic.woff) format('woff'),url(../fonts/roboto-v18-latin-300italic.ttf) format('truetype'),url(../fonts/roboto-v18-latin-300italic.svg#Roboto) format('svg')}@font-face{font-family:Roboto;font-style:italic;font-weight:400;src:url(../fonts/roboto-v18-latin-italic.eot);src:local('Roboto Italic'),local('Roboto-Italic'),url(../fonts/roboto-v18-latin-italic.eot?#iefix) format('embedded-opentype'),url(../fonts/roboto-v18-latin-italic.woff2) format('woff2'),url(../fonts/roboto-v18-latin-italic.woff) format('woff'),url(../fonts/roboto-v18-latin-italic.ttf) format('truetype'),url(../fonts/roboto-v18-latin-italic.svg#Roboto) format('svg')}@font-face{font-family:Roboto;font-style:normal;font-weight:400;src:url(../fonts/roboto-v18-latin-regular.eot);src:local('Roboto'),local('Roboto-Regular'),url(../fonts/roboto-v18-latin-regular.eot?#iefix) format('embedded-opentype'),url(../fonts/roboto-v18-latin-regular.woff2) format('woff2'),url(../fonts/roboto-v18-latin-regular.woff) format('woff'),url(../fonts/roboto-v18-latin-regular.ttf) format('truetype'),url(../fonts/roboto-v18-latin-regular.svg#Roboto) format('svg')}@font-face{font-family:Roboto;font-style:normal;font-weight:500;src:url(../fonts/roboto-v18-latin-500.eot);src:local('Roboto Medium'),local('Roboto-Medium'),url(../fonts/roboto-v18-latin-500.eot?#iefix) format('embedded-opentype'),url(../fonts/roboto-v18-latin-500.woff2) format('woff2'),url(../fonts/roboto-v18-latin-500.woff) format('woff'),url(../fonts/roboto-v18-latin-500.ttf) format('truetype'),url(../fonts/roboto-v18-latin-500.svg#Roboto) format('svg')}@font-face{font-family:Roboto;font-style:italic;font-weight:500;src:url(../fonts/roboto-v18-latin-500italic.eot);src:local('Roboto Medium Italic'),local('Roboto-MediumItalic'),url(../fonts/roboto-v18-latin-500italic.eot?#iefix) format('embedded-opentype'),url(../fonts/roboto-v18-latin-500italic.woff2) format('woff2'),url(../fonts/roboto-v18-latin-500italic.woff) format('woff'),url(../fonts/roboto-v18-latin-500italic.ttf) format('truetype'),url(../fonts/roboto-v18-latin-500italic.svg#Roboto) format('svg')}@font-face{font-family:Roboto;font-style:italic;font-weight:700;src:url(../fonts/roboto-v18-latin-700italic.eot);src:local('Roboto Bold Italic'),local('Roboto-BoldItalic'),url(../fonts/roboto-v18-latin-700italic.eot?#iefix) format('embedded-opentype'),url(../fonts/roboto-v18-latin-700italic.woff2) format('woff2'),url(../fonts/roboto-v18-latin-700italic.woff) format('woff'),url(../fonts/roboto-v18-latin-700italic.ttf) format('truetype'),url(../fonts/roboto-v18-latin-700italic.svg#Roboto) format('svg')}@font-face{font-family:Roboto;font-style:normal;font-weight:700;src:url(../fonts/roboto-v18-latin-700.eot);src:local('Roboto Bold'),local('Roboto-Bold'),url(../fonts/roboto-v18-latin-700.eot?#iefix) format('embedded-opentype'),url(../fonts/roboto-v18-latin-700.woff2) format('woff2'),url(../fonts/roboto-v18-latin-700.woff) format('woff'),url(../fonts/roboto-v18-latin-700.ttf) format('truetype'),url(../fonts/roboto-v18-latin-700.svg#Roboto) format('svg')}

header {height: 500px; width: 100%; background-color: #fff; position: relative;}

body {background-color: #f1f0f0; font-family: 'Roboto'; font-size: 16px;}
#main {padding: 2%;}
.logo {width: 400px;  height: auto; z-index: 99; padding-left: 50px; padding-top: 50px; padding-bottom: 100px; margin-left: 30px;}
.logo-ref {margin-right: 20px; margin-bottom: 20px;}
nav {position: absolute; right: 0; top: 0;}
nav ul {width: 240px; height: auto; margin-top: 20px;}
nav ul li {position: relative; padding: 5px; padding-left: 15px; margin-bottom: 15px; background-color: #13a288; left: 12px;}
nav ul li::after {content: url(../images/navi-dreieck.jpg); position: absolute; right: 0px; bottom: -18px}
nav ul li a {color: #fff; text-transform: uppercase; text-decoration: none; font-weight: 300; font-style: italic;}
.info {background-color: #13a288; width: 100%; height: 55px; position: relative;}
.info p {color: #fff; padding-top: 14px; padding-left: 80px;}
.tel {position: absolute; right: 250px; top: 0px;}
.nr {position: absolute; right: 110px; font-weight: 300; font-style: italic;}

.a1 {font-weight: 500; font-style: italic;}
.a2 {font-weight: 300; font-style: italic;}
.a3 {font-weight: 500; color: #13a288;}
.a4 {font-weight: 500; padding-left: 50px; color: #13a288; font-size: 22px; text-transform: uppercase; text-decoration: underline;}
.a5 {font-weight: 300; font-style: italic; font-size: 22px; text-transform: uppercase; color: #fff; position: absolute; bottom: 0; margin-bottom: 13px; margin-left: 20px;}

section {background-color: #fff;}
.gwrap.eins {margin-bottom: 150px;}
.eins, .zwei, .vier {margin-bottom: 150px;}
.drei {background-color: #13a288; width: 100%; height: 450px; margin-bottom: 50px;}
.fuenf {background-color: #f1f0f0; position: relative; margin-bottom: 150px;}
.g12 {background-color: #f1f0f0; height: 100px; margin-bottom: 30px; width: 700px;}
h1 {padding-top: 36px; padding-left: 50px; color: #13a288; font-size: 32px; font-style: italic; font-weight: 300; text-transform: uppercase;}
h2 {padding-top: 20px; padding-left: 50px; color: #13a288; font-size: 32px; font-style: italic; font-weight: 300; text-transform: uppercase;}
h3 {color: #fff; text-transform: uppercase; text-decoration: underline; padding-left: 50px; padding-top: 50px; margin-bottom: 20px;}
h4 {color: #13a288; font-weight: 500; text-transform: uppercase; font-size: 22px; padding-left: 50px; padding-top: 50px;}
.g12 p {padding-top: 20px; color: #13a288; font-size: 16px; font-weight: 500; padding-left: 50px;}
.g12.leis {width: 360px;}
.g06 p {padding-left: 50px; padding-right: 50px;}
.g06 a {color: #000; text-decoration: none;}
.g06 a:hover {color: #13a288; font-style: italic;}

.icon {height: 56px;}
.titel {background-color: #13a288; width: 300px; height: 56px; position: relative;}
.titel p {position: absolute; bottom: 0; padding-bottom: 15px; right: 38px; color: #fff; text-decoration: underline; text-transform: uppercase; font-size: 22px;}

.button-head {
  text-align: center;

}
.button-head a{
color: white;
}

.g04 {margin-bottom: 50px;}
.g04 ul {margin-left: 30px;}
.g04 ul li {list-style-type: disc; color: #13a288;}

.text {color: #13a288;}
.accordion {margin-left: 50px;}
.g06 .nopad {padding-left: 0;}

.drei .gwrap .g06 p {color: #fff;}
.grafik {padding: 50px; width: 70%; height: auto; min-width: 300px;}

.btn {background-color: #13a288; width: 300px; height: 57px; margin-top: 30px; position: relative;}
.brief {padding-left: 12px; padding-top: 10px; width: 50px;}
.mail {padding-left: 14px; padding-top: 14px; width: 50px;}

.logo-small {display: block; margin: auto; position: absolute; left: 40%; top: -118px;}
.gwrap.pad {padding-top: 100px;}

.pfeil {position: fixed; right: 40px; bottom: 40px; width: 20px; height: auto; z-index: 99; width: 100px; text-align: center;}
.pfeil p {text-align: center; padding-top: 0px; color: #13a288; font-weight: 500;}
iframe {width: 100%; height: 400px;}

.unter {text-align: center; padding-top: 50px; font-size: 22px; text-transform: uppercase; margin-left: -100px; font-weight: 400;}
video {width: 80%; height: auto;}

/*---------------------------------------
MEDIA Queries | Tablet | Phone
---------------------------------------*/

@media screen and (max-width: 1199px) {
    .grafik {padding: 0; padding-top: 50px; width: 90%;}
    .unter {margin-left: 40px;}
    .button-head {
      margin-left: 0%;
      margin-right: 0%;
    }
}

@media screen and (max-width: 1051px) {
    .nr {right: 45px;}
    .tel {right: 180px;}
    .drei {height: 430px;}
    .gwrap.lefpad {padding-left: 50px;}
    .g04, .g03, .g05, .g06 {width: 95%;}
    .unter {margin-left: 65px;}

}

@media screen and (max-width: 1000px) {
    .info p {padding-left: 30px;}
    .logo {height: auto; margin-left: 30px; padding-bottom: 70px; padding-left: 0; padding-top: 50px; width: 290px; z-index: 99;}
    h1 {padding-left: 0px;}
    .g06 p, .g12 p, .gwrap.lefpad, h2, .a4, .accordion, h3 {padding-left: 0px;}
    .a5 {margin-left: 70px;}
    .tel {right: 170px; top: 13px; width: 30px;}
    .nr {right: 30px;}
    .drei {height: 600px;}
    .grafik {width: 55%;}

}

@media screen and (max-width: 905px) {
    .info {height: 85px;}
    header {height: 450px;}
    .nr {top: 45px;}
    .tel {right: 160px; top: 45px;}
    .unter {margin-left: 95px;}
}

@media screen and (max-width: 780px) {
    .info p {padding-right: 30px;}
    .eins, .zwei, .vier {margin-bottom: 80px;}
    .g12, .g12.leis {width: 100%;}
    .drei {width: auto;}
    .button-head {
      margin-left: 0%;
      margin-right: 0%;
    }
}

@media screen and (max-width: 563px) {
    .logo {padding-bottom: 115px; width: 43%; height: auto;}
    h1 {line-height: 38px; padding-top: 18px;}
    .g12 {height: auto; padding-bottom: 20px;}
    .g12 p {padding-top: 0px; padding-right: 30px;}
    nav ul li {margin-bottom: 12px;}
    .logo-small {left: 25%;}
    .unter {margin-left: 0;}
}

@media screen and (max-width: 500px) {
    .info {height: 110px;}
    .tel, .nr {top: 70px;}
    .logo-small {left: 20%;}
    nav ul li {left: 0px;}
    .logo {width: 37%;}
    .g06 p {padding-right: 0px;}
}

@media screen and (max-width: 450px) {
    nav ul {width: 208px; margin-top: 15px;}
    nav ul li a {font-size: 14px;}
    header {height: 425px;}
    .drei {height: 650px;}
    .grafik {width: 55% !important; max-width: 250px;}
    .g06 p {padding-right: 0px;}
    .pfeil {background-color: #fff; padding: 10px; border: 2px solid #13a288; bottom: 15px; right: 25px;}
}

@media screen and (max-width: 399px) {
    .drei {height: 600px;}
    header {height: 475px;}
        .logo {width: 60%; padding-top: 15px; margin-left: 65px; padding-bottom: 318px;}
    nav ul {margin-top: 205px;}
    h1 {padding-left: 15px;}
    .g12 p {padding-left: 15px;}
    .info {display: none;}
}

@media screen and (max-width: 351px) {
    .info {height: 135px;}
    h1 {padding-top: 35px;}
    .tel, .nr {top: 100px;}
}