html{
  scroll-behavior: smooth;
}

*{
margin:0;
padding:0;
}

body{
  font-family: 'Montserrat', Verdana, sans-serif;
}

a{
  text-decoration:none;
  list-style: none;
  color:#000000;
  font-weight:700;
  font-size:20px;
}
a:hover{
  text-decoration:underline;
  list-style: none;
  color:#000000;
}

h1,h2,h3,h4{
  font-family: 'Montserrat', sans-serif;
  display:inline;
  text-align:left;
  font-weight: 800;
}

.logo1{
  padding:2% 0 0 2%;
  width:10%;
}
.logo1 img{
  width:100%;
}

.logo-footer img{
  width:100%;
}

.weiss{
 color:#F8F8F8;
}

h1{
  font-size:34px;
}
h2{
  font-weight: 600;
  font-size:28px;
}
.button{
  background-color: #4CAF50; /* Green */
  border: none;
  color: white;
  padding: 16px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  transition-duration: 0.4s;
  cursor: pointer;
}
.schriftkleiner{
  font-size:34px;
}
.container{
  width:100%;
  height:50vh;
  background-image: url("../image/banner3-six.png");
  background-size: cover;
  background-repeat:no-repeat;
  background-position:center;
  background-attachment: fixed;
}
.aussen-titel{
  height:30vh;
	display:flex;
	flex-direction:column;
	align-items: center;
  justify-content: center;
}

.mittig{
		margin-left:5%;
		margin-right:5%;  
}
.titel{
  background-color: #FFEE00;
  padding:10px 10px 10px 10px;
  width:100%;
}
.titel h1{
	display:block;
	text-align:center;
 font-size:32px;
}
.pfeil{
  width:100%;
  padding-top:5%;
  display:flex;
  justify-content: center;
  align-items: center;
}
 

/*Navigation */

.navbar{
  width:100%;
  height:70px;
  top:-70px;
  background-color:rgba(255,255,255,0.60);
  position:fixed;
  z-index:1000;
  
}
.change{
  top:0px;
}

.nav-list{
  padding:25px 0 0 0;
  float:right;
  display: grid;
  grid-auto-flow: column;
  width:50%;
  text-decoration: none;
}

.nav-list li{
   padding:0 0 0 0;
   list-style: none;
}

.nav-link{
  position:relative;
  padding:3px 0;
}

.nav-link::before,
.nav-link::after{
  content:"";
  width:100%;
  height:2px;
  background-color:#FFEE00;
  position:absolute;
  left:0;
  transform: scaleX(0);
  transition:transform 0.5s;
}

.nav-link::after{
  bottom:0;
  transform-origin: right;
}

.nav-link::before{
  top:0;
  transform-origin: left;
}

.nav-link:hover::before,
.nav-link:hover::after{
  transform:scaleX(1);
}

.hamburger-menu{
  width:45px;
  height:40px;
  position:fixed;
  top:20px;
  right:50px;
  cursor:pointer;
  display:flex;
  flex-direction: column;
  justify-content: space-around;
}

.line{
  width:100%;
  height:4px;
  background-color:#FFEE00;
}

.change .line1{
  transform:rotateZ(-45deg) translate(-8px, 6px);
}

.change .line2{
  opacity:0;
}

.change .line3{
  transform:rotateZ(45deg) translate(-8px, -6px);
}

/* erste Section*/
#impressum{
  text-align: justify;
  width:50%;
  height:310px;
  display:block;
  margin:0% auto;
  background:#FFFFFF;
}

.infotext{
  display:inline;
}

/* -------------------------------------------------------------impressum ENDE----------------------------------------------------*/

/* infotext*/
.infotext3{
  margin:3% auto;
	width:100%;
	text-align: left;
}

.infotext3 h2, p{
	line-height: 1.6em;
}
.infotext3 p{
	font-weight:600;
}
.infotext3 h3{
	font-weight:600;
	font-size: 22px;
}
.atag{
  font-size:16px;
	font-weight:600;
}
.links{
	float:left;
	width:60%;
}
.rechts{
	float:left;
}
/* footer*/
.strich{
 width:100%;
 height:30px;
 background-color:#FFEE00;
 poisition:relative;

}

