@CHARSET "UTF-8";

body{
   font:normal 20px;
	font-family: "Myriad Pro", Arial, sans-serif;
   background-color:rgb(255, 255, 255);
   /* background-color:rgba(49, 51, 56, 0.05);/*rgb(177, 4, 14); */
   color: rgb(255, 255, 255);
   height:auto;
}

a{
   color: rgb(255, 255, 255);
   text-decoration: none;
}

p{
   color: rgb(120, 120, 120);
   text-decoration: none;
   font-size: 19px;
}

table{
   float:left;
   /* color: rgb(32, 33, 36); */
   width:auto;
   border-top: 1px solid rgb(120, 120, 120);
   border-bottom: 1px solid rgb(120, 120, 120);
   margin:20px 10px 10px 10px;
   border-spacing: 0;
}

th{
   border-bottom: 1px solid rgb(120, 120, 120);
}

.cookieSelect{
	position: fixed;
	bottom: 0px;
	left: 0px;
	width: 100%;
	height: 150px;
	background-color: #0061d4;
	border-top-left-radius: 8px;
	border-top-right-radius: 8px;
}

.cookieSelectButton{
	display: block;
	line-height: 40px;
	height: 40px;
	/* width: 120px; */
	padding-left: 10px;
	padding-right: 10px;
	font-size: 20px;
	border-radius: 8px;
	border-width: 1px;
	border-style: solid;
	border-color: rgb(255, 255, 255);
	text-align: center;
	position: absolute;
	right: 20px;
	/* transform: translate(-50%, 0); */
}

.cookieSelectButton.inverse{
	color: #0061d4;
	background-color: rgb(255, 255, 255);
}

.emergencyInfo{
	position: fixed;
	top: 0px;
	left: 0px;
	background-color: rgba(0, 0, 0, 0.7);
	width: 100%;
	height: 100vh;
	overflow: none;
}

.emergencyInfoText{
	background-color: #0061d4;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 300px;
	height:auto;
	border-radius: 8px;
}

.emergencyInfoButton{
	display: block;
	line-height: 40px;
	height: 40px;
	width: 120px;
	font-size: 20px;
	border-radius: 8px;
	border-width: 1px;
	border-style: solid;
	border-color: rgb(255, 255, 255);
	text-align: center;
	position: absolute;
   bottom: 12px;
	left: 50%;
	transform: translate(-50%, 0);
}

.emergencyInfoButton:hover{
	background-color: rgba(255, 255, 255, 0.2);
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 400px;
  background-color: #0061d4;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px;
  position: absolute;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.3s;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

.tooltip-left {
  top: -5px;
  bottom: auto;
  right: 60px;
}

.tooltip-left::after {
content: "";
position: absolute;
top: 50%;
left: 100%;
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent transparent #0061d4;
}

#headerLogo{
	position:fixed;
	top:0px;
	left:0px;
	height: 200px;
	width: 100%;
	background-color:rgb(177, 4, 14);
	transition: 0.4s;
}

#logo{
	position:absolute;
   top:85px;
   left:50%;
   transform: translateX(-60px) translateY(-60px);
	height:120px;
	opacity: 0;
	fill-opacity: 0;
	stroke-width:12px;
	stroke-dasharray: 1000;
  	stroke-dashoffset: 1000;
  	animation: logo 1.5s linear;
	animation-fill-mode: forwards;
	transition: 0.4s;
}

#logoText{
	position:absolute;
	top:155px;
	left:50%;
	transform: translateX(-190px);
	width:380px;
	opacity: 0;
	fill-opacity: 0;
	animation: logoText 1s linear;
	animation-fill-mode: forwards;
	transition: 0.4s;
}

#nav{
	position:absolute;
	top:200px;
	left:0px;
	height:60px;
   min-width: 700px;
	width:100%;
   color:rgb(255, 255, 255);
   /* background-color:rgba(255, 255, 255, 0.1); */
   background-color: rgb(49, 51, 56);  /*rgb(32, 33, 36)*/
	/* box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.5) */
	transition: 0.4s;
}

#navCenter{
   position: relative;
   left: 50%;
   height:60px;
   width:880px;/* 740 */
   transform: translateX(-440px);
}

#navRight{
	position: absolute;
	right:0px;
	top: 0px;
	height:60px;
	width:238px;/*234*/
}

#navMenuKompetenz{
   position:relative;
   top:-10px;
   left:0px;
   width:100%;
   height:360px;
   background-color: rgb(49, 51, 56);
   box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.1);
   display: none;
}

