@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700');
body {font-family: 'Open Sans', sans-serif;color: #fff; font-weight: 300; font-size: 14px}

.logo {position: fixed; top: 30px; left: 0; z-index: 1000 }
nav {position: fixed; top: 30px; right: 10px; z-index: 1000}
nav ul li {display: inline-block;}
nav ul li:first-of-type {margin-right: 10px}
nav ul li a {color: #000; background: #f5df1f; padding: 5px 10px; text-decoration: none; border-radius: 10px; font-weight: 700}

h1, h2 {color: #fff; font-size: 90px; font-weight: 700; text-transform: uppercase; line-height: 73px}
h3 {color: #fff; font-size: 30px; font-weight: 700; text-transform: uppercase; line-height: 34px}
span {color: #f5df1f; text-transform: uppercase; font-weight: 600}
strong {font-weight: 600}

.eyecatcher {background: url("../images/header.jpg")no-repeat; height: 700px;  background-attachment: fixed; background-position: center;background-repeat: no-repeat; background-size: cover; position: relative; z-index: 100}
.para-1 {background: url("../images/veranstaltung.jpg")no-repeat; height: 600px;  background-attachment: fixed; background-position: center;background-repeat: no-repeat; background-size: cover; position: relative; z-index: 100}
.para-2 {background: url("../images/kontakt.jpg")no-repeat; height: 600px;  background-attachment: fixed; background-position: center;background-repeat: no-repeat; background-size: cover; position: relative; z-index: 100}

.eyecatcher img {position: absolute; bottom: 0; left: 0; width: 100%}
.oben-para-1, .oben-para-2 {position: absolute; top: 0; left: 0; width: 100%}
.unten-para-1, .unten-para-2 {position: absolute; bottom: 0; left: 0; width: 100%}

#home {background: #a7251b; padding: 180px 0; margin-top: -180px}
#home .unten p, #stelle .unten p {font-size: 25px; font-weight: 300}
#stelle {background: #000; padding: 180px 0; color: #fff; margin-top: -150px}

#stelle ul li {position: relative; padding-left: 10px}
#stelle ul li::before {content:url("../images/list.png"); color: #f5df1f;position: absolute; top: -3px; left: 0}

.unten {padding-bottom: 40px; }
.senden {color: #000; background: #f5df1f; padding: 5px 10px; text-decoration: none; border-radius: 10px; font-weight: 700; margin-top: 30px; display: inline-block}
.senden:hover, nav ul li a:hover {color: #E30613}

#impressum {background: #333333; padding: 150px 0 150px 0}
#impressum a {color: #fff; text-decoration: none}
#impressum a:hover {color: #f5df1f}

.datenschutz {position: fixed; bottom: 0; left: 0; width: 100%; background: #000; height: 40px; z-index: 100}
.datenschutz a {color: #fff; text-decoration: none;font-size: 14px; padding: 6px 10px 0 0}
.datenschutz a:hover {color: #f5df1f!important}
.datenschutz a:nth-of-type(1) {position: absolute; top: -34px; left: calc(50% - 19px)}
.datenschutz a:nth-of-type(2) {color: #fff; text-decoration: none; float: right}
.datenschutz a:nth-of-type(3) {color: #fff; text-decoration: none; float: right; }


@media screen and (max-width: 1300px) {
    .para-1, .para-2, .eyecatcher {background-attachment: scroll}
}


@media screen and (max-width: 800px) {
    .eyecatcher {height: 500px}
    .para-1, .para-2 {height: 400px}
}

@media screen and (max-width: 550px) {
    nav ul li {display: block; text-align: right}
    nav ul li:first-of-type {margin-right: 0; margin-bottom: 10px}
    nav ul li a {padding: 5px; font-size: 15px;}
    h1 {font-size: 50px; line-height: 50px}
}

@media screen and (max-width: 450px) {
    .eyecatcher {height: 400px}
     .para-1, .para-2 {height: 300px}
    
}

@media screen and (max-width: 430px) {
    .logo {max-width: 45%; top: 0}
    nav {top: 10px}
     .eyecatcher {height: 400px}
}