.slogan{
 width:100%;
 font-size:48px;
 margin-top:-3%;
 position:absolute;
 display:flex;
 flex-direction: row;
 align-content: center;
 justify-content: center;
}
/* footer*/

footer{
 margin-top:2%;
 width:100%;
 background:#616161;
 bottom:0;
 padding:1% 0 1% 0;
}
.logo-footer{
 width:10%;
 margin: 0 auto 0 auto;
}
.adresse{
 margin-top:2%;
 display:flex;
 flex-direction:row;
 align-content: center;
 justify-content: center;
}

.nav-list-footer{
  padding:25px 0 0 0;
  display:flex;
 flex-direction:row;
 align-content: center;
 justify-content: center;
 
}

.nav-list-footer li{
  width:8%;
   padding:0 0 0 0;
   list-style: none;
   display:inline;
}

.nav-list-footer a:hover{
  color:#FFFFFF;
}

/*---------------------------------------------- RESPONSIVE ---------------------------------------------------------------------------*/
@media screen and (max-width: 1690px) {
#impressum{
	width:70%;
}
.slogan{
 font-size:46px;
}
}

@media screen and (max-width: 1560px) {
.slogan{
 font-size:45px;
}
}


@media screen and (max-width: 1500px) {

h1{
  font-size:32px;
}
h2{
  font-weight: 600;
  font-size:26px;
}

h3{
  font-size:22px;
}
h4{
  font-size:20px;
}
p{
  font-size:14px;
}
.slogan{
 font-size:40px;
 margin-top:-3.5%;
}

.nav-list-footer li{
  width:12%;
   padding:0 0 0 0;
   list-style: none;
   display:inline;
}

.nav-list-footer p{
  font-size:20px;
}
}


@media screen and (max-width: 1450px) {
	.atag{
		font-size:14px;
	}
}

@media screen and (max-width: 1350px) {
#impressum{
	height:330px;
}	

.nav-list {
  padding:25px 80px 0 0;
}

.logo1{
  padding:2% 0 0 2%;
  width:10%;
}

.slogan{
 font-size:36px;
 margin-top:-4%;
}

footer{
 margin-top:2%;
 width:100%;
 background:#616161;
 bottom:0;
 padding:1% 0 1% 0;
}

.logo-footer{
  display:flex;
 flex-direction:row;
 align-content: center;
 justify-content: center;
}


.nav-list-footer li{
  width:10%;
   padding:0 0 0 0;
   list-style: none;
   display:inline;
}

}


@media screen and (max-width: 1210px) {

.slogan{
 font-size:34px;
 margin-top:-4.5%;
}
}

@media screen and (max-width: 1140px) {
h2{
  font-weight: 600;
  font-size:24px;
}
}

@media screen and (max-width: 1100px) {
#impressum{
	height:280px;
	width:80%;
}
.logo1{
  padding:3% 0 0 3%;
  width:12%;
}

.nav-list-footer p{
  font-size:18px;
}
	
.handy{
  margin-top:4%;
}

.slogan{
 font-size:34px;
 margin-top:-4.5%;
}
}


@media screen and (max-width: 1000px) {

.strich{
 width:100%;
 height:25px;
 background-color:#FFEE00;
 position:relative;

}
.slogan{
 font-size:28px;
 margin-top:-4%;
}

.nav-list-footer li{
  width:12%;
   padding:0 0 0 0;
   list-style: none;
   display:inline;
}

h2{
  font-weight: 600;
  font-size:22px;
}
}


@media screen and (max-width: 950px) {

.strich{
 width:100%;
 height:20px;
 background-color:#FFEE00;
 position:relative;

}
.slogan{
 font-size:28px;
 margin-top:-4.5%;
}

}

@media screen and (max-width: 910px) {
.links{
	width:50%;
}
h1{
  font-size:30px;
}
h2{
  font-weight: 600;
  font-size:24px;
}

h3{
  font-size:20px;
}


h4{
  font-size:18px;
}
p{
  font-size:14px;
}
li{
  font-size:12px;
}
td, .atag{
  font-size:16px;
}
td h2{
  font-size:18px;
}

}


