body {
color: grey;
background-color: #eee;
font-size: 1.6rem;
line-height: 1.7;
}

h2 {
font-size: 4rem;
color: #524f50;
font-weight: 500;
margin: 3rem 0;
text-align: center;
}

h3 {
font-size: 3rem;
color: #524f50;
font-weight: 400;
margin-top: 20px;
}

ul {
list-style-image: url('../point.png');
}

ol {
list-style: decimal outside;
}

ul,
ol {
padding-left: 1.5rem;
line-height: 1.3;
}

ul li {
text-indent: -1.6rem;
}

a {
color: #fffaf2;
}

a:hover {
color: #888;
}

p {
margin-bottom: 1rem;
}

button {
height: 25px;
line-height: 25px;
background-color: #fffaf2;
}

.button.button-primary {
background-color: #524f50;
border-color: #524f50;
color: #fffaf2;
}

.button.button-primary:hover {
background-color: #414141;
border-color: #414141;
}

p.copyright {
font-size: 1.25rem;
margin-top: 1rem;
}

/*--------------------------------*/
input[type="email"],
input[type="text"],
textarea {
height: 30px;
margin-bottom: 1.2rem;
}

textarea {
min-height: 120px;
}

input[type="email"]:focus,
input[type="text"]:focus,
textarea:focus {
height: 30px;
border: 1px solid #524f50;
outline: 0;
margin-bottom: 1.2rem;
}

input[type="submit"].button-primary,
input[type="submit"].button-primary:hover,
input[type="submit"].button-primary:focus {
color: #FFF;
background-color: #524f50;
border-color: #524f50;
}

input[type="submit"].button-primary:hover,
input[type="submit"].button-primary:focus {
color: #fffaf2;
}


/*--------------------------------*/
.container {
padding: 0 20px;
max-width: 1920px;
}

.container:first-of-type {
padding: 20px 20px;
}

/* Hero image and text */
.herotext {
margin: 35rem 0rem 3rem 0rem;
width: 50%;
font-size: 5vw;
color: #524f50;
}

.herotextbtn {
visibility: hidden;
display: none;
}

@media (min-width: 400px) {
.herotextbtn {
visibility: visible;
display: block;
}
}

.mainimage {
background-image: url('../foto_1.jpg');
background-repeat: no-repeat;
background-position: 60% 25%;
background-size: contain;
margin-bottom: 3rem;
max-width: 100%;
height: 550px;
}

@media (min-width: 520px) {
.mainimage {
background-image: url('../foto_1.jpg');
background-position: 60% 0%;
background-size: cover;

}
}

@media (min-width: 600px) {
.mainimage {
background-image: url('../foto_3.jpg');
background-position: 60% 0%;
background-size: cover;
height: 600px;
}
}

@media (min-width: 900px) {
.mainimage {
background-image: url('../foto_3.jpg');
}
}

@media (min-width: 1200px) {
.mainimage {
height: 700px;
}
}

@media (min-width: 1400px) {
.mainimage {
height: 800px;
}
}

@media (min-width: 1600px) {
.mainimage {
height: 900px;
}
}

@media (min-width: 1800px) {
.mainimage {
height: 1000px;
}
}

@media (min-width: 2000px) {
.mainimage {
height: 1100px;
}
}

/* Background Colors */

.bggradient {
background: linear-gradient(#524f50, #9e8f8f);
}

/* spacer */
.img_spacer1 {
min-height: 3em;
background-image: url(../trenner1.jpg);
background-size: contain;
margin: 1em 0;
}

.img_spacer2 {
min-height: 3em;
background-image: url(../trenner2.jpg);
background-size: contain;
margin: 1em 0;
}

.img_spacer3 {
min-height: 3em;
background-image: url(../trenner3.jpg);
background-size: contain;
margin: 1em 0;
}

.img_spacer4 {
min-height: 3em;
background-image: url(../trenner4.png);
background-size: contain;
margin: 1em 0;
}

@media only screen and (min-width: 550px) {
.img_spacer1 {
margin: 3em 0 0;
min-height: 8em;
}

.img_spacer2 {
margin: 3em 0 0;
min-height: 8em;
}

.img_spacer3 {
margin: 3em 0 0;
min-height: 8em;
}

.img_spacer4 {
margin: 3em 0 0;
min-height: 8em;
}
}

/* we_images */
.img_us {
height: 300px;
}

@media only screen and (min-width: 550px) {
.img_us {
height: 100px;
}
}

@media only screen and (min-width: 800px) {
.img_us {
height: 200px;
}
}

@media only screen and (min-width: 1200px) {
.img_us {
height: 300px;
}
}


/* Logo */
.logo {
background: linear-gradient(#9e8f8f, #524f50);
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
color: #fff;
text-align: center;
position: -webkit-sticky;
/* Safari */
position: sticky;
float: left;
left: 7rem;
top: 0;
width: 100%;
height: 8rem;
/* 121px; */
z-index: 10;
}

h1.logo {
line-height: 1;
letter-spacing: -.1rem;
word-spacing: 0.5rem;
font-weight: 900;
}

#logolink {
font-size: 2.2rem;
text-decoration: none;
color: #fffaf2;
}

#logolink2 {
font-size: 2.0rem;
text-decoration: none;
color: #fffaf2;
}

