/* ##################################################################### */
/* #### Fonts ########################################################## */

	/* inter-300 - latin */
	@font-face {
		font-display: swap;
		font-family: 'Inter';
		font-style: normal;
		font-weight: 300;
		src: url('../Fonts/inter-v13-latin-300.woff2') format('woff2'),
			url('../Fonts/inter-v13-latin-300.ttf') format('truetype');
	}
	/* inter-regular - latin */
	@font-face {
		font-display: swap;
		font-family: 'Inter';
		font-style: normal;
		font-weight: 400;
		src: url('../Fonts/inter-v13-latin-regular.woff2') format('woff2'),
			url('../Fonts/inter-v13-latin-regular.ttf') format('truetype');
	}
	/* inter-700 - latin */
	@font-face {
		font-display: swap;
		font-family: 'Inter';
		font-style: normal;
		font-weight: 700;
		src: url('../Fonts/inter-v13-latin-700.woff2') format('woff2'),
			url('../Fonts/inter-v13-latin-700.ttf') format('truetype');
	}

/* ##################################################################### */
/* #### HTML5 display definitions ###################################### */

	article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display:block; }


/* ##################################################################### */
/* #### Base ########################################################### */

	html{
		color:#fff;
		background-color:#000;
		font-size:20px;
		line-height:1.4;
		/*
		Prevents iOS text size adjust after orientation change, without disabling user zoom
		www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/
		*/
		-webkit-text-size-adjust:100%;
		-ms-text-size-adjust:100%;
		/* OS-X fonts like Windows */
		-webkit-font-smoothing:antialiased;
		-moz-osx-font-smoothing:grayscale;
		height:100%; /* for footer-positioning */
	}

	html, button, input, select, textarea{
		/* addresses font-family inconsistency between form elements. */
		font-family:'Inter', helvetica, arial, sans-serif;
	}

	body{
		margin:0; /* addresses margins handled incorrectly in IE6/7 */
		min-height:100%; display:flex; flex-direction:column; /* for footer-positioning */
	}
		#stage{ flex:1 0 auto; } /* for footer-positioning (with this notion no overlapping in IE11) */