@media screen and (max-width: 840px) {
.nav-list-footer p{
  font-size:16px;
}
}

@media screen and (max-width: 810px) {
td, .atag{
  font-size:14px;
}
}


@media screen and (max-width: 800px) {
#impressum{
	height:380px;
	width:90%;
}
.links{
	width:100%;
	margin-bottom:10px;
}
.rechts{
	width:100%;
}
.infotext3{
  margin:5% auto;
	width:80%;
	text-align: left;
}
.mittig{
	width:60%;
}
.titel{
	text-align: center;
	padding:10px 5px 10px 5px;
}
.titel h1{
	font-size:36px;
}
.logo1{
  padding:3% 0 0 3%;
  width:14%;
}
.line{
  background-color: #000000;
}
.hamburger-menu{
  width:45px;
  height:40px;
  position:fixed;
  top:20px;
  right:50px;
  cursor:pointer;
  display:flex;
  flex-direction: column;
  justify-content: space-around;
}


.change .line1{
  transform:rotateZ(-45deg) translate(-8px, 6px);
}

.change .line2{
  opacity:0;
}

.change .line3{
  transform:rotateZ(45deg) translate(-8px, -6px);
}
.navbar{
  height:140px;
  top:-140px;
}
.change{
  top:0;
}
.nav-list{
  grid-auto-flow:row;
}

.nav-list li{
  padding-bottom:12px;
}

h1{
  font-size:28px;
}
h2{
  font-weight: 600;
  font-size:22px;
}

h3{
  font-size:18px;
}

h4{
  font-size:16px;
}
p{
  font-size:12px;
}
li{
  width:100%;
  font-size:12px;
}
td, .atag{
  font-size:16px;
}
td h2{
  font-size:18px;
}
.strich{
 width:100%;
 height:20px;
 background-color:#FFEE00;
 position:relative;

}
.slogan{
 font-size:26px;
 margin-top:-4.5%;
}
.handy{
  margin-top:2%;
}

.strich{
 width:100%;
 height:20px;
 background-color:#FFEE00;
 position:relative;

}
.slogan{
 font-size:26px;
 margin-top:-4.5%;
}
.handy{
  margin-top:2%;
}

}

@media screen and (max-width: 700px) {
.handy{
  margin-top:6%;
}

.strich{
 width:100%;
 height:15px;
 background-color:#FFEE00;
 position:relative;

}
.slogan{
 font-size:22px;
 margin-top:-4%;
}

.nav-list-footer li{
  width:14%;
   padding:0 0 0 0;
   list-style: none;
   display:inline;
}

}

@media screen and (max-width: 670px) {
.navbar{
background-color: rgba(255,255,255,0.80);
}
.aussen-titel{
	height:40vh;
}
.mittig{
	width:60%;
}
.titel{
	text-align: center;
	padding:10px 5px 10px 5px;
}
.titel h1{
	font-size:30px;
}
.titel-kontakt h1{
	font-size:34px;
}	
.handy{
  margin-top:8%;
}

.strich{
 width:100%;
 height:12px;
 background-color:#FFEE00;
 position:relative;

}
.slogan{
 font-size:20px;
 margin-top:-4%;
}

td, .atag{
  font-size:14px;
}
}


@media screen and (max-width: 670px) {

.navbar{
background-color: rgba(255,255,255,0.80);
}
	
.handy{
  margin-top:8%;
}

.strich{
 width:100%;
 height:12px;
 background-color:#FFEE00;
 position:relative;

}
.slogan{
 font-size:20px;
 margin-top:-4%;
}

td, .atag{
  font-size:14px;
}

}


@media screen and (max-width: 600px) {
#impressum {
    text-align: justify;
    width:70%;
    height:360px;    
}
h1{
  font-size:26px;
}
h2{
  font-weight: 600;
  font-size:20px;
}

h3{
  font-size:18px;
}

h4{
  font-size:16px;
}
p{
  font-size:12px;
}
li{
  font-size:12px;
}
td, .atag{
  font-size:14px;
}
td h2{
  font-size:14px;
}
.nav-list-footer p{
  font-size:12px;
}

