@charset "UTF-8";

/* inter-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  src: url('webFonts/inter-v20-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  src: url('webFonts/inter-v20-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  src: url('webFonts/inter-v20-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

@font-face {
  font-family: 'Font Awesome 6 Brands';
  font-style: normal;
  font-weight: 400;
  src: url("webFonts/fa-brands-400.woff2") format("woff2")}


body{
	height: 100%;
	width: 100%;
}
html{
	height: 100%;
	width: 100%;
}

.header {
	background-color: #FFF;
	display: block;
	height: 64px;
	margin-top: 34px;
	
}
.logo {margin-left: 10px;
	float: left;
}
@media (min-width: 750px) {
	.logo {
	margin-left: 0px;
}
}
.menu-button{
	text-align: right;
	z-index: 2000;
	position: relative;
	
}
@media (min-width: 750px) {
.menu-button{
	display: none;
}
}


#nav-toggle { position: fixed;}

#nav-toggle {
	cursor: pointer;
	margin-left: -40px;
	padding-top: 15px;
	padding-right: 35px;
	padding-bottom: 16px;
	padding-left: 0px;
}
#nav-toggle span, #nav-toggle span:before, #nav-toggle span:after {
  cursor: pointer;
  border-radius: 1px;
  height: 3px;
  width: 30px;
  position: absolute;
  display: block;
  content: '';
}


#nav-toggle span, #nav-toggle span:before, #nav-toggle span:after {
 background: #000;}

.start #nav-toggle span, .start #nav-toggle span:before, .start #nav-toggle span:after {
 background: #fff;
 
}
#nav-toggle span:before {
  top: -7px; 
}
#nav-toggle span:after {
  bottom: -7px;
}

#nav-toggle span, #nav-toggle span:before, #nav-toggle span:after {
  transition: all 200ms ease-in-out;
  
}
#nav-toggle.active span {
  background-color: transparent;
    

}
#nav-toggle.active span:before, #nav-toggle.active span:after {background: #FFF;
  top: 0;
}
#nav-toggle.active span:before {
  -webkit-transform: rotate(45deg);
transform: rotate(45deg);
-moz-transform: rotate(45deg);
}
#nav-toggle.active span:after {
  -webkit-transform: rotate(-45deg);
 transform: rotate(-45deg);
 -moz-transform: rotate(-45deg);
}

.overlay-navi {
	height: 100%;
	width: 100%;
	background-color: #E1001A;
	position: fixed;
	z-index: 1000;
	opacity: 0.0;
	visibility:hidden;
	-webkit-transition: opacity 0.5s, visibility 0s 0.5s;
	transition: opacity 0.5s, visibility 0s 0.5s;
	top: 0px;
	right: 0px;
	overflow:visible;
	display: table;
	}
	
.overlay-navi.open {
	visibility:visible;
	opacity: 0.9;
	-webkit-transition: opacity 0.5s;
transition: opacity 0.5s;
	}
	
@media (min-width: 750px) {
	.overlay-navi {
	position: static;
	opacity: 1.0;
	visibility:visible;
	height: auto;
	background-color: #fff;
	display: block;
	
	}
	
	.overlay-navi.open {
	visibility:visible;
	opacity: 1.0;}
	}
	
	.navi {
	text-align: center;
	display: table-cell;
	vertical-align: middle;
}




.navi ul li{
	display: block;
	list-style-type: none;
	margin-right: 0px;
	margin-left: 0px;
	margin-top: 20px;
	margin-bottom: 20px;
}

.navi ul li a {text-decoration: none;
color: #fff;
font-size: 20px;
}
	
	.navi ul li a.rex-current, .navi ul li a:hover {
	font-family: "Inter", "Helvetica Neue bold", Helvetica bold, Arial bold, sans-serif; font-weight: 700;
	}
@media (min-width: 750px) {

.navi {
	display: block;
	float: right;
	margin: 0px;
	padding-top: 5px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	
}
.navi ul {
	float: left;
	
}
.navi ul li {
	display: inline;
}
.navi ul li a {
	margin-right: 10px;
	font-size: 16px;
	font-weight: 300;
	color: #333;
	text-decoration: none;
	letter-spacing: 0.05em;
}

.navi ul li a.rex-current, .navi ul li a:hover {
	font-family: "Inter", "Helvetica Neue", Helvetica bold, Arial bold, sans-serif;
	color: #E1001A;
	
	
}}

@media (min-width: 1000px) {
.navi ul li a {
	margin-right: 15px;
	
}
}

@media (min-width: 1200px) {
.navi ul li a {
	margin-right: 20px;
	
}
}

.firma {display: none;}
/* Larger than tablet */
@media (min-width: 1200px) {
.firma {
	float: right;
	display: inline;
	text-transform: uppercase;
	border-left-width: 1px;
	border-left-style: solid;
	border-left-color: #333;
	padding-left: 20px;
	margin-top: 8px;
	font-size: 12px;
	letter-spacing: 0.05em;

}

}

