/* ----------------------------- Basic Layout ------------------------------------ */

:root{
	--headlineColor: rgb(0, 141, 143);
}

.desktop{
	display: initial;
}

.mobile{
	display: none;
}

body, div, p, h1, h2, h3, h4{
	margin:0;
}

body{
	font-family: 'Montserrat';
	font-size: 1.2vw;
	overflow-x: hidden;
}

div, p{
	font-size: 0.95em;
}

h1, h2, h3, h4{
	color: var(--headlineColor);
	font-size: 1.5em;
	margin: 1% 0;
}

@font-face {
	font-family: 'Klavika-Bold';
	src: url('/Pfister/Essentials/font/Klavika/Klavika-Bold.woff2') format('woff2'),
		url('/Pfister/Essentials/font/Klavika/Klavika-Bold.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Klavika-BoldItalic';
	src: url('/Pfister/Essentials/font/Klavika/Klavika-Boldtalic.woff2') format('woff2'),
		url('/Pfister/Essentials/font/Klavika/Klavika-Boldtalic.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'Klavika-Light';
	src: url('/Pfister/Essentials/font/Klavika/Klavika-Light.woff2') format('woff2'),
		url('/Pfister/Essentials/font/Klavika/Klavika-Light.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'Klavika-LightItalic';
	src: url('/Pfister/Essentials/font/Klavika/Klavika-LightItalic.woff2') format('woff2'),
		url('/Pfister/Essentials/font/Klavika/Klavika-LightItalic.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'Klavika-Medium';
	src: url('/Pfister/Essentials/font/Klavika/Klavika-Medium.woff2') format('woff2'),
		url('/Pfister/Essentials/font/Klavika/Klavika-Medium.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'Klavika-MediumItalic';
	src: url('/Pfister/Essentials/font/Klavika/Klavika-MediumItalic.woff2') format('woff2'),
		url('/Pfister/Essentials/font/Klavika/Klavika-MediumItalic.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'Klavika-Regular';
	src: url('/Pfister/Essentials/font/Klavika/Klavika-Regular.woff2') format('woff2'),
		url('/Pfister/Essentials/font/Klavika/Klavika-Regular.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'Klavika-RegularItalic';
	src: url('/Pfister/Essentials/font/Klavika/Klavika-RegularItalic.woff2') format('woff2'),
		url('/Pfister/Essentials/font/Klavika/Klavika-RegularItalic.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}

/*---------------------------- Grid layout -------------------------------------------*/

.grid-container {
	min-height:100vh;
	width: 100%;
	display: -ms-grid;
	display: grid;
	-ms-grid-columns: 10% 10% 60% 10% 10%;
	grid-template-columns: 10% 10% 60% 10% 10%;
	/*grid-template-rows:  [start-row1] 7vh [row1-row2] 13% [row2-row3] 20% [row3-row4] 20% [row4-row5] 20% [row5-end] 20%;*/
	grid-auto-rows: min-content;
}

.grid-element{
	/*overflow: hidden;*/
	/*overflow-y: auto;*/
}

.size-2-3-2-4{
	-ms-grid-column-start: 2;
	-ms-grid-column-end: 3;
	-ms-grid-row-start: 3;
	-ms-grid-row-end: 5;

	grid-column-start: 2;
	grid-column-end: 3;
	grid-row-start: 3;
	grid-row-end: 5;
}

.content{
	min-height:100vh;
}

.content a{
	text-decoration: none;
	transition: ease-in 0.25s;
	color:black;
}

.content a:hover{
	color:var(--headlineColor);
}

/*------------------------------------------Backend Redakteur classes -------------------------*/

.roundImage{
	border-radius: 50%;
}


.diamond-image { 
	transform:rotate(-45deg);
	height: 150%;
    width: auto;
} 

.diamond-wrapper { 
	transform:rotate(45deg);
	overflow:hidden;
	display:flex;
	align-items: center;
	justify-content: center;
	height: 70%;
width: 70%;
} 

.diamond-outer-wrapper{
    display: flex;
    justify-content: center;
    align-items: center;
	margin:auto;
	}

/*-----------------------------------------  Menu --------------------------------------- */

.menu{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 7vh;
	background-color: white; /*bg-color 2 */
	transition: ease-in 0.25s;
	z-index: 10000;
}

.menu .safariMenuBugfix{
	height:100vh;
	position:absolute;
	left:-1px;
	width:1px;
}

.backLinkContainer{
	position: relative;
	display: flex;
}

.backLink{
	transition: ease-in 0.25s;
	z-index: 30;
	position: absolute;
	display: flex;
	border-bottom: 1px solid var(--headlineColor);
	background: linear-gradient(to right, rgba(255, 255, 255, 1), rgba(255, 255, 255, 1), rgba(255,255,255,0) 80%);
	transform: translateX(-100%);
}

.backLink .backLinkWrapper{
	transition: ease-in 0.25s;
	display: initial;
	opacity: 0;
}

.backLink .backLinkWrapper a{
	transition: ease-in 0.25s;
	text-decoration:none;
	color: black;
	display: initial;
}

.backLink .backLinkWrapper a i{
}

.backLink .backLinkWrapper a:hover{
	color: var(--headlineColor);
}

#cssmenu {
	font-family: 'Montserrat';
}

.menuSpace{
	width: 100%;
	height:11vh;
}

.menuWrapper{
	border-bottom: 1px solid var(--headlineColor);
}

.menu .menuWrapper, .menu .menuWrapper .ddMenu, .menu .menuWrapper .ddMenu #cssmenu, .menu .menuWrapper .ddMenu #cssmenu .lvl1menu{
	height:100%;
	z-index: 15000;
}


#cssmenu::after, #cssmenu > ul::after{
	content: none;
}

.ddMenu #cssmenu .lvl1menu{
	display:flex;
	justify-content: space-between;
}

.ddMenu{
	width: 55%;
	right: 15%;
	position: absolute;
}
#cssmenu > ul > li {
	position: relative;
	height: 106%;
	width: 15%;
}

#cssmenu > ul {
	background: none;
}

#cssmenu > ul > li > a {
	background: white;
	color: var(--headlineColor);
	font-size: 0.7vw;
	height: 90%;
	white-space: break-spaces;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index:12000;
	padding:0;
	transform: rotateX(0deg) translatey(0px);
	text-align: center;
}

#cssmenu > ul > li:hover > a::before, #cssmenu > ul > li > a:hover::before {
	background: rgb(220, 220, 220);
	color: var(--headlineColor);
}

#cssmenu > ul > li:hover > a::before, #cssmenu > ul > li > a::before {
	background: rgb(250, 250, 250);
	color: var(--headlineColor);
	display:flex;
	align-items: center;
	justify-content: center;
}