/* ##################################################################### */
/* #### Allg. Formatierungen ########################################### */

	/* Remove text-shadow in selection highlight. These selection declarations have to be separate. */
	::-moz-selection{ background:#b3d4fc; text-shadow:none; }
	::selection{ background:#b3d4fc; text-shadow:none; }


	/*###
	//# Links
	###*/

	a{ color:#329dd0; text-decoration:none; font-weight:normal; }
	a:hover{ text-decoration:underline; }

	a:focus{ outline:thin dotted; } /* Addresses outline displayed oddly in Chrome */
	a:hover, a:active{ outline:0; }
	
	/*
	a[target="_blank"]:after{
		content:url(data:image/svg+xml;charset=utf-8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20width%3D%2210px%22%20height%3D%2210px%22%20viewBox%3D%220%200%2010%2010%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%0A%20%20%20%20%3Cg%20id%3D%22LinkTargetBlank%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%20%20%20%20%3Cpolygon%20id%3D%22arrow%22%20fill%3D%22%23000000%22%20fill-rule%3D%22nonzero%22%20points%3D%228.99619408%201.70710678%204.10710678%206.59619408%203.4%205.8890873%208.2890873%201%205.99619408%201%205.99619408%20-8.8817842e-16%209.99619408%20-4.4408921e-16%209.99619408%204%208.99619408%204%22%3E%3C%2Fpolygon%3E%0A%20%20%20%20%20%20%20%20%3Cpolygon%20id%3D%22square%22%20fill%3D%22%23000000%22%20fill-rule%3D%22nonzero%22%20points%3D%22-7.99360578e-15%201%20-3.15544362e-30%2010%209%2010%209%207%208%207%208%209%200.996629518%209%200.996629518%202%204%202%204%201%22%3E%3C%2Fpolygon%3E%0A%20%20%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E);
		margin: 0 0 0 5px;
	}
	*/

	/*###
	//# Typography
	###*/

	h1{
		font-size:40px; line-height:1.2; font-weight:bold; margin:0 0 0.5em 0;
	}
	
	h2{
		font-size:32px; line-height:1.2; font-weight:bold; margin:2em 0 0.8em 0;
	}
	/* folgt h2 auf eine h1 im gleichen Element, dann kein Abstand */
	h1 + h2{ margin-top:0px; }
	/* wenn h2 erstes Element ist (z.B. im Mehrspalter), dann kein Abstand */
	h2:first-child{ margin-top:0; }
	h2.distance{padding:0 0 20px 0;}
	
	h3{font-size:24px; line-height:1.2; font-weight:normal; margin:0; padding: 30px 0 10px 0;}

	p{ margin:0 0 1em 0; max-width:1150px; }

	b, strong{ font-weight:bold; }

	small{ font-size:85%; }

	/* Position subscript and superscript content without affecting line-height:h5bp.com/k */
	sub, sup{ font-size:75%; line-height:0; position:relative; vertical-align:baseline; }
	sup{ top:-0.5em; }
	sub{ bottom:-0.25em; }


	/*###
	//# Lists
	###*/

	/*
	ol{ margin:1em 0; padding:0 0 0 40px; }
	*/
	
	/* Funktioniert auch in Print-Ansicht, da kein Hintergrundbild: */
	#stage ul{ margin:1em 0; padding:0; }
		#stage ul li{ padding:0 0 0 17px; list-style:none; position:relative; }
		/* #stage ul li:after{ content:""; position:absolute; left:0px; top:0.45em; display:block; box-sizing:border-box; width:6px; height:6px; border:3px solid #000; border-radius:3px; background-color:#000; } */
		#stage ul li:after{ content:""; position:absolute; left:2px; top:0.6em; display:block; box-sizing:border-box; width:7px; height:1px; background-color:#000; }
		#stage ul.content { padding:0 0 0 17px;}
		#stage ul.content li{ padding:0 0 5px 10px; list-style-type: square;}

		#stage ul.with-bullets {
			list-style: disc !important;  /* Setzt Bullets wieder ein */
			padding-left: 20px;  /* Optional: Abstand für die Bullets */
		  }
		  
		  #stage ul.with-bullets li {
			list-style: disc !important;  /* Setzt für einzelne li-Elemente auch die Bullets */
		  }

	/*###
	//# Embedded content
	###*/

	img{
		max-width:100%; height:auto;
		border:0; /* Removes border when inside 'a' element in IE6/7/8/9, FF3 */
		-ms-interpolation-mode:bicubic; vertical-align:middle; /* Improves image quality when scaled in IE7 */
	}


	/*###
	//# Figures
	###*/
	
	figure{ margin:0; } /* Set margin to 0. Addresses margin not present in IE6/7/8/9, S5, O11 */


	/*###
	//# hr ("paragraph-level thematic break")
	###*/

	/* Druck kompatible Trennlinie
	hr{
		display:block; width:auto; height:0; margin:0 0 1em 0; background:transparent; border:none; border-top:1px solid #ccc;
	}
	*/


	/*###
	//# Tables
	###*/

	/*
	table{ border-collapse:collapse; border-spacing:0; }
		td{ vertical-align:top; }
	*/


/* ##################################################################### */
/* #### non-semantic helper classes #################################### */

	/*
	.text-right{ text-align:right; }
	.text-center{ text-align:center; }
	*/

	/* Contain floats
	.clearfix:before, .clearfix:after{ content:""; display:table; }
	.clearfix:after{ clear:both; }
	.clearfix{ *zoom:1; }
	*/


	/* .space-before-medium{ margin-top:30px; } */
	.space-after-medium{ margin-bottom:30px; }
	/* .space-before-large{ margin-top:50px; } */
	/* .space-after-large{ margin-bottom:50px; } */



/* ##################################################################### */
/* #### Aufklapper ##################################################### */
	
	@media screen{
		
		.js .expander{ max-width:750px; }
		.js .expander + .expander{ margin-top:-1px; } /* aufeinander folgende Elemente */
		
			.js .expander > header{
				border-top:1px solid #BCBDC0; border-bottom:1px solid #BCBDC0; padding-top:9px; padding-bottom:9px;
				padding-left:27px; cursor:pointer; position:relative; box-sizing:border-box; color:#329dd0;
			}
			.js .expander.expanded > header{ border-bottom-style:dashed; }
			.js .expander > header:hover{ background-color:#329dd0; color:#fff; }
			.touch .expander > header:hover{ color:#329dd0; background-color:transparent; }
			
				.js .expander > header h2{ font-weight:normal; font-size:22px; }
		
			.js .expander > header:after{
				content:""; display:block; position:absolute; left:6px; top:50%; width:15px; height:1px; background-color:#329dd0;
			}
			.js .expander > header:before{
				content:""; display:block; position:absolute; left:13px; top:50%; margin-top:-7px; width:1px; height:15px; background-color:#329dd0;
				transition-delay: 0s, 0.12s; transition-duration: 0.075s, 0.075s; transition-property: margin, transform;
			}
			
			.js .expander > header:hover:after,
			.js .expander > header:hover:before{ background-color:#fff; }
			
			.touch .expander > header:hover:after,
			.touch .expander > header:hover:before{ background-color:#329dd0; }
			
			.js .expander.expanded > header:before{ transform:rotate(90deg); margin-top:-7px; }
		
				.js .expander > header h1,
				.js .expander > header h2,
				.js .expander > header h3{ margin:0; }
		
			.js .expander > .expandable{ display:none; padding:1em 0 1px 20px; box-sizing:border-box; border-bottom:1px solid #000; }
			.js .expander.expanded > .expandable{ display:block; }
		
	}


/* ##################################################################### */
/* #### Gestaltungsraster ############################################## */

	/*###
	//# Spalten
	###*/
	
		.centered{ position:relative; margin:0 auto; width:1150px; }
		.colored{ position:relative; margin:50px auto; padding:50px 0 20px 0; width:100%; background-color:#329dd0; color:#fff;}	
		.white{ position:relative; margin:100px auto 50px auto; padding:50px 0 20px 0; width:100%; background-color:#fff; color:#000;}	
			/*
			[ca. 200-350]_50_[ca. 200-350]_50_[ca. 200-350]
			30,43% + 4,35% + 30,43% + 4,35% + 30,43% = 99,99%
			*/
			.columns-2-1{ display:-ms-grid;/* IE11 */ display:grid; -ms-grid-columns:65.21% 1fr 30.43%;/* IE11 */ grid-template-columns:65.21% 1fr 30.43%; }
				.columns-2-1 .col-1{ grid-column:1/2; -ms-grid-column:1; -ms-grid-row:1; grid-row:1; }
				.columns-2-1 .col-2{ grid-column:3/4; -ms-grid-column:3; -ms-grid-row:1; grid-row:1; }
			
		
		@media screen and (max-width:1250px){
			/* Außenabstand je max 50px (4% vom Gesamt) */
			.centered{ margin:0 4%; width:auto; }
		}
		@media screen and (max-width:720px){
			.columns-2-1{ display:block; }
		}

	/*###
	//# Header
	###*/

		#header{ text-align:center; padding-top:100px; box-sizing:border-box; }
			img#logo{ position:absolute; top:25px; left:calc(50% - 575px);  height:auto; }
			#mainNav{ position:absolute; top:25px; right:calc(50% - 575px); }
				#toggleMenu{ display:none; }
				.collapsible{}
					#mainNav ul{ margin:0; padding:31px 0 0 0; list-style:none; text-align:center; text-transform:uppercase; background-color:#000; }
						#mainNav li{ margin:0 0 0 25px; display:block; float:left; padding:0; font-size:22px; font-weight:bold; position:static; line-height:1.6; }
						#mainNav li:first-child{ margin-left:0; }
							#mainNav a{ color:#fff; text-decoration:none; }
							#mainNav a.act,
							#mainNav a:hover{ color:#329dd0; text-decoration:none; }

	@media screen and (max-width:1250px){
			img#logo{ left:4%; }
			#mainNav{ right:4%; }
	}
	@media screen and (max-width:1010px){
		#header{}
			#mainNav{ position:static; }
				#toggleMenu{
					cursor:pointer; outline:0; border:none; margin:0; padding:0 0 0 40px;
					display:block; height:32px; line-height:32px; position:absolute; top:20px; right:4%;
					text-indent:-9999px; background-color:#000;
				}
					#toggleMenu .icon,
					#toggleMenu .icon:before,
					#toggleMenu .icon:after{ display:block; position:absolute; left:0; width:40px; height:4px; border-radius:4px; background-color:#329dd0; }
					#toggleMenu .icon{ top:50%; margin-top:-2px; }

					#toggleMenu .icon:before,
					#toggleMenu .icon:after{ content:""; transition-delay: 0.12s, 0; transition-duration: 0.075s, 0.075s; transition-property: top, transform; }
					#toggleMenu .icon:before{ top:-10px; }
					#toggleMenu .icon:after { top:10px; }

					#toggleMenu[aria-expanded="true"] .icon{ background-color:transparent; }
				
					#toggleMenu[aria-expanded="true"] .icon:before,
					#toggleMenu[aria-expanded="true"] .icon:after{ top:0; transition-delay: 0s, 0.12s; transition-duration: 0.075s, 0.075s; transition-property: top, transform; }
					#toggleMenu[aria-expanded="true"] .icon:before{ transform: rotate(45deg); }
					#toggleMenu[aria-expanded="true"] .icon:after { transform: rotate(-45deg); }
						
				#toggleMenu[aria-expanded="false"] + .collapsible{ display:none; }
				.collapsible{ background-color:#fff; }
					#mainNav ul{ padding:10px 0; }
						#mainNav li{ float:none; margin:0; }
	}
	@media screen and (max-width:450px){
		#header{ padding-top:20px; }
			img#logo{ position:static; margin:0 4%; max-width:92%; }
				#toggleMenu{ position:relative; top:auto; right:auto; margin:10px auto; }
	}


	/*###
	//# Stage
	###*/
	
		#stage{}
			
			/*###
			//# Titelbild / Slider
			###*/
			
			#frontispiece{ background-color:#000; margin-bottom:40px; }
			#frontispiece,
			#frontispiece .swiper-slide{
				height:0; overflow:hidden; padding-bottom:25%; position:relative; background-repeat:no-repeat; background-position:left bottom; background-size:cover;
			}
			#frontispiece.big,
			#frontispiece.big .swiper-slide{ padding-bottom:36.25%; }
			
			/*###
			//# Referenzlogos
			###*/
			img.referenzen {padding: 0 50px 50px 0;}

			a.referenzen {
				width: 200px;
				height: auto;
				opacity: 0.5; /* Start mit halbtransparenter Deckkraft */
				transition: opacity 0.3s ease-in-out; /* sanfter Übergang */
			}
			
			/* Logo bei Hover */
			a.referenzen:hover {
				opacity: 1; /* Deckkraft auf 100% beim Hover */
			}




			/*###
			//# Gallery
			###*/
				div.gallery{
					display:-ms-flexbox; display:flex; -ms-flex-wrap:wrap; flex-wrap:wrap; margin-right:-2.175%; margin-left:-2.175%;
				}
					div.gallery figure{
						-ms-flex-preferred-size:0; flex-basis:0; -ms-flex-positive:1; flex-grow:1;
						max-width:100%; box-sizing:border-box; position:relative; width:100%;
						padding-right:2.175%; padding-left:2.175%;
						-ms-flex:0 0 33.333333%; flex:0 0 33.333333%; max-width:33.333333%;
						padding-bottom:1em;
					}
						div.gallery figcaption{
							padding-top:10px;
						}
			@media screen and (max-width:750px){
				div.gallery figure{
					-ms-flex:0 0 50%; flex:0 0 50%; max-width:50%;
				}
			}
			@media screen and (max-width:380px){
				div.gallery{ display:block; margin-left:0; margin-right:0; }
				div.gallery figure{ padding:0; max-width:none; }
			}


	/*###
	//# Footer
	###*/
	
	#footer{
		padding:3.5em 0 1em 0; font-size:0.9rem;
		text-align:center;
	}
		#footer a{ font-weight:normal; text-decoration:none; }
		#footer a:hover{ text-decoration:underline; }

		#footer .logo{ margin-bottom:3rem; }
		#footer p {	display: block;	margin: 0 auto;	}		
		#footer p.imprint {padding-top:20px;}
		#footer span{ margin:0; padding:0; }
		#footer span:after{ content:"|"; }
		#footer span:nth-child(2):after { content:"\A"; white-space:pre; }
		#footer span:last-child:after{ content:""; }

	@media screen and (max-width:800px){
		#footer span:after { content:"\A"; white-space:pre; }
		#footer span:nth-child(3):after { content:","; white-space:pre; }
	}




/* ##################################################################### */
/* #### Print styles (Inlined to avoid the additional HTTP request) #### */
	
	@media print {
		*,
		*:before,
		*:after,
		*:first-letter,
		*:first-line {
			background:transparent !important;
			color:#000 !important; /* Black prints faster */
			box-shadow:none !important;
			text-shadow:none !important;
		}

		pre, blockquote{ border:1px solid #999; page-break-inside:avoid; }
		thead{ display:table-header-group; }
		tr, img{ page-break-inside:avoid; }
		img{ max-width:100% !important; }
		p, h2, h3{ orphans:3; widows:3; }
		h2, h3{ page-break-after:avoid; }
		
		
		/*###
		//# custom styles
		###*/
		
		#mainNav,
		#metaNav,
		#frontispiece{ display:none !important; }
		
		.centered{ width:auto; }
		
		#header{ text-align:center; padding-top:0; padding-bottom:30px; text-align:left; }
		img#logo{ position:static; }
	}