:root {
    --color-background: rgb(231, 226, 220);
    --primary-color: rgb(103, 82, 85);
    --green-background:  rgb(198, 195, 118);
    --text-color-green-background: rgb(110, 105, 65);
}

body, html { margin: 0; font-family: "Source Sans Pro", sans-serif; font-size: 22px;
    background: var(--color-background); color: var(--primary-color); font-weight: 400; scroll-padding-top: 100px; }
* { box-sizing: border-box; }

a, a:link, a:visited, a:active { text-decoration: none; }
a { color: #000000; transition: border 1.25s; border-bottom: solid 1px transparent; font-style: italic; }
a:hover { border-bottom: solid 1px #000000; }

div.green { background: var(--green-background); color: var(--text-color-green-background); padding: 50px 0; margin: 50px 0; box-shadow: 0 0 20px #AAA; }

header, footer, nav, article, section { display: block; }

img.logo { width: 300px; margin: 0 auto; display: block; }
img.banner { border: 0; width: 1100px; display: block; margin: 120px auto 20px; } /*  box-shadow: 0 0 50px #ccc; */
img.float { float: right; width: 400px; }
img.float-left {float: left; width: 300px; margin-left: -50px; margin-right: 30px;}
img.banner-wide { border:0; display: block; margin: 120px auto 20px; width: 100%; margin-bottom: -300px; margin-top: -50px;}

.teamarbeit-section{margin-top: 200px;}

.cta{color: var(--primary-color); border-bottom: none; display: inline-flex; align-items: center; text-decoration: none;}
.cta:hover {border-bottom: none;}
.cta img { height: 30px;}
.telephone-number{font-size: 20px; font-weight: bold; line-height: 200px}

p { line-height: 1.5; margin: 10px auto; width: 980px;}
h1 { text-align: center; margin-top: 40px; font-family: "Wendy One", sans-serif; font-size: 42px; }
h2 { text-align: center; margin-top: 80px; font-family: "Wendy One", sans-serif; font-size: 36px; }
h3 { text-align: center; margin-top: 20px; font-family: "Wendy One", sans-serif;}

hr { border: none; border-bottom: 1px solid #000;}

ul.bullet-none { list-style: none; }
li {margin-bottom: 5px;}

.center { text-align: center; }
.left { text-align: left; }
.right { text-align: right; }
.nowrap { white-space: nowrap; }
.clear { clear: both; }
.inline { vertical-align: top; display: inline-block; }

.spacer { height: 60px; }

footer { text-align: center; margin: 100px auto 20px; }

.header { width: 100%; padding: 0; background-color: var(--green-background); box-shadow: 0 2px 5px rgba(0,0,0,0.08); position: sticky; top: 0; z-index: 10; border-bottom: none; }
.header-content { display: flex; justify-content: space-between; align-items: center; height: 90px; max-width: 980px; margin: 0 auto; }
.logo img{height: 80px; width: auto;}
.navigation { display: flex; gap: 30px; margin-right: 30px;}
.navigation a {border-bottom: none; text-decoration: none; color: var(--primary-color); font-family: "Wendy One", sans-serif; font-size: 20px; text-transform: none; transition: color 0.2s ease; position: relative; font-style: normal; padding-bottom: 5px; margin-top: 5px;}
.navigation a::after { content: ''; position: absolute; width: 0; height: 2px; bottom: 0; left: 0; background-color: var(--primary-color); transition: width 0.3s ease-out;}
.navigation a:hover::after { width: 100%; }

.menu-toggle { display: none; position: relative; width: 30px; height: 25px; background: transparent; border: none; cursor: pointer; z-index: 1002; }
.menu-toggle span { display: block; position: absolute; width: 100%; height: 3px; background-color: var(--primary-color);
    border-radius: 3px; transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out; }
.menu-toggle span:nth-child(1) { top: 0; }
.menu-toggle span:nth-child(2) { top: 10px; }
.menu-toggle span:nth-child(3) { top: 20px; }
.menu-toggle.open span:nth-child(1) { transform: rotate(45deg) translate(7px, 7px); }
.menu-toggle.open span:nth-child(2) { opacity: 0; }
.menu-toggle.open span:nth-child(3) { transform: rotate(-45deg) translate(7px, -7px); }

@media screen and (max-width: 1700px) {
    img.banner-wide {width: 100%; margin-bottom: -300px; margin-top: -10px;}
}

@media screen and (max-width: 1300px){
    div.green{padding-bottom: 135px}
    .teamarbeit-section{margin-top: 160px;}
}

@media screen and (max-width: 1120px) {
    img.banner { overflow: hidden; max-width: 100%;  }
    p, h1, h2, h3 { padding: 0 2%; width: 96%; }
    .teamarbeit-section{margin-top: 180px;}
    .telephone-number{display: none;}
    .cta {margin-right: 30px;}
    .navigation {margin-left: 30px;}
    img.float-left { margin-left: 0px; margin-right: 30px;}
}

@media screen and (max-width: 840px){
    .header-content { height: 80px; padding: 0 24px; flex-wrap: nowrap; }
    .menu-toggle { display: block; }
    .navigation {margin-left: 0px;}
    .navigation {display: none; flex-direction: column; justify-content: start; align-items: center;position: fixed; top: 80px;left: 0; width: 100%;
        height: calc(100vh - 80px); background-color: var(--green-background); gap: 25px; z-index: 1001; padding: 40px; animation: fadeIn 0.3s ease-out; }
    .navigation.open { display: flex;}
    .navigation a { font-size: 24px; padding: 10px;}
    .navigation a::after { display: none; }
    img.banner {width: 600px}
    div.green{padding-bottom: 170px}
    .teamarbeit-section{margin-top: 130px;}
    .telephone-number{display: block;}
}

@media screen and (max-width: 660px) {
    img.logo { width: 250px; }
    h2 { margin-top: 40px; }
    img.banner { margin: 60px auto 20px; }
    img.float, img.float-left  { display: block; width: 300px; margin: 20px auto; float: initial; }
    div.green{ padding: 50px 0;}
    img.banner {width: 400px}
    img.banner-wide {width: 100%;}
    div.green{padding-bottom: 220px}
    .teamarbeit-section{margin-top: 110px;}
    .cta{margin-right: 10px}
}

@media screen and (max-width: 450px){
    div.green{padding-bottom: 240px}
    .teamarbeit-section{margin-top: 70px;}
}

@media screen and (max-width: 450px) {
    h1 {font-size: 32px;}
    img.banner {width: 350px}
    img.banner-wide {width: 100%;}
}