@media (min-width: 400px) {
.logo {
width: 45rem;
}

h1.logo {
line-height: 1.5;
}

#logolink {
font-size: 3.2rem;
}

#logolink2 {
visibility: hidden;
display: none;
}
}

/* Desktop Nav */
.nav {
text-align: right;
padding-right: 5%;
border-top: 5px solid #524f50;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
position: fixed;
width: 100%;
height: 3.5rem;
top: 0px;
z-index: 2;
font-family: Arial, "MS Trebuchet", sans-serif;
font-size: 2rem;
word-spacing: 2rem;
background-color: grey;
}

.nav a {
color: #fffaf2;
text-decoration: none;
word-spacing: 0.0rem;
}

.nav a:hover {
color: #666666;
text-decoration: none;
}

.nav p {
padding-right: 20px;
}


/* Mobile Nav */
.monav {
line-height: 1.7;
font-size: 1.25em;
font-family: Arial, "MS Trebuchet", sans-serif;
border-top: 5px solid #d16727;
position: fixed;
width: 100%;
height: 7rem;
bottom: 0px;
z-index: 1;
color: #1eaedb;
background-color: #414141;
}

.monav a {
line-height: 1.7;
font-size: 1.25em;
color: #fffaf2;
text-decoration: none;
}

.monav a:visited {
line-height: 1.7;
font-size: 1.25em;
text-decoration: none;
}

.monav a:hover {
line-height: 1.7;
font-size: 1.25em;
color: #fffaf2;
text-decoration: none;
}

.monav a:link {
line-height: 1.7;
font-size: 1.25em;
color: #fffaf2;
text-decoration: none;
}

.icon {
width: 5.5rem;
margin: 1rem;
font-size: 1rem;
text-align: center;
}


/* nav on sub-pages */
.navpages {
text-align: center;
word-spacing: 10rem;
border-top: 5px solid #524f50;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
position: fixed;
width: 100%;
height: 3.5rem;
top: 0px;
z-index: 2;
font-family: Arial, "MS Trebuchet", sans-serif;
font-size: 2rem;
word-spacing: 2rem;
background-color: grey;
}

.navpages a {
color: #fffaf2;
text-decoration: none;
}

.navpages a:hover {
color: #666666;
text-decoration: none;
}

.kontakt_id p {
text-align: center;
}

.impressum a,
.privacy a {
color: grey;
}

@media (min-width: 0px) and (max-width: 399px) {
.nav {
visibility: hidden;
display: none;
}

.navl {
visibility: hidden;
display: none;
}

.navxl {
visibility: hidden;
display: none;
}

.navxxl {
visibility: hidden;
display: none;
}

.navxxxl {
visibility: hidden;
display: none;
}

.monav {
visibility: visible;
display: block;
}
}

@media (min-width: 400px) and (max-width: 779px) {
.nav {
visibility: hidden;
display: none;
}

.navl {
visibility: hidden;
display: none;
}

.navxl {
visibility: hidden;
display: none;
}

.navxxl {
visibility: hidden;
display: none;
}

.navxxxl {
visibility: hidden;
display: none;
}

.monav {
visibility: visible;
display: block;
}
}

@media (min-width: 780px) and (max-width: 929px) {
.nav {
visibility: visible;
display: block;
}

.navl {
visibility: visible;
display: block;
}

.navxl {
visibility: hidden;
display: none;
}

.navxxl {
visibility: hidden;
display: none;
}

.navxxxl {
visibility: hidden;
display: none;
}

.monav {
visibility: visible;
display: block;
}
}

@media (min-width: 930px) and (max-width: 1029px) {
.nav {
visibility: visible;
display: block;
}

.navl {
visibility: hidden;
display: none;
}

.navxl {
visibility: visible;
display: block;
}

.navxxl {
visibility: hidden;
display: none;
}

.navxxxl {
visibility: hidden;
display: none;
}

.monav {
visibility: visible;
display: block;
}
}

@media (min-width: 1030px) and (max-width: 1199px) {
.nav {
visibility: visible;
display: block;
}

.navl {
visibility: hidden;
display: none;
}

.navxl {
visibility: hidden;
display: none;
}

.navxxl {
visibility: visible;
display: block;
}

.navxxxl {
visibility: hidden;
display: none;
}

.monav {
visibility: hidden;
display: none;
}
}

@media (min-width: 1200px) {
.nav {
visibility: visible;
display: block;
}

.navl {
visibility: hidden;
display: none;
}

.navxl {
visibility: hidden;
display: none;
}

.navxxl {
visibility: hidden;
display: none;
}

.navxxxl {
visibility: visible;
display: block;
}

.monav {
visibility: hidden;
display: none;
}
}