#cssmenu > ul > li:hover .submenu{
	transition: ease-in 0.25s;
	transform: translateY(0);
}

#cssmenu .submenu{
	transition: ease-in 0.5s;
	background: rgba(0,0,0,0.8);
	transform: translateY(-100%);
	z-index:10000;
	display: flex;
	flex-direction: column;
}

#cssmenu .submenu li a{
	color: white;
	text-decoration: none;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 0.7vw;
	width: 100%;
	height: 100%;
	transition: ease-in 0.25s;
	text-align: center;
}

#cssmenu .submenu li a:hover{
	background-color: var(--headlineColor);
	color: white;
}

#cssmenu .submenu li{
	height: 5vh;
	border-bottom: 1px solid white;
}

#cssmenu .submenu li:last-child{
	border-bottom: none;
}


.language{
	height: 100%;
	float: left;
	width: 5%;
	position: absolute;
	left: 90%;
}

.language div{
	height: 100%;
	width: 49%;
	float: left;
}


.language div a:hover{
	color: rgb(100, 100, 100);
}

.language div a{
	float: right;
	top: 50%;
	position: relative;
	transform: translateY(-50%);
	padding: 0 10%;
	color: var(--headlineColor);
	text-decoration: none;
	transition: ease-in 0.25s;
}

.language div:last-child a{
	float:left;
}

.language div:first-child a{
	border-right: 1px solid var(--headlineColor);;
}


