:root {
    /* typography */
    --text-xxl: 2.7vw;
    --text-xl: 2.7rem;
    --text-l:1.7em;
    --text-m: 1.1rem;
    --text-s: 1.1rem;
    --text-xs: 0.9rem;
    --abstand:100px;
    --abstand-kl:60px;
    --maincolor-blau: #375081;
    --maincolor-hellgrau:#eef2f6;
    --maincolor-gold: #C9BA8F;
}

@media(max-width: 1024px){
  :root {
    --text-xxl: 2.0rem;
    --text-xl: 2.3rem;
    --text-l: 1.6rem;
    --text-m: 1.0rem;
    --text-s: 1rem;
    --text-xs: 0.9rem;
    --abstand:90px;
    --abstand-kl:50px;
  }
}

@media(max-width: 640px){
  :root {
    --text-xxl: 1.6rem;
    --text-xl: 1.6rem;
    --text-l: 1.4rem;
    --text-m: 1.2rem;
    --text-s: 0.95rem;
    --text-xs: 0.8rem;
    --abstand:60px;
    --abstand-kl:20px;
  }
}


* {
	line-height:140%;
	margin:0;
	padding:0;
	font-size:16px;
	}

body {
	background: #fff;
  	cursor: auto;
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
  	line-height: 1.5;
  	margin: 0;
  	padding: 0;
	}

.seite {
    background: url(../images/anja_kiesewetter_optik_hoerakustik.jpg);
    background-attachment: fixed;
    background-size:100% auto;
    background-position:0 0;
    background-repeat: no-repeat;
    }
.kontakt {
    height: 100vh;
    margin: 0;
    padding: 0;
    background: url(../images/team_kiesewetter_kirchrode.jpg);
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    }

/**************************/
/**************************/

.weiss {
  	padding: var(--abstand) 0;
    background: #fff;
    }

.hellgrau {
  	padding: var(--abstand) 0;
    background:var(--maincolor-hellgrau);
    }
.bgstart {
    background-color:rgba(83,116,142,.6);
    height: 50vw;
    padding: 10vw 10vw 0 50vw;
    }
.bgkontakt {
    background-color:rgba(83,116,142,.6);
    display: flex;
    justify-content: center; /* Rechtsbündig */
    align-items: end; /* Vertikal zentriert */
    height: 100%;
    width: 100%;
    padding: 20px; /* Abstand zum Rand */
    box-sizing: border-box;
    }

.teaser {
    background:var(--maincolor-blau)!important;
    }
.teaser img{
    opacity: 0.5!important;
    }
.teaser2 {
    background:var(--maincolor-blau)!important;
    }
.teaser2 img{
    opacity: 0.9!important;
    }
/*************  2-Klick-Banner auf Google Map und Kalender *************/

.terminonline  {
	background-color:var(--maincolor-hellgrau);
    padding:0;
    }
.terminonline iframe {
    width:100%;
    border:0;
    height:60vw;  
    }
.googlemap iframe{
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(.8); /* Google Chrome, Safari 6+ & Opera 15+ */
    -moz-filter: grayscale(80%);
    -ms-filter: grayscale(80%);
    -o-filter: grayscale(80%);
    filter: grayscale(80%);
     opacity: .8;
    width:100%;
    border:0;
    height:60vw;  
}

.googlemap {
	background-image:url(../images/neugebauer_map.png);
	background-repeat:no-repeat;
	background-size:cover;
	background-position:center top;
    padding:0;
	}
div.privacy-msg  {
	display: grid;
	justify-content: center;
	align-items: center;
	text-align:center;
	overflow:hidden;
    padding:0 20vw;
	}
div.privacy-msg p {
    background: var(--maincolor-blau);
    margin-top:10%;
    padding: 15px;
	color:#fff;
    font-weight: 500;
	font-size:var(--text-s);
	}
div.privacy-msg label {
    color:#fff;
    font-weight: 500;
	font-size:var(--text-s);
    }
.privacy-msg p a.verlinkung {
    display: inline-block;
	background:none;
	color:#fff;
    margin:0;
	padding:0;
    text-decoration: underline;
	}