#navMenuKompetenz a {
   float: left;
   width: 100%;
   height: 60px;
   clear: both;
   text-decoration: none;
   display: block;
}

#navMenuKompetenz a:hover {
   background-color:rgba(255, 255, 255, 0.15);
}

#navMenuUntersuchungen{
   position:relative;
   top:-10px;
   left:0px;
   width:100%;
   height:240px;
   background-color: rgb(49, 51, 56);
   box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.1);
   display: none;
}

#navMenuUntersuchungen a {
   float: left;
   width: 100%;
   height: 60px;
   clear: both;
   text-decoration: none;
   display: block;
}

#navMenuUntersuchungen a:hover {
   background-color:rgba(255, 255, 255, 0.15);
}

.navMenuItem{
   float: left;
   height: auto;
   width: auto;
   clear: both;
   padding: 17px 0px 0px 25px;
}

#page{
   position: absolute;
   left: 0px;
   top: 120px;
   width: 100%;
   /* min-height: 500px; */
	/* min-height: 100%; */
   height: auto;
   /* min-width: 700px; */
   z-index: -1;
   color:rgb(0, 0, 0);
	background-color:rgb(235, 235, 235);
	/* background-color: rgb(255, 0, 0); */
	/* overflow: scroll; */
}

#map{
   position: absolute;
   top: 0px;
   left: 20%;
	height: 100%;
	width: 80%;
}

/* #navRight{
   position: relative;
   left: 20%;
   height:60px;
	width:300px;
   transform: translateX(-300px);
} */

.navButton{
   float:left;
   height:100%;
   margin-left:20px;
   font-size:24px;
   background-color:rgba(255, 255, 255, 0);
   /* animation: navButtonLeave 0.2s linear; */
}

.navButton:hover, .navButton:focus, .navButton:active {
   animation: navButton 0.2s linear;
   background-color:rgba(255, 255, 255, 0.15);
}

.navButton:hover #navMenuKompetenz{
  display: block;
}

.navButton:hover #navMenuUntersuchungen{
  display: block;
}

.navButton.activated{
	background-color:rgba(255, 255, 255, 0.15);
}

.underline {
   position: relative;
   height:100%;
	display: inline-block;
	transform: perspective(1px) translateZ(0);
	overflow: hidden;
}

.underline.blue{
	background-color: #0061d4;
}

.underline::before {
	content: "";
	position: absolute;
	left: 51%;
	right: 51%;
	bottom: 0;
	background: rgba(255, 255, 255, 0.7);
	height: 3px;
	transition-property: left, right;
	transition-duration: 0.2s;
	transition-timing-function: ease-out;
}

.underline:hover::before, .underline:focus::before, .underline:active::before {
	left: 0;
	right: 0;
}

.logoScaler{
	animation: logoScale 1s linear;
	animation-fill-mode: forwards;
}

@keyframes logo {
	0% {
		stroke-dashoffset: 1000;
		opacity: 0;
		fill-opacity: 0;
	}
	20% {
		opacity: 1;
		fill-opacity: 0;
	}
	80% {
		fill-opacity: 0;
	}
	100% {
		stroke-dashoffset: 0;
		opacity: 1;
		fill-opacity: 1;
	}
}

@keyframes logoText {
	0% {
		opacity: 0;
		fill-opacity: 0;
	}
	100% {
		opacity: 1;
		fill-opacity: 1;
	}
}

@keyframes logoScale {
	0% {
		transform:scale(1)
	}
	100% {
		transform:scale(0.4)
	}
}
@keyframes logoContainer {
	0% {
		transform:scale(1)
	}
	100% {
		transform:scale(0.4)
	}
}

@keyframes navButton {
	0% {
      background-color:rgba(255, 255, 255, 0);
	}
	100% {
      background-color:rgba(255, 255, 255, 0.15);
	}
}

@keyframes navButtonLeave {
	0% {
      background-color:rgba(255, 255, 255, 0.15);
	}
	100% {
      background-color:rgba(255, 255, 255, 0);
	}
}

.pagePicture{
	position: relative;
	top: 0px;
	width: 100%;
	height: 100%;
	text-align: center;
	/* background-color: #00ff00; */
}

.secText{
	position: absolute;
	top:50%;
	font-size: 70px;
	font-weight: bold;
	color:rgb(255, 255, 255);
	display: inline-block;
	text-shadow:0px 0px 10px rgba(0, 0, 0, 0.4);
}

