@charset "utf-8";

/* Hausfarbe: #009e8b */

@font-face { 
	font-family:"Syntax";
	src: url("../fonts/syntax-regular.woff2") format("woff2");
	font-display:swap;
}

@font-face { 
	font-family:"Syntax-Bold";
	src: url("../fonts/syntax-bold.woff2") format("woff2");
	font-display:swap;
}

*{ padding:0;margin:0;border:none; }

body{
	background:#fff;
	color:#020204;
	font-family: Syntax, sans-serif;
	font-size:1.25em;
	margin:0 auto;
	margin-bottom:40px;
	padding-top:40px;
	text-align:center;
	max-width:100%;
	overflow-x:hidden;
}


h1, h2{
	color:#009e8b;
	font-family:Syntax-Bold, sans-serif;
	font-size:1.85em;
	font-weight:normal;
	margin-right:20px; 
	margin-bottom:30px;
}
h2{ 
	font-size:1.25em;
	margin-bottom:10px;
}

.legal h1, .legal h2{ color:#975454; }
.service h1, .service h2{ color:#135C97; }

p{
	font-size:1.22em;
	line-height:140%;
	max-width:1100px;
	margin-right:7%;
	margin-bottom:50px;
}

strong{ 
	font-family:Syntax-Bold, sans-serif;
	font-weight:normal;
}

a:link,
a:visited {
	color: #333;
	font-family:Syntax, sans-serif;
	text-decoration: none;
}


a:hover,
a:active {
	color:#000;
	text-decoration:none;
}

nav a:link,
nav a:visited,
.bg_dark a:link,
.bg_dark a:visited { color:#fff; }

img{
	border:none;
	max-width:100% !important;
}


#responsive-menu-button{ display:none; }

#main{
	margin:0 auto;
	display:block;
	left:-40px;
	max-width:1830px;
	min-height:100%; 
	text-align:left;
	position:relative;
	/*max-width:100%;
	overflow-x:hidden;*/
}

header{
	display:block;
	text-align:left;
	margin-bottom:40px;
	min-height:220px;
	padding-top:40px;
	padding-left:100px;
}

#logo{
	display:inline-block;
	left:-2.21%;
	min-width:28%;
	min-height:80px;
	position:relative;
}


/* Navigation - Start */
nav{
	width:71%;
	margin-top:40px;
	position:relative;
	display:inline-block;
	margin-bottom:40px;
	text-align:right;
	vertical-align:top;
}

nav ul{
	display:block; 
	min-width:1160px;
	max-width:100%;
}
nav li{
	display:inline-block;
	list-style:none;
	margin-left:0.7em;
}
nav li:first-of-type{ margin-left:0;}
nav .service{ margin-right:4.4%; margin-left:5.9%; }
nav li a{ font-size:1.2em; padding:4px 9px 4px 9px; }
nav .main a{ background-color:#009e8b; }
nav .legal a{ background-color:#975454; } /* rot */
nav .service a{ background-color:#135C97; } /* blau */


nav ul a:hover,
nav ul a:active { color: #fff; padding-top:25px; padding-bottom:25px; }
/* Navigation - Stop */



/* Layout */
div.content{ 
	display:block;
	padding-right:43%;
	position: relative;
	text-align:left;
}


div.content h1,
div.content h2,
div.content h3{left:100px; position:relative; max-width:85%; }
div.content p{	left:100px; position:relative; max-width:70%; }


div.aside  { 
	display:block;
	position:absolute;
	right:0px;
	width:33%;
}
div.aside img{ width:100%; position:relative; top:-20px; }


/* Kontakt 1:2 */
div.content.narrow{ padding-right:53%; }
div.content.narrow div.aside { width:63%; }
div.content.narrow div.aside img{ border:1px solid #999; margin-right:-1px; position:relative; } /* Anfahrtsskizze */

div.content.narrow article{ min-width:70%;}




.container_rows{
	column-count:2;
	width:100%;
	column-gap:2.5%;
	padding:10% 85% 5% 0;
 }



.container_rows a{ 
	font-family:Syntax-Bold, sans-serif;
	font-size:0.9em; 
	font-weight:normal; 
	text-align:right; 
	display:block; 
}
.container_rows p{ 
	font-size:1.25em; 
	margin-right:10px; 
	margin-bottom:20px;
	padding-right:5px;
}
div.bg_dark{ 
	color:#fff;
	background-color: #555; 
	width:100%;
	padding:10% 85% 5% 0;
}

/*#main.bg_dark{ 
	background: linear-gradient(0deg, rgba(64,64,65,1) 56.52%, rgba(255,255,255,0) 56.52%);
}*/

article{ display:inline-block; min-height:4em; margin-bottom:15px; }
.container_rows.bg_dark h2{ color:#78B8B0; }
.container_rows h2.service{ color:#7794C8; }
.service .bg_dark h2{ color:#87A4C2; } /* #5F85AE */

.switch_p h2{ cursor:pointer; min-width:250px; }
.switch_p h2::after { content: "▸"; padding:10px; transform:rotate(90deg); display: inline-block; }
.switch_p h2:hover{ text-decoration:underline; }
.switch_p h2.hide::after{ transform:rotate(0deg); }
.switch_p p{ 
	overflow:hidden;
	position:relative;
	color:#fff;
	top:0px;
	transition-duration:1s;
	transition: all 1s ease;
	max-height:500px;
}
.switch_p p.hide { 
	max-height:1px;
	margin:0px;
	color:#555;
	top:30px;
}


.fmp-logo{
	width:110px;
	margin-top:10px;
	max-height:80px;
}







a:link, body, #logo, nav, nav ul, nav li, nav a, h2, h2:hover{
	-webkit-transition-duration: 200ms;
	   -moz-transition-duration: 200ms;
	    -ms-transition-duration: 200ms;
	    	  transition-duration: 200ms;
	-webkit-transition-timing-function: ease-out;
	   -moz-transition-timing-function: ease-out; 
	    -ms-transition-timing-function: ease-out;
}



@media only screen and (max-width: 1920px) {
	body{ padding-top:0px; }
}

@media only screen and (max-width: 1720px) {
	nav{ left:0px; width:100%; text-align:left; }
}






/* Mobile Navigation einblenden */
@media only screen and (max-width: 1280px) {
	body { padding:0px; }
	#main{ left:0px; }

	header{
		height:160px;
		margin-bottom:20px;
		min-height:auto;
		padding-top:0px;
		padding-left:0px;
		position:relative;
		min-width:auto;
		max-width:100%;
		width:auto;
		vertical-align:top;
	}

	#logo { left:20px; top:20px; width:310px; max-width:90%; }
	/*#logo { top:0%; display:block; width:90%; min-height:80px; }*/
	#responsive-menu-button{ 
		display:block;
		font-size:1px;
		width:30px; 
		height:30px; position:absolute; 
		top:65px; 
		right:65px; 
		z-index:15; 
		cursor:pointer;
	}
	#main.bg_dark{ background:none; }
	
	nav{
		position:absolute;
		left:auto;
		right:-5%;
		top:120px;
		width:380px;
		z-index:3;
	}
	nav ul{ min-width:auto; display:none; position:relative; max-width:none;}
	nav .service{ margin-right:0; margin-left:0; }
	nav.showNavi{ max-height:none; display:block; min-height:100%; background-color:rgba(200, 200, 200, 0.8);; }
	nav.showNavi ul{ display:block; background-color:rgba(180, 180, 180, 0.45); }

	nav .main a{ color:#009e8b; background-color:rgba(250, 250, 250, 0.5); }
	nav .legal a{ color:#975454; background-color:rgba(250, 250, 250, 0.5); } /* rot */
	nav .service a{ color:#135C97; background-color:rgba(250, 250, 250, 0.5); } /* blau */
	nav li { display:block; list-style:none; margin-left:0px; margin-right:0px;  margin-bottom:1px; }
	nav li a:link { display:block; list-style:none; font-size:1.2em; padding:11px 40px 11px 40px; }
	nav li a:hover { color:#222; background-color:#fff; opacity:0.6;	}

	/* Layout */
	article{ max-width:90%; }
	div.content h1,
	div.content h2,
	div.content h3,
	div.content p{
		left:40px;
		max-width:100%;
	}

	div.bg_dark{ 
		padding:10% 0% 5% 0;
	}

	/*div.aside{ margin-top:80px; }*/
}





@media only screen and (max-width: 1024px) {
	body{ font-size:1.13em; }
	h1{ font-size:1.43em; }
	h2{ font-size:1.13em; }
	p{ font-size:1.1em; }
	.bg_dark a, .container_rows a{  font-size:0.9em; }
	.bg_dark p, .container_rows p{ font-size:1.13em; }


	header{
		display:block;
		width:100%;
		height:100px;
		position:fixed;
		z-index:15;
		background:#fff;
		border-bottom:1px solid rgba(150,150,150,0.25);
	}
	#logo { left:0px; top:5px; width:300px; }
	#responsive-menu-button{ 
		position:fixed;
		top:40px; 
		right:40px; 
	}
	#main.bg_dark{ background:none; }
	
	nav{
		top:60px;
		position:fixed;
	}


	div.content{ 
		padding-right:10px;
	}

	.container_rows{
		width:103%;
		column-count:1;
		column-gap:0%;
		padding:10% 0 5% 0;
	 }

	div.aside  {
		position:relative;
		display:block;
		left:0px;
		width:1024px;
		max-width:103%;
		height:500px;
		overflow:hidden;
		margin-bottom:40px;
	}
	div.aside img{ 
		width:100%;
		position:relative;
		top:-350px;
	}

	div.content h1,
	div.content h2,
	div.content h3,
	div.content p{
		left:20px;
	}


	div.content.narrow{ padding-right:0px; }
	div.content.narrow div.aside { width:100%; height:auto; border-bottom:1px solid #999; }
	div.content.narrow div.aside img { top:100px; }
	div.content.narrow article{ min-width:100%;}
}




@media only screen and (max-width: 740px) {
	nav{ width:100%; left:0px; }
	div.aside img{ top:-230px; }
}





@media only screen and (max-width: 560px) {
	nav{ width:100%; left:0px; }
	div.aside img{ top:-120px; }
}





@media only screen and (max-width: 1280px) and (max-height: 480px) {
	/*
	#responsive-menu-button{
		position: absolute;
	}
	*/
	header{
		position:relative;
		/*max-height:100%;
		overflow-x:hidden;
		overflow-y:auto;*/
	}
	nav.showNavi{
		width:100%;
		position:fixed;
		top:-40px;
		left:0px;
		max-height:100%;
		overflow-x:hidden;
		overflow-y:auto;
	}
}






/* Darkmode */
@media (prefers-color-scheme:dark) {
	body{ background-color:#383838; }
	header{ 
		display:block;
		background-color:#555;
		width:100%;
	}

	p, p a:link, a:visited { color:#aaa; }
}
@media only screen and (max-width: 1280px) and (prefers-color-scheme:dark) {
	nav.showNavi { background-color:#484848; }
	nav a{ background-color:rgba(250, 250, 250, 0.7) !important; }
}








@media print{ 
	body {
		background:#fff !important;
		background-image:none !important;
	}
	h2, p, a, article, .container_rows h2, .container_rows p, .container_rows a{ font-size:1em; }
	#logo{ top:-40px; }
	header{ min-height:120px !important; margin:0; }
	#main{ display:inline-block; }
	.container_rows{ display:inline-block; column-count:1; width:100%; }
	article{
		display:block;
		break-inside:avoid;
	}
	h1{ color:#999; }
	nav ul{ display:none; }

	.switch_p p.hide::after{ display:none; }
	.switch_p p.hide {
		top:0px;
		opacity:1; 
		overflow:visible;
		max-height:auto;
		min-height:500px;
		height:auto;
		color:#000;
	}
}








/* responsive menu button Animation */
/* mobile Navigation */
@media screen and (max-width:1280px) {
	.closeNavi{
		caret-color: transparent;
		transform:rotate(45deg);
		font-size:1px;
		transition: all 0.5s ease;
	}
	.closeNavi #line1{
		transform: translateY(12px);
		transform-box: fill-box;
	 	transition: all 0.3s ease;
	}
	.closeNavi #line3{
		transform-box: fill-box; 
		left:15px; width:1px; opacity:0;
	 	transition: all 0.3s ease-out;
	}
	.closeNavi #line2{ 
		transform: rotate(-90deg);
		transform-origin:17px 15px; 
	 	transition: all 0.3s ease;
	}
	#responsive-menu-button:hover:not(.closeNavi) #line1{
		animation-name: lines;
      animation-duration: 0.1s;
      animation-fill-mode: both;
	}
	#responsive-menu-button:hover:not(.closeNavi) #line2{
      animation-name: lines;
      animation-duration: 0.3s;
      animation-fill-mode: both;
	}
	#responsive-menu-button:hover:not(.closeNavi) #line3{
      animation-name: lines;
      animation-duration: 0.3s;
      animation-fill-mode: both;
	}
}

 @keyframes lines {
      0% { transform: translateX(0px); }
     40% { transform: translateX(15px);}
    100% { transform: translateX(0px); }
 }
/* mobile Navigation - Stop */










 /* Animation Nav */
 @keyframes animNav {
    0% { opacity: 0; } /* transform: translateY(-20px);  */
    50% { opacity: 0; } /* transform: translateY(-20px);  */
    100% { opacity: 1;} /* transform: translateY(0); */
 }

 nav, img {
   animation-name: animNav;
   animation-duration: 1.5s;
   animation-fill-mode: both;
 }
/* Animation - Stop */




 /* Animation Headline */
 @keyframes animH1 {
 	 0% { opacity: 0; transform: translateY(25px); }
    100% { opacity: 1; transform: translateY(0);}
 }
 
h1 {
   animation-name: animH1;
   animation-duration: 0.8s;
   animation-fill-mode: both;
 }

 h2 {
   animation-name: animH1;
   animation-duration: 1.6s;
   animation-fill-mode: both;
 }
/* Animation Headline - Stop */




 /* Animation article */
 @keyframes animP {
 	 0% { opacity: 0; transform: translateY(25px); }
    25% { opacity: 0; transform: translateY(25px); }
    100% { opacity: 1; transform: translateY(0);}
 }
 
p {
   animation-name: animP;
   animation-duration: 1.2s;
   animation-fill-mode: both;
 }
/* Animation - Stop */