.menu .logo .logoSchrift{
	left: -15%;
	position: relative;
}
.menu .logo .logoSchrift img{
	height: 90%;
	width: auto;
	bottom: 0 !important;
	position: relative;
}

.menu .logo{
	width: 20%;
	height:100%;
	float: left;
	left: 10%;
	position: relative;
	z-index: 1000;
}

.menu .logo img {
	width: 20%;
	position: absolute;
	height: auto;
	bottom: -60%;
	transition: ease-in 0.25s;
}

.menu .logo div{
	position: absolute;
	left: 20%;
	display: flex;
	height: 100%;
	align-items: center;
	justify-content: center;
	color: white;
	text-decoration: none;
}

.contactNav {
	position: relative;
	left: 95%;
	height:100%;
	box-sizing: border-box;
	z-index: 99;
	width: 5%;
}

/*----------------------------------------Menu Lvl3 -----------------------------------*/

.menuWrapperlvl3{
	height: 9vh;
	opacity: 0;
	transition: ease-in 0.25s;
	position: relative;
	float: right;
	z-index:20;
}

.menLvl3Fader{
	background: linear-gradient(to bottom, rgba(255, 255, 255, 1), rgba(255, 255, 255, 1), rgba(255,255,255,0) 80%);
	position: absolute;
	width: 100%;
	height: 6vh;
	transition: ease-in 0.25s;
	pointer-events: none;
	z-index:10;
}

.menuWrapperlvl3 a{
	float: left;
	color: black;
	text-decoration: none;
	margin-top: 0.2%;
	transition: ease-in 0.25s;
	white-space: nowrap;
}

.menuWrapperlvl3 a:hover{
	color: var(--headlineColor);
}

.menLvl3Element{
	opacity: 0;
	transition:ease-in 0.25s;
	padding: 0 0.2vw;
	border-left: 1px solid black;
	font-size: 0.8vw;
	font-weight: bold;
}

#menLvl3Container a:first-child .menLvl3Element{
	border-left: none;
}

#menLvl3Container{
	border-bottom: 1px solid var(--headlineColor);
	display: inline-flex;
	padding: 0.2%;
	margin-top: 0.5%;
	position: relative;
	transition: ease-in 0.5s;
	right: 0;
	float: right;
	transform: translateX(0);
}

.imgDiamond img{
	display: none;
	position: absolute;
	bottom: 0;
}

#menLvl3Container .imgDiamond img{
	transform: translate(-100%, 50%);
	left: 0;
}

.backLink .imgDiamond img{
	transform: translate(100%, 50%);
	right:0;
}

.backLink .imgDiamond{
	display: initial;
	position: relative;
}

#menLvl3Container img:hover{
	cursor: pointer;
}



/* -------------------- Flexbox -----------------------*/
/*Flex Box*/

.flexContainer{
	width:100% !important;
	display: flex !important;
	flex-direction: row;
	position: relative !important;
	height: auto !important;
	left: initial !important;
	top: initial !important;
	float: left !important;
	/*padding-left: 1%;
	padding-right: 1%;*/
	line-height: 1.5;
}

.flexElement{
	width: 98% !important;
	position: relative !important;
	height: auto !important;
	left: initial !important;
	top: initial !important;
	float: left !important;
	padding: 1% !important;
	overflow: hidden;
	overflow-y: hidden;
	margin:auto;
}

/*------------------------ShadowBox---------------------*/

.shadowBox img{
	max-width: 100%;
}

.shadowBox{
	margin: 1% 1%;
	box-shadow: 5px 5px 5px 1px #ccc;
}

.flexContainer .flexElement:first-child{
	margin-left:0;
	 }

.flexContainer .flexElement:last-child{
	margin-right:0;
	 }
/*--------------------------------------- footer --------------------------------------*/


.footer{
	border-top: 1px solid var(--headlineColor);
}

.footerContainer{
	overflow: hidden;
}

.footer div, .footer p{
	font-size: 1em;
}

#footerMap{
	border: 0;
	width: 90%;
	height: 100%;
}

#footerWrapper{
	background-color: rgb(250,250,250); /*bgcolor 2 */
	color: var(--headlineColor);
	font-size: 0.9vw;
}