.privacy-msg p a {
    display: inline-block;
	background:var(--maincolor-hellgrau);
	color:var(--maincolor-blau);
    margin:10px auto;
	padding:8px;
    text-transform:none !important;
	}
.privacy-msg p a:hover{
	color:var(--maincolor-blau);!important;
	}


/**************************/
/******** Header **********/
/**************************/
.header {
    -webkit-transition: all 0.5s ease;
 	transition: all 0.5s ease;
	position: fixed;
    margin:0;
  	width: 100%;	
	background:#fff;
  	height: 120px;
    z-index: 1000;
	}
.scrolled .header{
    -webkit-transition: all 0.4s ease;
 	transition: all 0.4s ease;
  	height: 80px;
    -webkit-box-shadow: 0px 11px 10px -4px rgba(0,0,0,0.23); 
    box-shadow: 0px 11px 10px -4px rgba(0,0,0,0.23);
	}
#logo {
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
    margin:30px 10px auto 10px;
    width:350px;
    opacity: 1;
	}
.scrolled  #logo {
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
    margin-top:13px;
    width:200px;
    opacity: 1;
	}
.abstand {
    padding-top:var(--abstand);
    }
.abstand-kl {
    padding-top:var(--abstand-kl);
    }

.icon {
    max-height:100px;
    margin:20px
    }

/**************************/
/******** Formatierung ****/
/**************************/
h1, h2{
    position: relative;
    font-family: 'Poppins';
    font-style: normal;
	font-weight:600;
    color:var(--maincolor-gold);
	font-size:var(--text-xl);
    line-height: 100%;
	}
.h1head { 
    font-size:var(--text-xxl);
	font-weight:600;
    line-height: 130%;
    display: inline-block;
    }
h1 span, h2 span {
    color:var(--maincolor-blau);
    font-size: 100%;
    }
.h1head, .bgstart p {
    color: #fff;
    }

h3 {
    font-family: 'Poppins';
    font-style: Poppins;
    font-weight: 600;
    color:var(--maincolor-blau);
	font-size:var(--text-l);
	line-height:150%;
	}

p, ul.liste li {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    color:var(--maincolor-blau);
	font-size:var(--text-s);
	line-height:170%;
	}
p a, p a:visited {
	font-size:100%;
    color:var(--maincolor-blau);
	}
p a:hover, p a:visited:hover {
    color:#000;
	}
p b {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    font-size: 100%;
    }
ul.aufzaehl {
    list-style-type: none;
    margin:30px 0 20px 0;
    }
ul.aufzaehl li {
    background-image: url(../images/haken.svg);
    background-size: 20px; 20px;
    background-position:0 11px;
    background-repeat: no-repeat;
    color:var(--maincolor-blau);
	font-size:var(--text-s);
    padding: 8px 10px 7px 28px;
    line-height:170%;
    }
a button {
    display: inline-block;
    padding: 10px;
    color: #fff;
    background: var(--maincolor-gold);
        -webkit-transition: all .5s ease;
    transition: all .5s ease;
        font-weight: 500;
    cursor: pointer;
    }
a:hover button {
    background: var(--maincolor-blau);
        -webkit-transition: all .5s ease;
    transition: all .5s ease;
    }

/**************************/
/******** Abstände ********/
/**************************/

h1 {
	margin:10px 20px;
	}
.h1head, .bgstart p {
    margin:10px 20px !important;
    }
h2 {
	 margin:0 20px;
	}
h3 {
	 margin:30px 20px 0 20px;
	}
p {
	margin:15px 20px 20px 20px;
	}
.footer p,  table {
	margin:15px 20px 10px 20px;
	}
button{
    margin:20px 20px 30px 20px;
}

/**************************/
/******** Footer   ********/
/**************************/


.anschrift {
    display: flex;
    align-items: flex-end;
    }
.footer p {
	color:var(--maincolor-blau);
	font-size:var(--text-s);
	}
