@charset "utf-8";
@font-face {font-family:'Anaheim';font-style:normal;font-weight:400;src: local('Anaheim'), url('../fonts/Anaheim-Regular.ttf') format('truetype');}
@font-face {font-family:'Assistant';font-style:normal;font-weight:700;src: local('Assistant'), url('../fonts/Assistant-ExtraBold.ttf') format('truetype');}

*  { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 0; margin: 0; }
:root { --blau:#0080ff; --hellgrau:#fafafa; --schwarz:#111; --weiss:#fff;  --dunkelgruen:#188db3;  --hellgruen:#48ce75; --dunkelgrau:#2a3747; --rot:#e21d8e; }

html {
-moz-text-size-adjust: none;
-webkit-text-size-adjust: none;
text-size-adjust: none;
-webkit-overflow-scrolling: touch;
overflow-x: hidden;
}

body { font-family:'Anaheim'; font-size:17px; color:var(--schwarz); }

.overflow {
  flex-flow: column;
  flex: 1;
  display: flex;
  overflow: hidden;
    height: 300px;
}

.background-video {
  background-image: linear-gradient(#0000005c,#0000005c);
  width: 100%;
  height: 300px;
  position: absolute;
  inset: 0% 0% auto;
}

.videocontainer {
width: 100%;
overflow:hidden;
display:block;
height: 400px;
/* transform: translate(0%, 20%); /* mehr nach oben verschoben */
}

video {
-webkit-filter: grayscale(100%); 
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
filter: gray; /* IE 6-9 */
margin-top:-200px;
}



a.with-icon {
text-decoration:none;
}

a.with-icon::after {
text-decoration:none;
content: "";
display: inline-block;
width: 7px;     
height: 7px;
margin-left: 5px;  
background-image: url(../pix/extern.png); 
background-size: contain;
background-repeat: no-repeat;
}

h1 { font-family:'Assistant',sans-serif; font-size:36px; margin:-5px 0 0 0; padding:0; color:var(--schwarz); }
h2, h3, h4 { font-family:'Assistant',sans-serif; font-size:22px; margin:0; padding:0; color:var(--schwarz); }
address { font-style:normal; }
.umbruch { hyphens:auto; -moz-hyphens:auto; -o-hyphens:auto; -webkit-hyphens:auto; -ms-hyphens:auto; }
.tiefer {margin-top:80px !important;}
.quadrat {position:absolute; top:36px; left:0; width:14px; height:14px; }
.headerbg { width:100%; height: 120px; margin:100px auto 150px auto;  background:var(--hellgrau); }
.footer { margin:100px auto 150px auto;  }

.container { width:1400px; margin:0px auto; }
.col1-3 { width:420px; height:420px; margin:20px; padding:30px; }
.col1-3.half { width:420px; height:280px; margin:20px; padding:30px;  }
.col1-3.auto, .col2-3.auto {height:auto; }
.top, .end { margin-top: 80px;   }

.slogan { position:relative; bottom:50px; left:0px; width:100%; text-align:center; margin:0px auto; font-family:'Assistant', sans-serif; font-size:26px; color:#fff; }
.logo { float:right;  position:absolute; top:150px; right:100px;}
.centered { text-align:center; }
.all-centered { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); color:var(--dunkelgrau); }

.transitions-enabled {
-webkit-transition-duration: 0.7s;
-moz-transition-duration: 0.7s;
-ms-transition-duration: 0.7s;
-o-transition-duration: 0.7s;
transition-duration: 0.7s;

-webkit-transition-property: height, width;
-moz-transition-property: height, width;
-ms-transition-property: height, width;
-o-transition-property: height, width;
transition-property: height, width;

-webkit-transition-property: left, right, top;
-moz-transition-property: left, right, top;
-ms-transition-property: left, right, top;
-o-transition-property: left, right, top;
transition-property: left, right, top;
}

@media only screen and (max-width: 1480px) {
	
.slogan { position:relative; bottom:50px; left:100px; width:100%; text-align:left;  }
.header { width:900px; }
.container { width:920px;}
.col1-3, .col1-3.half { width:420px;  margin: 30px auto; }
.videocontainer {height: 300px;background:#222;} 
video {margin-top:-200px;}

}

@media only screen and (max-width: 1023px) {
	
.slogan {display:none;}
.logo { float:left !important;  position:absolute; top:150px; left:50px;}	
h1 {  font-size:24px; }
.header { width:290px; }
.footer { width:290px;  }
.container { width:290px; }
.col1-3, .col1-3.half { width:290px; height:auto; margin:30px auto;}
.tiefer {margin-top:80px !important;}
 .videocontainer {height: 200px;background:#222;} 
video {margin-top:-100px;}

}

@media only screen and (max-width: 600px) {
h1 { margin:-45px 0 0 0;
.videocontainer {height: 200px;background:#222;} 
video {margin-top:0px;}

}