.slider-wrap {
	position: relative;
	height: calc(100% - 98px);
	width: 100%;
}

#slider {
	position: relative;
	width: 100%;
	overflow: hidden;
	height: 100%;
	margin: 0;
	padding: 0px;
}
#slider .slide {
	position: absolute;
	left: 100%;
	width: 100%;
	height: 100%;
	background-size:cover;
	background-position: center center;
	background-repeat: no-repeat;
	margin-right: auto;
	margin-left: auto;
	-webkit-transition: left 500ms ease;
	-moz-transition: left 500ms ease;
	-ms-transition: left 500ms ease;
	-o-transition: left 500ms ease;
	transition: left 500ms ease;
	display: table-cell;
	vertical-align: middle;
	-ms-behavior: url(../../stylesheets/backgroundsize.min.htc);
}
#slider .slide.r { background-color: #4f3434; }
#slider .slide.g { background-color: #344f38; }
#slider .slide.b { background-color: #3a344f; }

    /* Hold Transitions - REQUIRED for looping */
    #slider.no-transition .slide {
        -webkit-transition: none;
           -moz-transition: none;
            -ms-transition: none;
             -o-transition: none;
                transition: none;
    }

    /* Animations */
    #slider .slide.old { left: -100%; }
    #slider .slide.visible {
	left: 0;
}
    #slider .slide.next {
	left: 100%;
}
	
	.overlay {
	height: 100%;
	width: 100%;
	opacity: 0.2;
	background-color: #000;
	position: absolute;
}
.copy {
	position: absolute;
	width: 100%;
	top: 50%;
	left: 0%;
	color: #FFF;
	text-align: center;
	}
	.copy h1{
	color: #FFF;
  font-size: 3rem;
	  margin-bottom: 10px;
		
	}	
	
	
.copy h3{
	color: #FFF;
	font-size: 2rem;
	text-transform: none;
	margin-bottom: 30px;
	  font-family: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 300;

	}	
	
	.copy-2 {
	position: absolute;
	display: table;
	width: 85%;
	height: 100%;
	left: 50%;
	margin-left: -42.5%;
	color: #FFF;
	text-align: center;
		
	}
	
	.copy-2 h2{
	color: #FFF;
	font-size: 2rem;
	display: table-cell;
	vertical-align: middle;
	
	}	

