*,
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html {  scroll-behavior: smooth;  }
div { border: 0px #000 solid;}
body {margin: 70px 0 0 0; font-family: Arial, Helvetica, sans-serif; font-size:13px; line-height: 18px;color: #333;}
img {max-width: 100% !important; height: auto;border: 0px #000 solid; vertical-align: bottom; }

.flex .inside {position: relative; display: flex; padding: 0 30px; width: 90%; max-width: 1000px; margin: 0 auto; align-items: flex-end; }
.flex .inside .links {flex: 0 0 270px; display: block; border: 0px #ff0000 solid; padding-right: 40px;} 
.flex .inside .rechts {flex: 1; display: block;  padding-left: 0px; }  
main .flex .inside .rechts {padding: 30px 0px 15px 0px;}  

footer {padding: 50px 0 80px 0;}
.top {position: absolute; top: 30px;}
.top img {display: none;}   


@media only screen and (min-width: 760px) {
.flex-zweispaltig {display: flex; justify-content: space-between;align-items: flex-end; }
.flex-zweispaltig > div {display: block; width: 48%; }  
.flex-zweispaltig em { display: none;}     
}
@media only screen and (max-width: 759px) {
.flex-zweispaltig br { display: none;} 
.flex-zweispaltig > div {padding-top: 10px; }   
}

ul {padding: 0 0 0 12px;}
main {background: #ccc;}



.content {
	display: none;
height: 0 !important;
	opacity: 0;
	transition: opacity 0.15s ease-in-out, height 0.15s ease-in-out;
	overflow: hidden;
}

.content.active {

	display: block;
	opacity: 1;
	height: auto !important; 
}


h1 {font-weight: normal; font-size: 18px; line-height: 24px; margin: 0 0 0 0;}
h2 {font-weight: normal; font-size: 18px; line-height: 24px; margin: 0 0 0 0;}
h3 {font-weight: bold; font-size: 14px; line-height: 20px; margin: 25px 0 5px 0;} 
h4 {font-weight: bold; font-size: 13px; line-height: 20px; margin: 25px 0 0px 0;}        


#datenschutz  h2 {font-weight: normal; font-size: 14px; line-height: 20px; margin: 20px 0 10px 0;}   


p {margin: 0 0 10px 0;}
a {color: #333;}


@media only screen and (min-width: 609px) {  
/* The animation code */
@keyframes body {
	from {padding-top: 10px; opacity: 0;}
	to {padding-top: 0px; opacity: 1;}
}
body {  
animation-name: body;
animation-duration: 0.75s;
}
@keyframes main {
	from {transform: translateX(30px); opacity: 0;}
	to {transform: translateX(0px); opacity: 1;}
}
main .inside .top {  
animation-name: main;
animation-duration: 1.0s;
}
}
@media only screen and (max-width: 609px) {  
@keyframes body {
	from {opacity: 0; transform: scale(1.1);}
	to {opacity: 1; transform: scale(1.0);}     
}
body {  
animation-name: body;
animation-duration: 0.75s;
}
@keyframes header {
	from {opacity: 0; transform: translateX(-20px);}
	to {opacity: 1; transform: translateX(0px);}     
}
header img {  
animation-name: header;
animation-duration: 1.5s;
}
}    


@media only screen and (max-width: 609px) {
.flex .inside {display: block; padding: 12px 0px; width: 90%; margin-top: 20px;  } 
main .flex .inside .links {display: none;   }  
main .flex .inside .rechts {font-size: 16px; line-height: 22px;} 
.top {position: relative; top: 0px;}   
.top img {display: block; margin: -55px -20px 0px 15px; max-width: 125px !important; float: right;}  
body {margin: 20px 0 0 0;  }
.flex-zweispaltig br { display: inline-block;} 
.flex-zweispaltig em { display: none !important;} 
main .flex .inside .rechts {padding: 15px 0px 15px 0px;}    
}