.footerGrid{
	width: 100%;
	height:100%;
	display: -ms-grid;
	display: grid;
	-ms-grid-columns: 10% 90%;
	grid-template-columns: 10% 90%;
	grid-auto-rows: auto;
}

.footerGrid div{
	position: relative;
}

.footerGrid div:nth-child(odd) i{
	position:absolute;
	top:50%;
	left:50%;
	transform :translate(-50%, -50%);
}

.footer a{
	color:var(--headlineColor);
	text-decoration: none;
	transition: ease-in 0.25s;
}

.footer a:hover{
	color: rgb(100, 100, 100);
}

.footer img{
	width: 80%;
	height: auto;
	margin-bottom: 1%;
}

.footerLogo div{
	display: flex;
	/*justify-content: center;*/
	align-items: center;
}

.footer .socialMedia img{
	width:5%;
	margin-top:1%;
}

.footer .datenschutzBtn{
	cursor: pointer;
	transition: 0.25s ease-in;
}

.footer .datenschutzBtn:hover{
	color: rgb(100, 100, 100)
}


/*------------------------ Youtube embedded ----------------*/
.video-container {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}


/*-------------------------------------------------Tablet View Landscape---------------------------------------------------*/
@media (hover: none) {
	.desktop{
		display: none;
	}

	.mobile{
		display: initial;
	}

	#cssmenu.small-screen #menu-button::before {
		background-color: var(--headlineCOlor);
	}
	
	#cssmenu.small-screen > ul > li:hover > a, #cssmenu.small-screen > ul > li > a:hover {
		color:black;
		}

	.menu .logo {
		width: auto;
		height: 100%;
		float: left;
		left: 5%;
		position: relative;
		z-index: 1000;
	}

	.menuWrapper .logo img{
		width: auto;
		position: relative;
		height: 80%;
		top: 10%;
	}
	.ddMenu {
		float: left;
		width: 40%;
		position: relative;
		left: 22%;
	}
	#cssmenu.small-screen #menu-button:hover{
		color: rgb(100, 100, 100);
	}

	#cssmenu.small-screen #menu-button:hover::before{
		background-color: rgb(100, 100, 100)
	}

	#cssmenu.small-screen #menu-button:hover::after{
		border-top: 2px solid rgb(100, 100, 100);
		border-bottom: 2px solid rgb(100, 100, 100);
	}

	#cssmenu.small-screen #menu-button{
		color:var(--headlineColor) !important;
		transition: 0.25 ease-in;
	}
	#cssmenu.small-screen #menu-button::before{
		background: var(--headlineColor) !important;
		transition: 0.25 ease-in;
	}
	#cssmenu.small-screen #menu-button.menu-opened::before {
		background: var(--headlineColor) !important;
		opacity:0.7;
		}

	#cssmenu.small-screen #menu-button::after{
		border-top: 2px solid var(--headlineColor) !important;
		border-bottom: 2px solid var(--headlineColor) !important;
		transition: 0.25 ease-in;
	}
#cssmenu.small-screen #menu-button.menu-opened::after {
		border-top: 2px solid var(--headlineColor) !important;
		border-bottom: 2px solid var(--headlineColor) !important;
	opacity:0.7;
	}
	
	#cssmenu.small-screen #menu-button {
		transform: translateY(-50%);
		top: 50%;
	}

	.language {
		height: 100%;
		float: left;
		position: relative;
		left: 35%;
		width: auto;
	}

	.contactNav {
		position: relative;
		float: right;
		right: 5%;
		height: 100%;
		box-sizing: border-box;
		z-index: 99;
		width: auto;
		height: 100%;
		left: auto;
	}

	#cssmenu.small-screen #menu-button {
		background: transparent;
	}

	#cssmenu > ul > li {
		width:50%;
		height:10%;
		margin:0;
	}

	#cssmenu > ul > li > a {
		font-size: initial;
		width:90%;
	}

	#cssmenu > ul > li > a:hover {
		color: rgb(100,100,100) !important;
	}

	#cssmenu .submenu {
		position: absolute;
		width: 100%;
		left: 200%;
		top:0;
		transform: translateY(0);
	}

	.ddMenu #cssmenu .lvl1menu{
		display: block;
		left: 0px;
		position: fixed;
		justify-content: inherit;
		flex-direction: column;
	}

	#cssmenu .menuArrow{
		width: 10%;
		height: 95%;
		position: absolute;
		right: 0;
		float: right;
		top: 0;
		background: var(--headlineColor);
	}

	#cssmenu .menuArrow i{
		transform: translate(-50%, -50%);
		top: 50%;
		left:50%;
		position: absolute;
	}

	#cssmenu .submenuOpen .submenu{
		left:100%;
	}

	#cssmenu .submenu li a {
		font-size: initial;
	}
}