.copy .button {border-bottom: 1px solid #fff; border-top: 1px solid #fff; background-color: transparent; border-radius: 0; letter-spacing: 0.2rem; text-transform: uppercase; font-size: 14px; padding:  10px 0 15px 0 ; line-height: 1}

.copy .button:hover {color: #fff; border-bottom: 1px solid #E1001A; border-top: 1px solid #E1001A; }
@media (min-width: 750px) {

.copy {
	
	top: 60%;
	
	
	}
	.copy-2 h2{

	font-size: 5rem;
	
	}	
	
	.copy h1{
  font-size: 4rem;
	 
	}	
	
	
.copy h3{
	font-size: 3rem;
	}	

	.copy .button {font-size: 15px;}
	
}


	@media (min-width: 1000px) {	

	.copy h1{
  font-size: 5rem
	}	
	
.copy h3{
	font-size: 3.5rem;
	}	
	}
	
ul.actions {
	margin: 0px;
	padding: 0px;
	list-style-type: none;
	}


li.next  {
	right: 2%;
	width: 22px;
	position: absolute;
	z-index: 1;
	height: 42px;
	overflow:hidden;
	bottom: 25%;
}	
li.prev {
	position: absolute;
	left: 2%;
	width: 22px;
	z-index: 1;
	height: 42px;
	overflow:hidden;
	bottom: 25%;
}	

li.next a {
	cursor:pointer;
	color:#FFF;
	position: absolute;
	height: 42px;
	width: 24px;
	text-indent: -2000px;
	margin-bottom: 0px;
	margin-left: 0px;
	background-image: url(../images/pfeile.svg);
	background-repeat: no-repeat;
	background-position: -34px 0px;
		}	
		
		li.prev a {
	cursor:pointer;
	color:#FFF;
	position: absolute;
	height: 42px;
	width: 22px;
	text-indent: -2000px;
	margin-bottom: 0px;
	margin-left: 0px;
	background-image: url(../images/pfeile.svg);
	background-repeat: no-repeat;	
	background-position: 0px 0px;
		}	

	.weiss{
	background-color: #FFF;
	padding-top: 8%;
	padding-bottom: 8%;
}
.schwarz {
	background-color: #000;
	padding-top: 10%;
	padding-bottom: 10%;
	color: #FFF;
}

.grau{
	background-color: #F0F0F0;
	padding-top: 8%;
	padding-bottom: 8%;
}

.weiss h1{
	color: #333;
	
}
.weiss h3{
  
}
.schwarz h1{
	color: #ccc;
	}
	
.schwarz img, .weiss img, .grau img {
	height: auto;
	width: 100%;
}	
.logo-gr {
	text-align: center;
	padding-top: 20px;
	
}

.logo-gr img{
	height: auto;
	width: auto;
}

.themen {
	display: grid; 
	grid-template-columns: 100%;
	width: 100%; 

}

.box {position: relative; display: grid; align-content: center; justify-content: center; width: 100%; min-height: 250px
}

.themen img {object-fit: cover; width: 100%; height: 100%; position: absolute}

.themen h3 {color: #fff; text-align: center; display: block; font-family: "Inter", "Helvetica Neue bold", Helvetica bold, Arial bold, sans-serif; text-transform: uppercase; border-top: 1px solid #fff; border-bottom: 1px solid #fff; padding: 8px 0; font-size: 1.5rem; letter-spacing: 0.1rem; z-index: 2; font-weight: 700;
}



@media (min-width: 750px) {
	.themen {height: 50%; grid-template-columns: 50% 50%}
	.dreifach {grid-template-columns: 1fr 1fr 1fr; height: 30%;}
}



.klein {height: 250px;}
.klein .box {
	height:10%;
	min-height: 250px;
}

@media (min-width: 1000px) {
	.themen {height: 100%;}
	.dreifach {height: 50%}
	.themen h3 {font-size: 2rem;}

	.klein {height: 400px;}
.klein .box {
	height:10%;
	min-height: 400px;
}}


.box .overlay {
	background-color: #000;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0.3;
	z-index: 2;
	transition: opacity 0.5s ease;
	-moz-transition: opacity 0.5s ease;
	-ms-transition: opacity 0.5s ease;
	-webkit-transition: opacity 0.5s ease;
	-o-transition: opacity 0.5s ease;
}


video {width: 100%; height: auto}

.referenz {
	display: inline-block;
	position: relative;
	width: 100%;
	cursor: pointer;
	margin-bottom: 12%;
	padding: 0;
	font-size: 0;
	
}



.referenz:hover .referenz-overlay{
	opacity: 1;}


.referenz-overlay {
	opacity: 0;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
background: rgb(0, 0, 0);
background: rgba(0, 0, 0, 0.4);
transition: opacity 0.5s ease;
	-moz-transition: opacity 0.5s ease;
	-ms-transition: opacity 0.5s ease;
	-webkit-transition: opacity 0.5s ease;
	-o-transition: opacity 0.5s ease;
	font-size: 2rem;
}

.wrap-ref {
	height: 100%;
	width: 100%;
	text-align: center;
	vertical-align: middle;
	display: table;
}
.text-ref {
	display:table-cell;
	color: #FFF;
	text-align: center;
	vertical-align: middle;
	
	}
	
.text-ref  p{
	margin: 0;
	
	}



.referenz a {
	display: block;
	height: 100%;
	width: 100%;
	position: absolute;
	top: 0px;
	right: 0px;
	z-index: 10;
}

.referenz h4 {
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}

.columns:nth-child(3n+4) {margin-left:0;}


.image-wrap {
	width: 80%;
	padding: 0 10%;
	display:grid;
	position:relative;
	height: calc(100% - 98px);
	justify-content: center; align-content: center;
	text-align: center
}

.image-wrap img {height: 100%; width: 100%; position: absolute; object-fit: cover; }
.image-wrap h2 {color: #fff; text-align: center; display: block; text-transform: uppercase; border-top: 2px solid #fff; border-bottom: 2px solid #fff; padding: 8px 0; font-size: 2rem; letter-spacing: 0.1rem; z-index: 2;
}
.image-wrap p {color: #fff; font-size: 1.8rem; z-index: 2}
.half {height: 50%}

@media (min-width: 750px) {
	.image-wrap h2 {font-size: 2.5rem; }
	.image-wrap p {font-size: 2rem;}
}

@media (min-width: 1000px) {
	.image-wrap h2 {font-size: 3rem; }	
	.image-wrap p {font-size: 2.5rem;}
	.half {height: inherit}
}

#map-canvas {
	height: 550px;
}

#map_content {color: #666;
}

#map_content a {
	font-size: 14px;
	color: #666;
	
}
#map_content a:hover {
	color: #000;
	
}

