@import url('https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700');

body {font-family: 'Roboto', sans-serif; color: #8b8b8b}
header {position: relative; }
.logo {position: absolute; left: 0; top: 0; width: 100px; height: 100px}
.unten {margin-bottom: 20px}
strong {font-weight: 700}

nav {position: fixed; top: 0; left: 0; width: 100%; background: #fff; height: 100px; z-index: 100;
-webkit-box-shadow: 0px 4px 15px -6px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 4px 15px -6px rgba(0,0,0,0.75);
box-shadow: 0px 4px 15px -6px rgba(0,0,0,0.75);}
nav ul {position: absolute; right: 2%; top: 35px}
nav ul li {display: inline-block; padding-left: 10px}
nav ul li a {text-decoration: none; color: #818181; text-transform: uppercase; font-weight: 300; font-size: 15px}
nav ul li a:hover {color: #2a8c97; font-weight: 400}
nav p {color:#2a8c97; font-size: 20px; position: absolute; top: 5px; left: 120px; text-transform: uppercase; font-weight: 300}

.eyecatcher {background: url("../images/header.jpg")no-repeat; background-size: cover; padding-top: 100px; position: relative; height: 547px; text-align: center}
.leistungen {background: url("../images/leistungen.jpg")no-repeat; background-size: cover; padding-top: 100px; position: relative; height: 400px; text-align: center}
.eyecatcher img, .leistungen img {width: 80%; height: auto; max-height: 1258px; margin: 0 auto}
.eyecatcher p:first-of-type {color: #fff; font-size: 60px; font-weight: 100; padding-top: 150px}
.leistungen p {color: #fff; font-size: 60px; font-weight: 100; padding-top: 20px}
.eyecatcher p:last-of-type {color: #fff; font-weight: 100}

h1, h2 {color:#2a8c97; font-weight: 300; font-size: 35px; position: relative}
h4 {color:#fff; font-weight: 300; font-size: 35px; position: relative}
h1::before, h2::before {content: url("../images/headline.jpg"); position: absolute; top: 0; left: -30px}
h4::before {content: url("../images/footer-headline.jpg"); position: absolute; top: 0; left: -30px}
h3 {background:#2a8c97; color: #fff; padding: 0 15px; font-size: 15px; display: inline-block; }

#home, #leistungen, #kontakt {position: relative; padding: 130px 0}
#home img {width: 100%; height: auto; max-width: 378px;padding-top: 20px}
#kontakt a {text-decoration: none; color:#2a8c97 }
#impressum {position: relative; background: url("../images/bg-footer.jpg")no-repeat; padding: 50px 0; background-size: cover}
#impressum p, #impressum a {color: #fff; text-decoration: none}

.liste ul {padding: 10px 0 20px 0}
.liste ul li {position: relative; padding-left: 16px}
.liste ul li::before {position: absolute; top: 0; left: 0; content: url("../images/list.jpg")}

.karte iframe {width: 100%; height: 300px}

.top {text-align: center}

@media screen and (max-width: 740px) {
    nav ul {top: 68px}
    
}

@media screen and (max-width: 450px) {
    nav ul {top: 100px; background: rgba(42,140,151, 0.8); right:0; width: 100%}  
    nav ul li {padding: 2px 10px}
    nav ul li a {color: #fff;}
    .leistungen {height: 300px}
}

@media screen and (max-width: 400px) {
    
    nav ul li a {font-size: 12px; font-weight: 400}
}