.nav-list-footer li{
  width:14%;
  padding:0 0 0 0;
  list-style: none;
  display:inline;
}

.handy{
  margin-top:12%;
}

}

@media screen and (max-width: 550px) {
#impressum{
	height:400px;
}
.infotext3{
  margin:10% auto;
	width:100%;
	text-align: left;
}
.aussen-titel{
	height:40vh;
}
.mittig{
	width:65%;
}
.titel{
	text-align: center;
	padding:10px 5px 10px 5px;
}
.titel h1{
	font-size:28px;
}
.titel-kontakt{
  width:100%;
  position:absolute;
  text-align:center;
  margin:0px auto 0 auto;
}
.logo1{
  padding:3% 0 0 3%;
  width:16%;
}

h1{
  font-size:24px;
}
h2{
  font-weight:600;
  font-size:20px;
}

h3, .atag{
  font-size:18px;
  font-weight:600;
}
h4{
  font-size:14px;
}
p{
  font-size:12px;
}
li{
  font-size:12px;
}
td, .atag{
  font-size:14px;
}
.infotext3 h2{
  font-size:18px;
}
.infotext3 h3 {
    font-weight: 600;
    font-size: 16px;
}

.handy{
  margin-top:4%;
}

.strich{
 width:100%;
 height:12px;
 background-color:#FFEE00;
 position:relative;

}
.slogan{
 font-size:16px;
 margin-top:-4%;
}
}


@media screen and (max-width: 500px) {
.aussen-titel{
	height:40vh;
}
.mittig{
	width:65%;
}
.titel{
	text-align: center;
	padding:10px 5px 10px 5px;
}
.titel h1{
	font-size:24px;
}
.pfeil a{
	text-align: center;
}	

.pfeil img{
	width:70%;
}
.nav-list-footer p{
  font-size:12px;
}

.nav-list-footer li{
  width:16%;
   padding:0 0 0 0;
   list-style: none;
   display:inline;
}

.handy{
  margin:10% auto 0 auto;
}

.strich{
 width:100%;
 height:30px;
 background-color:#FFEE00;
 position:relative;
  margin-bottom:5%;
}
.slogan{
 text-align:center;
 margin-top:-13%;
 font-size:20px;
 line-height: 1.1em;

}
}


@media screen and (max-width: 470px) {
.aussen-titel{
	height:40vh;
}
.mittig{
	width:70%;
}
.titel{
	text-align: center;
	padding:10px 5px 10px 5px;
}
.titel h1{
	font-size:26px;
}
.logo1{
  padding:3% 0 0 3%;
  width:18%;
}


.slogan{
 text-align:center;
 margin-top:-13.5%;
 font-size:20px;
 line-height: 1.1em;
}
	
.handy{
  margin:10% auto 0 auto;
}
}

@media screen and (max-width: 450px) {
.aussen-titel{
	height:45vh;
}
.mittig{
	width:70%;
}
.titel{
	text-align: center;
	padding:10px 5px 10px 5px;
}
.titel h1{
	font-size:22px;
}
.titel-kontakt h1{
		font-size:32px;
	}
.logo1{
  padding:3% 0 0 3%;
  width:19%;
}

.nav-list-footer p{
  font-size:12px;
}

.nav-list-footer li{
  width:20%;
   padding:0 0 0 0;
   list-style: none;
   display:inline;
}

.slogan{
 text-align:center;
 margin-top:-15%;
 font-size:20px;
 line-height: 1.1em;
}
}
@media screen and (max-width: 400px) {
#impressum{
	height:420px;
}
}
@media screen and (max-width: 375px) {
#impressum{
	height:420px;
}
.aussen-titel{
	height:45vh;
}
.mittig{
	width:70%;
}
.titel{
	text-align: center;
	padding:10px 5px 10px 5px;
}
.titel h1{
	font-size:22px;
}
.titel-kontakt h1 {
	font-size: 28px;
}	
}
@media screen and (max-width: 320px) {
.titel h1{
		font-size:19px;
	}
#impressum{
	height:380px;
}
.infotext3{
  margin:5% auto;
	width:100%;
	text-align: left;
}
	
}