.table div {
  width: 100%;
  overflow-x: auto; }

table {
  width: 100%; }

.table div::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 10px;
  height: 10px; }

.table div::-webkit-scrollbar-thumb {
  border-radius: 8px;
  border: none;
  background-color: rgba(0, 0, 0, 0.3); }


.footer {
	height: auto;
	background-color: #222;
	padding-top: 50px;
	font-size: 15px;
	color: #CCC;
	text-align:center;
}

.footer a {
	color: #CCC; text-decoration: none; 
}
.footer a:hover{
	color: #FFF;
}



.footer .logo{
	width: 100%;
	margin-bottom: 20px;
}

.footer .adresse{ width: 100%;
margin-left: 0;}

.footer .tel { width: 100%;margin-left: 0;}
.footer .link { 
margin-left: 0; width: 100%;}

.fa-brands {font-family: "Font Awesome 6 Brands"; font-style: normal; margin-right: 10px }

.fa-instagram:before {
  content: "\f16d"; }
.fa-facebook:before {
  content: "\f09a"; }


@media (min-width: 750px) {

.footer {
	height: 380px;
	padding-top: 90px;
	text-align:left;
	}


.footer .logo{
	width: 100%;
	margin-bottom: 40px;
}

.footer .adresse{ width: 30.6666666667%;
margin-left: 0;}

.footer .tel { width: 39.3333333333%;}
.footer .link { 
margin-left: 4%; width: 22%;}
}

@media (min-width: 1000px) {
	.footer {
	height: 240px;}
	
	.footer .logo{
	width: 22%;
	margin-bottom: 0px;
}

.footer .adresse{ width: 22%;
margin-left: 4%;}

.footer .tel { width: 30.6666666667%;}
.footer .link { width: 13.3333333333%;}

}