@media only screen and (max-width: 1260px) {
	.desktop{
		display: none;
	}

	.mobile{
		display: initial;
	}

	.menu .logo {
		width: auto;
		height:95%;
		top: 50%;
		transform: translateY(-50%);
		float: left;
		left: 5%;
		position: relative;
		z-index: 1000;
	}

	.menuWrapper .logo img{
		width: auto;
		position: relative;
		height: 80%;
		top: 10%;
	}
	.ddMenu {
		float: left;
		width: 20%;
		position: relative;
		left: 22%;
	}


	#cssmenu.small-screen #menu-button {
		transform: translateY(-50%);
		top: 50%;
	}

	.language {
		height: 100%;
		float: left;
		position: relative;
		left: 35%;
		width: auto;
	}

	.contactNav {
		position: relative;
		float: right;
		right: 5%;
		height: 50%;
		box-sizing: border-box;
		z-index: 99;
		width: auto;
		height: 100%;
		left: auto;
	}

	#cssmenu.small-screen #menu-button {
		background: transparent;
	}

	#cssmenu > ul > li {
		width:50%;
		height:10%;
		margin:0;
	}

	#cssmenu > ul > li > a {
		font-size: initial;
		width:90%;
	}


	#cssmenu .submenu {
		position: absolute;
		width: 100%;
		left: 200%;
		top:0;
		transform: translateY(0);
	}

	.ddMenu #cssmenu .lvl1menu{
		display: block;
		left: 0px;
		position: fixed;
		justify-content: inherit;
		flex-direction: column;
	}

	#cssmenu .menuArrow{
		width: 10%;
		height: 90%;
		position: absolute;
		right: 0;
		float: right;
		top: 0;
		background: white;
	}

	#cssmenu .menuArrow i{
		transform: translate(-50%, -50%);
		top: 50%;
		left:50%;
		position: absolute;
	}

	#cssmenu .submenuOpen .submenu{
		left:100%;
	}

	#cssmenu .submenu li a {
		font-size: initial;
	}
}

/*---------------------------------------------------------Mobile View------------------------------------------------------------------*/


/*------------------------FlexBox---------------------*/
@media (max-width: 768px){

	.ddMenu {
		left: 7%;
	}
	.language {
		left: 10%;
	}

	body{
		font-size: 3.2vw;
	}

	div, p{
		font-size: 1em;
	}

	.footer div, .footer p {
		font-size: 1.7em;
	}

	.backLink .imgDiamond img {
		height:50%;
		width: auto;
	}

	.backLink a{
		font-size: 0.8em;
	}
	.backLink{
		background: linear-gradient(to right, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8) 90%, rgba(255,255,255,0) 100%);
	}

	.flexContainer{
		flex-direction: column;
	}

	.menLvl3Fader, .menuWrapperlvl3{
		display: none;
	}


	h1, h2, h3, h4 {
	}

	.footerLogo div {
		justify-content: center;
	}
	.footer a, .footerContainer, .footerGrid div{
		text-align: center;
	}


	.shadowBox{
		margin-bottom: 3%;
		width: 96% !important;
	}

	.grid-container{
		-ms-grid-columns: 5% 5% 80% 5% 5%;
		grid-template-columns: 5% 5% 80% 5% 5%;
	}

	.footerGrid{
		padding: 1% 10% !important;
		width:auto !important;
	}

	.footerGrid div{
		text-align: center;
	}

}