.pageDivision{
	position: relative;
	top: 0px;
	width: 100%;
	height: 100%;
	background-color: rgb(255, 255, 255);
}

@media (min-width: 680px) {
	.grid-raster {
		display:grid;
		display: -ms-grid;
		gap: 40px;
		/* grid-template-columns: 33%  33%  33%; */
		grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
		position:absolute;
		padding:30px 60px 30px 60px;
		top:140px;
		left:0px;
		width: calc(100% - 120px);
		height:auto;
		background-color:rgb(235, 235, 235);
		/* min-width: 680px; */
	}

	.grid-raster3 {
		display:grid;
		display: -ms-grid;
		gap: 40px;
		/* grid-template-columns: 33%  33%  33%; */
		grid-template-columns: 1fr 1fr 1fr;
		position:absolute;
		padding:30px 60px 30px 60px;
		top:140px;
		left:0px;
		width: calc(100% - 120px);
		height:auto;
		background-color:rgb(235, 235, 235);
		/* min-width: 680px; */
	}

	.grid-rasterMap {
		display:grid;
		display: -ms-grid;
		gap: 40px;
		grid-template-columns: 1fr 2fr;
		position:absolute;
		padding:30px 60px 30px 60px;
		top:140px;
		left:0px;
		width: calc(100% - 120px);
		/* height:calc(100% - 200px); */
		background-color:rgb(235, 235, 235);
		/* min-width: 680px; */
	}
}

.gridText{
	height:480px;
	padding: 35px;
	display:flex;
	background-color:#ffffff;
	border-radius: 8px;
	box-shadow: 0px 0px 3px rgb(190, 190, 190);
}

.gridText.inverse{
	background-color:rgba(49, 51, 56, 0.8);
	/* background-color:rgb(49, 51, 56); */
}

.gridText.inverseRed{
	background-color:rgb(177, 4, 14);
	/* background-color:rgb(49, 51, 56); */
}

.gridText.button{
	background-color:#ffffff;
	color:rgb(120, 120, 120);
}

.gridText.button:hover{
	background-color:#0061d4;
	cursor: pointer;
	color:#ffffff;
}

.gridTextHeadline{
	color:rgb(120, 120, 120);
	font-size:35px;
	/* font-weight: bold; */
	margin:auto;
	text-align:center;
}

.gridTextHeadline.inverse{
	color:rgb(255, 255, 255);
}

.gridTextHeadline.inverseRed{
	color:rgb(255, 255, 255);
}

.gridTextInfo{
	color:rgb(120, 120, 120);
	font-size:24px;
	padding-left: 40px;
	padding-right: 40px;
	margin:auto;
	text-align:center;
}

.gridTextInfoButton{
	color:inherit;
	font-size:24px;
	padding-left: 40px;
	padding-right: 40px;
	margin:auto;
	text-align:center;
}

.gridTextStandard{
	color:rgb(120, 120, 120);
	font-size:24px;
}

.gridTextStandard.inverseRed{
	color:#ffffff;
}

.gridPic{
	height:550px;
	background-color:#ffffff;
	border-radius: 8px;
	box-shadow: 0px 0px 3px rgb(190, 190, 190);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

.tableDose{
   line-height: 1;
   /* padding: 13px 13px 13px 13px; */
}

.tableDose td:nth-child(1){
   padding: 10px 10px 10px 10px;
    /* text-indent: 5px; */
}

.tableDose td:nth-child(2){
   text-indent: 30px;
}

.legalBox{
	position:absolute;
	top:150px;
	left:0px;
	width: 90%;
	padding-left:35px;
	padding-right:25px;
	padding-bottom: 35px;
	color:rgb(120, 120, 120);
	height:auto;
	background-color:rgb(235, 235, 235);
	margin: 0px;
}

.legalBox a{
	color: #0061d4;
}

.teampic{
	overflow:hidden;
	position: relative;
}

.teampic:hover .teamname{
	bottom:0px;
	background-color:rgba(255, 255, 255, 0.9);
}

.teamname{
	position: absolute;
	width: 100%;
	bottom:-128px;
	padding-top:10px;
	padding-bottom:3px;
	background-color:rgba(255, 255, 255, 0.7);
	transition: 0.5s;
}

.teamname.mohr{
	bottom:-44px;
}

.teamname.staff{
	font-size: 22px;
	bottom: -30px;
}