.footer #logokl {
    max-width: 250px;
    margin:0 20px 30px 20px;
    }

table {
    width: 280px;
    }
table tbody td{
    padding:0;
	color:var(--maincolor-blau);
	font-size:var(--text-s);
    line-height:170%;
    }
tbody, tbody tr:nth-child(2n){
    border:0;
    background-color: transparent;
    }
.socialmedia {
    display: flex;
    margin: 0 20px 40px 5px;
    padding:5px 15px;
    }
.socialmedia img{
    width:45px;
    padding: 10px;
    }
#back-top img {
    position: fixed;
    right: 20px;
    bottom: 150px;
	width:25px;
	}

/**********************************************/


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

.kontakt {
    height: 100vh;
    margin: 0;
    padding: 0;
    background: url(../images/team_kiesewetter_kirchrode.jpg);
    background-attachment: fixed;
    background-size:100% auto;
    background-position:0 0;
    background-repeat: no-repeat;
    }
.bgkontakt {
    display: flex;
    justify-content: center; /* Rechtsbündig */
    align-items: end; /* Vertikal zentriert */
    height: 80%;
    width: 100%;
    padding: 0; /* Abstand zum Rand */
    box-sizing: border-box;
    }
}


@media only screen and (max-width: 1024px)  {
    
    
    .bgstart  {
    min-height: 48vw;
    padding: 80px 20px 0 50vw;
    }
    
    ul.kurzmenu {
    margin:20px 0;
    justify-content:left;
	}
.kontakt {
    height: 100vh;
    margin: 0;
    padding: 0;
    background: url(../images/team_kiesewetter_kirchrode.jpg);
    background-attachment: fixed;
    background-size:100% auto;
    background-position:0 0;
    background-repeat: no-repeat;
    }

}

@media only screen and (max-width: 900px)  {
    
    .seite {
    background: url(../images/anja_kiesewetter_optik_hoerakustik.jpg);
    background-attachment: fixed;
    background-size:200% auto;
    background-position:-300px 0;
    background-repeat: no-repeat;
    }
    .bgstart {
    min-height: 760px;
    padding: 500px 20px 0 20px;
    }
    
.kontakt {
    height: 50vh;
    background-size: 150%;
    background-position:center 40px;
    }  
    

    #logo {
    margin:35px 10px auto 10px;
    width:350px;
	}

}

/**********************************************/
@media only screen and (max-width: 640px) {

    .seite {
    background: url(../images/anja_kiesewetter_optik_hoerakustik.jpg);
    background-attachment: fixed;
    background-size:390% auto;
    background-position:-380px -10px;
    background-repeat: no-repeat;
    }
    
    .bgstart {
    min-height: 730px;
    padding: 430px 10px 20px 10px;
    }

    .kontakt {
    height: 50vh;
    background-size: 150%;
    background-position:center 90px;
    }  
    
    .bgkontakt {
    height: 100%;
    width: 100%;
    padding: 20px; /* Abstand zum Rand */
    box-sizing: border-box;
    }
    #logo, .scrolled #logo {
    margin:10px 10px auto 10px;
    width:260px;
	}
    .header{ 
  	height: 120px;
	}
    .scrolled .header{
  	height: 120px;
	}
    .teaser, .teaser2  {
    padding:0;
    margin:0;
    border-bottom:5px solid #fff;
    }
    .socialmedia {
    display: flex;
    margin: 20px 10px 40px 0;
    padding:5px 10px;
    }
    .socialmedia img{
    margin-left:10px;
    }
    table {
    width: 280px;
    }
    .icon {
    max-height:60px;
    margin:20px 0 0 0;
    }
    .footer #logokl {
    display: none;
    }
    .footer p, table {
	margin:5px 20px 10px 20px;
	}
    .footer p b {
    display: inline-block;
	margin:35px 20px 0 0;
	}
    .googlemap iframe{
    height:500px;  
    }
    div.privacy-msg  {
    padding:0 20px;
	}
    .terminland iframe {
    height:600px;  
    }
}

/**********************************************/
@media only screen and (max-width: 480px) {
    


}