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

	/* siehe auch Theme….css */
	
	/* just-another-hand-regular - latin (ist auch im Rte.ccc hinterlegt) */
	@font-face {
		font-family: 'Just Another Hand';
		font-style: normal;
		font-weight: 400;
		src: url('../Fonts/Just-Another-Hand/just-another-hand-v12-latin-regular.eot'); /* IE9 Compat Modes */
		src: local(''),
			url('../Fonts/Just-Another-Hand/just-another-hand-v12-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
			url('../Fonts/Just-Another-Hand/just-another-hand-v12-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
			url('../Fonts/Just-Another-Hand/just-another-hand-v12-latin-regular.woff') format('woff'), /* Modern Browsers */
			url('../Fonts/Just-Another-Hand/just-another-hand-v12-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
			url('../Fonts/Just-Another-Hand/just-another-hand-v12-latin-regular.svg#JustAnotherHand') format('svg'); /* Legacy iOS */
		font-display: swap;
	}
	

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

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


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

	*,
	*::before,
	*::after{ box-sizing:border-box; }

	html{
		/* overflow-y:scroll;	Scrollbar (allerdings bei Lightbox unschoen) */
		color:var(--color);
		background-color:#fff;
		font-size:calc(var(--font-size) + 0.5vw);
		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 */
	}
@media screen and (min-width:2400px){
	html{ font-size:calc(var(--font-size) + 12px); }
}

	html, button, input, select, textarea{
		/* addresses font-family inconsistency between form elements. */
		font-family:var(--font-family);
	}

	body{
		margin:0; /* addresses margins handled incorrectly in IE6/7 */
		min-height:100%; display:flex; flex-direction:column;  /* for footer-positioning (neu. Bei IE11 hängt er unter dem content, aber o.k.) */
	}
		#stage{ flex:1 0 auto; } /* for footer-positioning (with this notation no overlapping in IE11) */

	/* 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; }


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

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

	a{ color:var(--a_color); text-decoration:none; font-weight:500; }
	.frame-type-r2_teaserbox a{ font-weight:400; color:var(--base_color); }

	a:hover{ text-decoration:underline; }
	a:focus{ outline:thin dotted; } /* Addresses outline displayed oddly in Chrome */
	a:hover, a:active{ outline:0; } /* Improve readability when focused and hovered in all browsers: h5bp.com/h */


	.ce-bodytext a[target="_blank"]:after{
		content:url(data:image/svg+xml;charset=utf-8,%3Csvg%20height%3D%2214%22%20viewBox%3D%220%200%2010%2014%22%20width%3D%2210%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20fill%3D%22%23000%22%20fill-rule%3D%22nonzero%22%3E%3Cpath%20d%3D%22m8.99619408%201.70710678-4.8890873%204.8890873-.70710678-.70710678%204.8890873-4.8890873h-2.29289322v-1h4v4h-1z%22%2F%3E%3Cpath%20d%3D%22m0%201v9h9v-3h-1v2h-7.00337048v-7h3.00337048v-1z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E);
		margin: 0 0 0 5px; vertical-align:baseline;
	}

	.cta,
	.btn-primary{
		display:inline-block; height:auto; line-height:2rem; color:var(--cta_color); font-size:1rem; font-weight:500; 
		cursor:pointer; border:none; padding:0 10px; background-color:transparent; border:2px solid var(--cta_color);
		min-width:120px; text-align:center; 
	}
	.cta:hover,
	.btn-primary:hover{ background-color:var(--cta_color); color:var(--background-color); text-decoration:none; }


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

	h1{
		font-size:2.1em; line-height:1.2; font-weight:600;
		margin:0 0 1rem 0;
	}
	
	h2{
		font-size:1.4em;  line-height:1.2; font-weight:500;
		margin:0 0 1rem 0;
	}

	h3{
		font-size:1.2em;  line-height:1.2; font-weight:500;
		margin:0 0 1rem 0;
	}

	p{ margin:0 0 1em 0; }


	.frame-wrapper:last-child .ce-bodytext > *:last-child{ margin-bottom:0; }

	.ce-bodytext{ max-width:840px; }


	.supportinfo{ font-size:0.7rem; color:var(--fineprint_color); } /*für p und span*/
	/* eventuell alle mal in p.supportinfo umwandeln */
	
	span.initialie{	font-size:2.7em; line-height: 0.85em; float: left; }


	b, strong{ font-weight:600; }

	small{ font-size:85%; }
	.image-caption{ 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; }


	/*###
	//# Quotes + Handschrift
	###*/

	blockquote{
		/*reset*/
		font-size:1.8rem; margin:0; padding:0; border:0; outline:0; vertical-align:baseline; background:transparent; quotes:none;
		/*change*/
		text-align:center; font-family:'Just Another Hand', "Times New Roman", Times, serif; font-weight:400 !important; /*color:#000;*/ line-height:1.2;
		padding:15px 0;
	}
	blockquote:after{ content:''; content:none; }
	blockquote:before{ float:left; width:50px; height:46px; content:url('../Images/Blockquote/QuotationMarkTear.svg'); margin:-15px 5px 0 0; }
	blockquote.triangle:before{ content:url('../Images/Blockquote/QuotationMarkTriangle.svg'); }
		blockquote > p:last-child{ margin-bottom:0; }

	p + blockquote{ margin-top:calc(var(--vw, 1vw) * 2); }
		/*blockquote p{ margin:0 0 0.5em 0; }*/

		

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

	ul/*, ol*/{ margin:0 0 1em 0; padding:0 0 0 40px; }

	/* Funktioniert auch in Print-Ansicht, da kein Hintergrundbild:*/
	.ce-bodytext ul{ padding:0; }
		.ce-bodytext ul li{ padding:0 0 0 33px; list-style:none; position:relative; }
		.ce-bodytext ul li:after{ position:absolute; left:0; top:0; width:26px; height:26px; content:url('../Images/ListStyleIcons/Default.svg'); }
		.ce-bodytext ul li.icon-project-agency:after{   content:url('../Images/ListStyleIcons/ProjectAgency.svg');  }
		.ce-bodytext ul li.icon-project-partner:after{  content:url('../Images/ListStyleIcons/ProjectPartner.svg'); }


	dd{ margin:0 0 0 40px; }


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

	img, svg{
		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 */
		max-width:100%;
		height:auto;
	}
	img.icon-intext{ margin-right:7px; }

	/*###
	//# 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.ce-div{
		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; }


/* ##################################################################### */
/* #### Sektionen ###################################################### */

	.section_class-group{ background-color:var(--background-color); color:var(--color); }
	

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

	.clearer{ clear:both; }
	.text-center{ text-align:center; }

	/* Contain floats: h5bp.com/q */
	.clearfix:before, .clearfix:after{ content:""; display:table; }
	.clearfix:after{ clear:both; }

	
	/*###
	//# 16:9 aspect ratio elements
	###*/
	
	/*
	.aspect-ratio-16-9{
		position:relative; height:0; overflow:hidden; padding-bottom:56.25%;
		margin-bottom:1em;
	}
		.aspect-ratio-16-9 iframe,
		.aspect-ratio-16-9 object,
		.aspect-ratio-16-9 embed,
		.aspect-ratio-16-9 #mapcanvas{ position:absolute; top:0; left:0; width:100%; height:100%; }
	*/
		
	

/* ##################################################################### */
/* #### Formulare ###################################################### */

	.frame-type-form_formframework{ margin-bottom:2em; }

		.form-group{ margin:0.5em 0 0 0; clear:left; }
		
			label.control-label{ display:block; }
			
			.form-group input[type="text"],
			.form-group input[type="email"],
			.form-group textarea{ padding:2px; border:1px solid #999; width:300px; }
			.form-group textarea{ height:100px; }
			
			.form-group input[type="checkbox"]{ margin-right:6px; }
			
			.form-group.has-error input[type="text"],
			.form-group.has-error input[type="email"],
			.form-group.has-error textarea{ border-color:#cc0000; }

			span.error{ display:block; padding:0 0 0.5em 0; font-size:smaller; color:#cc0000; }
			.form-check, .frame-type-form_formframework .frame{ padding:0; }
			
			.form-navigation{ clear:both; padding:10px 0 0 0; }
			

/* ##################################################################### */
/* #### Liste der Unterseiten als Thumbnails ########################### */

	.frame-type-r2_menu_subpages_thumbnail a{ position:relative; transition:transform 0.2s linear 0.2s; }
	.frame-type-r2_menu_subpages_thumbnail a:focus,
	.frame-type-r2_menu_subpages_thumbnail a:hover{ transform:scale(1.06); outline:0; }

		.frame-type-r2_menu_subpages_thumbnail a figcaption{
			opacity:0; transition:opacity 0.4s linear; 
			position:absolute; z-index:1; top:0; left:0; width:100%; height:100%; padding:5px;
			display:flex;
			justify-content:center; /* align horizontal */
			align-items:center; /* align vertical */
			text-align:center;
			font-size:0.71rem; /* damit es in kleine 3er Kacheln passt */
			color:#fff; background-color:rgba(0,0,0,0.8);
			text-transform:uppercase; font-weight:600;
		}
		.frame-type-r2_menu_subpages_thumbnail a:focus figcaption,
		.frame-type-r2_menu_subpages_thumbnail a:hover figcaption{ opacity:1; }


	.js .show-later{ display:none; }
	.js .show-more{ display:block; margin-left:auto; margin-right:auto; }
	.no-js .show-more{ display:none; }


/* ##################################################################### */
/* #### Vor-Zurueck-Navigation (Referenzen als Thumbnails) ############# */

	.prev-next-nav{ background-color:var(--background-color); }
		.prev-next-nav ul{ margin-left:0; margin-right:0; padding:0; list-style:none; }
			.prev-next-nav li{ position:relative; }
			.prev-next-nav li.prev{ float:left; }
			.prev-next-nav li.next{ float:right; text-align:right; }

				.prev-next-nav figure > a{ display:block; position:relative; }
				.prev-next-nav figure > a::before{ content:""; position:absolute; left:0; top:0; width:100%; height:100%; background-color:#000; opacity:0.3; }
				.prev-next-nav figure > a:hover::before{ opacity:0; transition:opacity 0.2s linear; }
				.prev-next-nav figure > a::after{ content:""; position:absolute; top:37px; opacity:0.7; width:0; height:0; border-style:solid; }
				.prev-next-nav .prev figure > a::after{ border-width:28px 48.5px 28px 0; border-color: transparent #fff transparent transparent; left:37px; }
				.prev-next-nav .next figure > a::after{ border-width:28px 0 28px 48.5px; border-color: transparent transparent transparent #fff; right:37px; }

				.prev-next-nav figure > a:hover::after{ opacity:0.1; transition:opacity 0.2s linear; }
				
					.prev-next-nav img{ display:block; }

					.prev-next-nav figcaption{
						position:absolute; top:0; width:130px; height:130px;
						display:flex; align-items:center; /* align vertical */
					}
					.prev-next-nav .prev figcaption{ left:150px; text-align:left; justify-content:flex-start; /* align horizontal */ }
					.prev-next-nav .next figcaption{ right:150px; text-align:right; justify-content:flex-end; /* align horizontal */ }
			
			@media screen and (max-width:600px){
					.prev-next-nav figcaption{ display:none; }
			}


/* ##################################################################### */
/* #### Inhaltselement "r2_teaserbox" ################################## */

	.frame-type-r2_teaserbox > .columns{
		display:block;  text-decoration:none; background-color:var(--background-color);
		display:-ms-grid; -ms-grid-columns:1fr 1fr;	/* IE11 */ 
		display:grid; grid-template-columns:1fr 1fr;
	}

		.frame-type-r2_teaserbox > .columns > .image{ grid-column:2/3; grid-row:1/2; /* IE11: */ -ms-grid-column:2; -ms-grid-row:1; }
		.frame-type-r2_teaserbox > .columns > .ce-bodytext{ grid-column:1/2; grid-row:1/2; /* IE11: */ -ms-grid-column:1; -ms-grid-row:1; padding:4.347826087%; }
		.frame-type-r2_teaserbox.frame-layout-5 > .columns > .image{ grid-column:1/2; /* IE11: */ -ms-grid-column:1; }
		.frame-type-r2_teaserbox.frame-layout-5 > .columns > .ce-bodytext{ grid-column:2/3; /* IE11: */ -ms-grid-column:2; }

		.frame-type-r2_teaserbox > a.columns:hover > .image{ opacity:0.7; }
		
			.frame-type-r2_teaserbox > .columns > .image{
				padding-bottom:75%; /*min 4:3*/
				background-size:cover; background-position:center center;
			}

	@media (max-width:759px){
		.frame-type-r2_teaserbox > .columns{ display:block; }
	}


/* ##################################################################### */
/* #### Inhaltselement "r2_banner" ##################################### */


	.frame-type-r2_banner{ position:relative; overflow:hidden; }

	.section_class-group:first-child > .frame_class-group:first-child > .frame-wrapper:first-child > .frame.frame-type-r2_banner:not([class*="frame-space-before-"]){ padding-top:0; }

		.frame-type-r2_banner .content{
			display:flex;
			align-items:center; /* align vertical */
			position:relative; z-index:1;
			max-width:50%; /* Textbreite max 50% */
			/*min-height:40vw;*/ min-height:calc(var(--vw, 1vw) * 40);
			padding-top:4vw; padding-bottom:4vw;
		}

		.frame-type-r2_banner .ce-bodytext{ max-width:none; }

		.frame-type-r2_banner .bgmedia figure,
		.frame-type-r2_banner .bgmedia img{ width:100%; }


	/*###
	//# Layouts 0-19: Text neben Bild
	###*/

		/* Text nicht eingerückt */
		.frame-type-r2_banner .orient-120 .centered,
		.frame-type-r2_banner .orient-121 .centered,
		.frame-type-r2_banner .orient-122 .centered,
		.frame-type-r2_banner .orient-123 .centered,
		.frame-type-r2_banner .orient-124 .centered,
		.frame-type-r2_banner .orient-125 .centered{ max-width:none; width:auto; }

			.frame-type-r2_banner .orient-120 .content,
			.frame-type-r2_banner .orient-121 .content,
			.frame-type-r2_banner .orient-122 .content,
			.frame-type-r2_banner .orient-123 .content,
			.frame-type-r2_banner .orient-124 .content,
			.frame-type-r2_banner .orient-125 .content{ padding-left:4%; padding-right:4%; }


		/* Text rechts Luft geben */
		.frame-type-r2_banner .orient-100 .content{ padding-right:4.347826087%; }


		/* Bild positionieren (50%) – erstmal alle rechts … */
		.frame-type-r2_banner .orient-100 .bgmedia,
		.frame-type-r2_banner .orient-122 .bgmedia{	position:absolute; z-index:0; right:0; bottom:0; width:50%; height:100%; }

			/* Bild unten ausrichten */
			.frame-type-r2_banner .orient-100 .bgmedia img{ position:absolute; bottom:0; width:100%; }

			/* Bild ausfüllen ("cover") */
			.frame-type-r2_banner .orient-122 .bgmedia img{	object-fit:cover; position:absolute; top:0; width:100%; height:100%; }

	
	@media screen and (max-width:900px), print{
		
		.frame-type-r2_banner .orient-100 .content,
		.frame-type-r2_banner .orient-122 .content{ max-width:none; min-height:none; padding-left:0; padding-right:0; }

		/* nicht eingerückter Text: Abstand normalisieren */
		.frame-type-r2_banner .orient-120 .content,
		.frame-type-r2_banner .orient-121 .content,
		.frame-type-r2_banner .orient-122 .content,
		.frame-type-r2_banner .orient-123 .content,
		.frame-type-r2_banner .orient-124 .content,
		.frame-type-r2_banner .orient-125 .content{ padding-left:4%; padding-right:4%; }

		.frame-type-r2_banner .orient-100 .bgmedia,
		.frame-type-r2_banner .orient-122 .bgmedia{ position:relative; width:100%; /*height:0; padding-top:80%;*/ }

		.frame-type-r2_banner .orient-100 .bgmedia img,
		.frame-type-r2_banner .orient-122 .bgmedia img{ position:static; }
	}


	/*###
	//# Layout 30: Format 10:4, 100%-Bild unten
	###*/
		.frame-type-r2_banner.frame-layout-30{ min-height:calc(var(--vw, 1vw) * 40); }
			.frame-type-r2_banner.frame-layout-30 .content{ min-height:40vw; /* 10:4 Format */ padding:4vw 0 4vw 0; min-height:0; }
				.frame-type-r2_banner.frame-layout-30 .content .ce-bodytext{ width:100%; max-width:none; }
			.frame-type-r2_banner.frame-layout-30 .bgmedia{	position:absolute !important; z-index:0; left:0; top:0; width:100%; height:100%; }
				.frame-type-r2_banner.frame-layout-30 .bgmedia img{
					/* https://stackoverflow.com/questions/11670874/is-there-an-equivalent-to-background-size-cover-and-contain-for-image-elements */
					position: absolute;
					left:-10000%; right: -10000%; 
					top: -10000%; bottom: -10000%;
					margin: auto auto;
					min-width: 1000%;
					min-height: 1000%;
					-webkit-transform:scale(0.1);
					transform: scale(0.1);
				}
			
	/*###
	//# Layout 50: Feder
	###*/
		.frame-type-r2_banner .orient-500 .content{ min-height:0; padding:0 0 8vw 0; }
		.frame-type-r2_banner .orient-500 .bgmedia{	position:absolute !important; z-index:0; right:0; top:25%; width:100%; }
	@media screen and (max-width:900px){
		.frame-type-r2_banner .orient-500 .content{ max-width:none; }
		.frame-type-r2_banner .orient-500 .bgmedia{ width:100%; opacity:0.5; }
	}


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

		/* Außenabstand (für Header + Vor-Zurück-Navigation */
		.indent-small{ padding-left:56px; padding-right:56px; }
	@media screen and (max-width:1400px){
		.indent-small{ padding-left:4%; padding-right:4%; }
	}

	/*###
	//# Header
	###*/
		
		/*
		.after-scroll-1{ background-color:rgb(212, 236, 245); }
		.after-scroll-2{ background-color:rgb(245, 216, 212); }
		*/

		#header{ position:relative; z-index:2; padding-top:59px; min-height:100px; border-bottom:1px solid #efefef; background-color:rgba(255,255,255,0.9); }
		@media print { #header{ border-bottom:none; } }

			#logo{ position:absolute; top:40px; left:50%; transform:translateX(-50%); }
				#logo img{ vertical-align:top; }

			#mainNav{ float:left; text-transform:uppercase; font-size:18px; line-height:28px; font-weight:600; }
				#mainNav ul{ margin:0; padding:0; list-style:none; }
					#mainNav li{ display:inline; margin:0 25px 0 0; }
					#mainNav li:last-child{ margin:0; }
						#mainNav a{ text-decoration:none; color:var(--color); font-weight:600; }
						#mainNav a:hover,
						#mainNav a.act{ color:var(--a_color); }
				
			.socialMedia{ float:right; line-height:20px; }
				.socialMedia ul{ margin:0; padding:0; list-style:none; }
					.socialMedia li{ display:inline-block; margin:0 10px 0 0; }
					.socialMedia li:last-child{ margin:0; }
						.socialMedia a{ color:var(--color); }
							.socialMedia img{ vertical-align:top; }
							.socialMedia img:hover{ transform:scale(1.1); }
	@media screen and (min-width:1001px) and (min-height:400px){
		.after-scroll-1 body{ padding-top:100px; }
		.after-scroll-1 #header{ position:fixed; left:0; top:-39px; width:100%; }
			.after-scroll-1 #logo{ top:59px; }
				.after-scroll-1 #logo img{ height:20px; width:auto; }
	}
	@media screen and (max-width:1000px){
		#header{ padding:68px 0 0 0; min-height:80px; }
		.robinson2 #header{ min-height:108px; }
			#logo{ top:20px; }
			#mainNav{ float:none; text-align:center; }
			#header .socialMedia{ display:none; }
	}
	@media screen and (max-width:1000px) and (min-height:400px){
		.robinson2.after-scroll-2 body{ padding-top:108px; }
		.robinson2.after-scroll-2 #header{ position:fixed; left:0; top:-53px; width:100%; }
			.robinson2.after-scroll-2 #logo{ top:0; }
	}
	@media screen and (max-width:370px){
			#mainNav li{ margin-right:17px; }
			#mainNav li:last-child{ margin:0; }
	}

	/*###
	//# Stage
	###*/

		.frame_class-group{ overflow:hidden; } /* behebt Chrome-Darstellungsfehler: horizontaler Scrollbar bei Browserbreite knapp unter 1400 */
		.frame_class-group-half:after{ content:"";display:table;clear:both; }

			.centered{ margin-left:auto; margin-right:auto; width:92%; max-width:1288px; /* 92% von 1400px */  }

			.frame_class-group-half .frame-wrapper{ width:50%; box-sizing:border-box; }
			.frame_class-group-half .frame-wrapper:nth-child(odd){ float:left; clear:both; /*background-color:#ddd;*/ }
			.frame_class-group-half .frame-wrapper:nth-child(even){ float:right; /*background-color:#efefef;*/ }

			.frame_class-group-half .centered{ margin-left:0; margin-right:0; }
			.frame_class-group-half .centered:nth-child(odd){ padding-left:calc(50% - 644px); padding-right:28px; }
			.frame_class-group-half .centered:nth-child(even){ padding-right:calc(50% - 644px); padding-left:28px; }

				.frame-space-before-medium{ margin-top:56px; }
				.frame-space-after-medium{ margin-bottom:56px; }
				.frame-space-before-large{ margin-top:112px; }
				.frame-space-after-large{ margin-bottom:112px; }

				.section_class-group:first-child > .frame_class-group:first-child > .frame-wrapper:first-child > .frame{ padding-top:56px; }
				.section_class-group:last-child > .frame_class-group:last-child > .frame-wrapper:last-child > .frame{ padding-bottom:56px; }
				#page_753 .section_class-group:last-child > .frame_class-group:last-child > .frame-wrapper:last-child > .frame{ padding-bottom:0; } /* Vogelhäuschen auf r2 Kontaktseite */

				/* alter Oldschool-Kram. Zu Layouts migrieren */
				.frame-box-header{ background-color:#cae0f7; padding:5px; }
				.frame-box-content{ background-color:#9EB0C4; margin-bottom:1em; padding:10px; }
	
	@media 	screen and (max-width:1400px),
	print {
		.section_class-group:first-child > .frame_class-group:first-child > .frame-wrapper:first-child > .frame{ padding-top:4%; }
		.section_class-group:last-child > .frame_class-group:last-child > .frame-wrapper:last-child > .frame{ padding-bottom:4%; }

			.frame_class-group-half .centered{ width:50%; }
			.frame_class-group-half .centered:nth-child(odd){ padding-left:4%; padding-right:2%; }
			.frame_class-group-half .centered:nth-child(even){ padding-left:2%; padding-right:4%; }

				.frame-space-before-medium{ margin-top:calc(var(--vw, 1vw) * 4); }
				.frame-space-after-medium{ margin-bottom:calc(var(--vw, 1vw) * 4); }
				.frame-space-before-large{ margin-top:calc(var(--vw, 1vw) * 8); }
				.frame-space-after-large{ margin-bottom:calc(var(--vw, 1vw) * 8); }
		
	}
	@media screen and (max-width:669px){
			.frame_class-group-half .centered:nth-child(odd),
			.frame_class-group-half .centered:nth-child(even){ margin-right:4%; margin-left:4%; padding:0; }
			/* folgendes greift auch für Elemente, die nicht .centered sind (z.B. Trennlinie) */
			.frame_class-group-half .frame-wrapper:nth-child(odd),
			.frame_class-group-half .frame-wrapper:nth-child(even){ float:none; padding:0; width:auto; }
			.frame_class-group-half .frame-wrapper:nth-child(even){ margin-top:calc(var(--vw, 1vw) * 4); }
	}


		/*###
		//# Maximalbreite der Texte
		###*/
			.frame-type-text,
			.frame-type-header,
			.frame-type-textmedia header,
			.frame-type-textmedia .ce-bodytext,
			.frame-type-r2_menu_sitemap,
			.indented{ margin-left:auto; margin-right:auto; max-width:840px; }
			.frame-type-text.frame-layout-4,
			.frame-type-header.frame-layout-4,
			.frame-type-textmedia.frame-layout-4 header,
			.frame-type-textmedia.frame-layout-4 .ce-bodytext,
			.frame-type-textmedia .r2-grid .ce-bodytext{ max-width:none; margin-left:0; margin-right:0; }

		
		/*###
		//# Klassische Texmedia-Elemente (für Oldschool.de Migration)
		###*/
			
			/* default (aus den Constants)
			.ce-below .ce-gallery{ margin-top:28px; }
			.ce-intext.ce-left .ce-gallery,	.ce-column{ margin-right:28px; }
			.ce-intext.ce-right .ce-gallery, .ce-intext.ce-left .ce-gallery, .ce-above .ce-gallery, .ce-row{ margin-bottom:28px; }
			.ce-intext.ce-right .ce-gallery{ margin-left:28px; }
			*/
		@media screen and (max-width:700px){
			.ce-below .ce-gallery{ margin-top:calc(var(--vw, 1vw) * 4); }
			.ce-intext.ce-left .ce-gallery,	.ce-column{ margin-right:calc(var(--vw, 1vw) * 4); }
			.ce-intext.ce-right .ce-gallery, .ce-intext.ce-left .ce-gallery, .ce-above .ce-gallery, .ce-row{ margin-bottom:calc(var(--vw, 1vw) * 4); }
			.ce-intext.ce-right .ce-gallery{ margin-left:calc(var(--vw, 1vw) * 4); }
		}


		/*###
		//# Textmedia: Gestaltungsraster
		###

			Prozentual:
			04[12]04[12]04[12]04[12]04[12]04[12]04
			04[   28   ]04[   28   ]04[   28   ]04
			04[         60         ]04[   28   ]04
			04[   28   ]04[         60         ]04
			04[      44      ]04[      44      ]04

			Bei 1400px in Pixeln: 
			56[168]56[168]56[168]56[168]56[168]56[168]56
					[          840           ]				Basisbreite für eingerückten Text
			*/
			.r2-grid{
				margin-left:calc(4% / -0.92); margin-right:calc(4% / -0.92);
				display:-ms-grid;  -ms-grid-columns:4% 12% 4% 12% 4% 12% 4% 12% 4% 12% 4% 12% 4%;
				display:grid; grid-template-columns:4% 12% 4% 12% 4% 12% 4% 12% 4% 12% 4% 12% 4%;
			}
				.r2-grid > *{ display:block; } /* Links in IE11 */
				.r2-grid figure img{ display:block; }

			/*###
			//# ab 101: Bild-Varianten
			###*/

			/* 101
			|[       ]| 	*/
			.frame-type-textmedia > .grid-101{ display:block; margin:0; }
			/* 102
			|⌈    ⌉[ ]|
			|⌊    ⌋[ ]| 	*/
			.grid-102 > .media-1{ grid-column:2/9; grid-row:1/4; -ms-grid-column:2; -ms-grid-column-span:7; -ms-grid-row:1; -ms-grid-row-span:3; }
			.grid-102 > .media-2{ grid-column:10/13; grid-row:1/2; -ms-grid-column:10; -ms-grid-column-span:3; -ms-grid-row:1; }
			.grid-102 > .media-3{ grid-column:10/13; grid-row:3/4; -ms-grid-column:10; -ms-grid-column-span:3; -ms-grid-row:3; }
			/* 103
			|[ ]⌈    ⌉|
			|[ ]⌊    ⌋| 	*/
			.grid-103 > .media-1{ grid-column:2/5; grid-row:1/2; -ms-grid-column:2; -ms-grid-column-span:3; -ms-grid-row:1; }
			.grid-103 > .media-2{ grid-column:2/5; grid-row:3/4; -ms-grid-column:2; -ms-grid-column-span:3; -ms-grid-row:3; }
			.grid-103 > .media-3{ grid-column:6/13; grid-row:1/4; -ms-grid-column:6; -ms-grid-column-span:7; -ms-grid-row:1; -ms-grid-row-span:3; }
			/* 104
			|[    ][ ]| 	*/
			.grid-104 > .media-1,
			.grid-130 > .media-1,
			.grid-230 > .media-1,
			.grid-137 > .ce-bodytext,
			.grid-237 > .ce-bodytext{ grid-column:2/9; grid-row:1/2; -ms-grid-column:2; -ms-grid-column-span:7; -ms-grid-row:1; }
			.grid-104 > .media-2,
			.grid-130 > .ce-bodytext,
			.grid-230 > .ce-bodytext,
			.grid-137 > .media-1,
			.grid-237 > .media-1{ grid-column:10/13; grid-row:1/2; -ms-grid-column:10; -ms-grid-column-span:3; -ms-grid-row:1; }
			/* 105
			|[ ][    ]| 	*/
			.grid-105 > .media-1,
			.grid-133 > .media-1{ grid-column:2/5; grid-row:1/2; -ms-grid-column:2; -ms-grid-column-span:3; -ms-grid-row:1; }
			.grid-105 > .media-2,
			.grid-133 > .ce-bodytext{ grid-column:6/13; grid-row:1/2; -ms-grid-column:6; -ms-grid-column-span:7; -ms-grid-row:1; }
			/* 106
			|[  ][  ]| 		*/
			.grid-106 > .media-1{ grid-column:2/7; grid-row:1/2; -ms-grid-column:2; -ms-grid-column-span:5; -ms-grid-row:1; }
			.grid-106 > .media-2{ grid-column:8/13; grid-row:1/2; -ms-grid-column:8; -ms-grid-column-span:5; -ms-grid-row:1; }
			/* 107
			|[ ][ ][ ]| 	*/
			.grid-107 > .media-1,
			.grid-list > *:nth-child(1){ grid-column:2/5; grid-row:1/2; -ms-grid-column:2; -ms-grid-column-span:3; -ms-grid-row:1; }
			.grid-107 > .media-2,
			.grid-list > *:nth-child(2){ grid-column:6/9; grid-row:1/2; -ms-grid-column:6; -ms-grid-column-span:3; -ms-grid-row:1; }
			.grid-107 > .media-3,
			.grid-list > *:nth-child(3){ grid-column:10/13; grid-row:1/2; -ms-grid-column:10; -ms-grid-column-span:3; -ms-grid-row:1; }

		@media screen and (max-width:890px){
			.grid-102 > .media-1{ grid-column:2/13; grid-row:1/2; -ms-grid-column:2; -ms-grid-column-span:11; -ms-grid-row:1; -ms-grid-row-span:1;  }
			.grid-102 > .media-2{ grid-column:2/7; grid-row:2/3; -ms-grid-column:2; -ms-grid-column-span:5; -ms-grid-row:2; margin-top:calc(100% / 44 * 4); }
			.grid-102 > .media-3{ grid-column:8/13; grid-row:2/3; -ms-grid-column:8; -ms-grid-column-span:5; -ms-grid-row:2; margin-top:calc(100% / 44 * 4); }

			.grid-103 > .media-1{ grid-column:2/7; grid-row:1/2; -ms-grid-column:2; -ms-grid-column-span:5; -ms-grid-row:1; }
			.grid-103 > .media-2{ grid-column:8/13; grid-row:1/2; -ms-grid-column:8; -ms-grid-column-span:5; -ms-grid-row:1; }
			.grid-103 > .media-3{ grid-column:2/13; grid-row:2/3; -ms-grid-column:2; -ms-grid-column-span:11; -ms-grid-row:2; -ms-grid-row-span:1; margin-top:calc(100% / 90 * 4); }

			.grid-130 > .media-1,
			.grid-230 > .media-1{ grid-column:2/7; grid-row:1/2; -ms-grid-column:2; -ms-grid-column-span:5; -ms-grid-row:1; }
			.grid-130 > .ce-bodytext,
			.grid-230 > .ce-bodytext{ grid-column:8/13; grid-row:1/2; -ms-grid-column:8; -ms-grid-column-span:5; -ms-grid-row:1; }
			/*
			.grid-list > *:nth-child(1),
			.grid-107 > .media-1{ grid-column:2/7; grid-row:1/2; -ms-grid-column:2; -ms-grid-column-span:3; -ms-grid-row:1; }
			.grid-list > *:nth-child(2),
			.grid-107 > .media-2{ grid-column:8/13; grid-row:1/2; -ms-grid-column:8; -ms-grid-column-span:3; -ms-grid-row:1; }
			.grid-list > *:nth-child(3),
			.grid-107 > .media-3{ grid-column:2/7; grid-row:2/3; -ms-grid-column:2; -ms-grid-column-span:3; -ms-grid-row:2; margin-top:calc(100% / 44 * 4); }
			*/
		}
		@media screen and (max-width:669px){
			.grid-106{ display:block; margin-left:0; margin-right:0; }
				.grid-106 > .media-2{ margin-top:calc(4% / 0.92); }
		}
		@media screen and (max-width:426px){
			.r2-grid{ display:block; margin-left:0; margin-right:0; }
			.r2-grid > .media-2,
			.r2-grid > .media-3,
			.r2-grid > .ce-bodytext + .media-1,
			.r2-grid > .media + .ce-bodytext,
			.grid-list > *:nth-child(2),
			.grid-list > *:nth-child(3){ margin-top:calc(4% / 0.92); }
		}

		/*###
		//# ab 500: Sonderfälle
		###*/

			/* 500 Bilderrahmen-Galerie
			|[       ]| 	*/
			ul.picture-frame-gallery{ margin:0; padding:0; list-style:none; }
				.picture-frame-gallery li{ float:left; margin-left:4%; }
				.picture-frame-gallery li:nth-child(1){ margin-top:4%; }
				.picture-frame-gallery li:nth-child(3){ margin-top:8%; }
				.picture-frame-gallery li:nth-child(4){ margin-top:4%; }

				.picture-frame-gallery li:nth-child(6){ clear:left; margin-left:8%; }
				.picture-frame-gallery li:nth-child(7){ margin-top:-4%; }
				.picture-frame-gallery li:nth-child(9){ margin-left:8%; margin-top:4%; }
				.picture-frame-gallery li:nth-child(10){ margin-top:8%; }

				.picture-frame-gallery li:nth-child(11){ clear:left; margin-left:8%; margin-top:-12%; }
				.picture-frame-gallery li:nth-child(12){ margin-top:-8%; }


				.picture-frame-gallery li.width-168{ width:12%; }
				.picture-frame-gallery li.width-224{ width:16%; }
				.picture-frame-gallery li.width-280{ width:20%; }
				.picture-frame-gallery li.width-336{ width:24%; }

				@keyframes wiggle {
					0% {  transform:rotate(5deg); }
					25% { transform:rotate(-5deg); }
					50% { transform:rotate(10deg); }
					75% { transform:rotate(-2.5deg); }
					100% {transform:rotate(0deg); }
				}
				.picture-frame-gallery img{ transform-origin: 50% 4px 0; }
				.picture-frame-gallery img:hover{
					animation-name:wiggle;
					animation-duration:1000ms;
					animation-iteration-count:1;
					animation-timing-function:ease-in-out;
				}
		@media screen and (max-width:600px){
				.picture-frame-gallery li:nth-child(1){ margin-left:8%; margin-top:4%; }
				.picture-frame-gallery li:nth-child(2){ margin-left:12%; }
				.picture-frame-gallery li:nth-child(3){ clear:left; margin-left:8%; margin-top:8%; }
				.picture-frame-gallery li:nth-child(4){ margin-top:4%; margin-left:12%; }
				.picture-frame-gallery li:nth-child(5){ margin-left:8%; }
				.picture-frame-gallery li:nth-child(6){ clear:left; margin-top:4%; margin-left:4%; }
				.picture-frame-gallery li:nth-child(7){ margin-top:8%; margin-left:8%; }
				.picture-frame-gallery li:nth-child(8){ margin-top:4%; }
				.picture-frame-gallery li:nth-child(9){ clear:left; margin-left:8%; margin-top:-4%; }
				.picture-frame-gallery li:nth-child(10){ float:right; margin-top:4%; margin-right:4%; }
				.picture-frame-gallery li:nth-child(11){ clear:none; margin-top:4%; }
				.picture-frame-gallery li:nth-child(12){ clear:left; margin-top:4%; }

				.picture-frame-gallery li.width-168{ width:20%; }
				.picture-frame-gallery li.width-224{ width:28%; }
				.picture-frame-gallery li.width-280{ width:32%; }
				.picture-frame-gallery li.width-336{ width:32%; }
		}


	/*###
	//# Footer
	###*/
				
		nav#breadcrumb{
			padding:3px 15px; margin-bottom:20px; text-align:center;
			/* border-top:1px solid #efefef; border-bottom:1px solid #efefef; */
			line-height:1.8em; background-color:var(--background-color);
		}

		#footerNav{ text-align:center; margin:20px 15px; }
			#footerNav ul{ margin:0; padding:0; list-style:none; font-weight:bold; }
				#footerNav li{ margin:0; padding:0; }
					#footerNav ul ul:before{ content:":"; margin-right:10px; font-weight:600; }
					#footerNav ul ul{ display:inline; font-weight:normal; }
						#footerNav li li{ margin:0 10px 0 0; display:inline; }
						#footerNav li li:last-child{ margin:0; }
					#footerNav a{ text-decoration:none; font-weight:600; }
					#footerNav ul ul a{ font-weight:normal; }
					#footerNav a:hover, #footerNav a.cur{ text-decoration:underline; }
					#page_1 #footerNav > ul > li:first-child > a{ text-decoration:underline; }
				
		p.copyright{ text-align:center; font-size:0.7rem; color:var(--fineprint_color); margin:20px 15px; }

		#closing{ color:#fff; background-color:var(--color); padding:25px 56px; }

			footer .socialMedia{ float:left; }
				footer .socialMedia a{ color:#fff; }

			#metaNav{ float:right; font-size:12px; line-height:20px; }
				#metaNav ul{ margin:0; padding:0; list-style:none; }
					#metaNav li{ margin:0; padding:0; display:inline; }
					#metaNav li:after{ content:" | "; margin:0 6px; }
					#metaNav li:last-child:after{ content:""; content:none; margin:0; /*display:none;*/ }
						#metaNav a{ color:#fff; text-decoration:none; }
						#metaNav a:hover, #metaNav a.cur{ text-decoration:underline; }
			
	@media screen and (max-width:430px){
		#closing{ padding:20px; }
			footer .socialMedia{ float:none; margin-bottom:20px; text-align:center; }
			#metaNav{ float:none; text-align:center; }
	}
		


/* ##################################################################### */
/* #### 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;
		}
		html{ background-color:white !important; }

		pre, blockquote { 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,
		nav.socialMedia,
		#closing{ display:none !important; }

	}