/*!
 * Layout: Campfire Responsive
 * $Id: styles.less 82000 2019-11-27 08:38:05Z sseiz $
 * Copyright Zeta Software GmbH  
 */
 
 @import "mixins.less";

/* Global */
@containerpadding: #val(container-padding);
@logoh: #val(logo-image-height)px;
@navulmargin: 10px;
@desktopcontentpadding: 40px;
@fontscale: 1.0;

/* apply a natural box layout model to all elements, but allowing components to change */
html {
	font-size: 100%; // 1rem = 16px;
	box-sizing: border-box;
	overflow-y: scroll;
}
*, *:before, *:after {
	box-sizing: inherit;
}

body {
    margin: 0 auto;
	font-family: #val(global-font-family);
    line-height: 1.4;
    color: #val(globalFontColor);
    background-color: #val(global-background-color);
    <$ if ( "#val(global-background-image)" !== "" ) { $>
		background-image: url('#val(global-background-image)');
		background-repeat: #val(global-background-image-repeat);
		<$ if ( "#val(global-background-image-repeat)" == "no-repeat" ) { $>
			background-size: cover;
			background-attachment: fixed;
			background-position: center top;
		<$ } $>
	<$ } $>
	
	min-height: 100vh;
	position: relative;
}

h1, h2, h3, h4, h5, h6, p, #webtext, #footer{
	.hyphens(#val(hyphenation));
}

h1{
	font-family: #val(pagetitle-font-family);
	font-size: #val(pagetitle-font-size) * @fontscale;
	color: #val(pagetitle-font-color);
	font-weight: #val(pagetitle-font-weight);
	margin-top: #val(pagetitle-margin-top);
	margin-bottom: #val(pagetitle-margin-bottom);
	line-height: 1.2;
}
h2 {
	font-family: #val(articleheading-font-family);
	font-size: #val(articleheading-font-size) * @fontscale;
	color: #val(articleheading-font-color);
	font-weight: #val(articleheading-font-weight);
	margin-top: #val(articleheading-margin-top);
	margin-bottom: #val(articleheading-margin-bottom);
	line-height: 1.2;
}
h3, h4, h5, h6 {
	font-family: #val(articlesubheading-font-family);
	font-size: #val(articlesubheading-font-size) * @fontscale;
	color: #val(articlesubheading-font-color);
	font-weight: #val(articlesubheading-font-weight);
	margin-top: #val(articlesubheading-margin-top);
	margin-bottom: #val(articlesubheading-margin-bottom);
	line-height: 1.3;
}
h4{
	font-size: #val(articleh4heading-font-size) * @fontscale;
	color: #val(articleh4heading-font-color);
	font-weight: #val(articleh4heading-font-weight); 
}

p,
ul{
	margin: 0 0 #val(paragraph-spacing);
}

ul:not(.zpnodefaults):not(.slides):not(.zp13slider):not(.zp13carousel):not(.zpnavmainmenu), 
ul:not(.zpnodefaults):not(.slides):not(.zp13slider):not(.zp13carousel):not(.zpnavmainmenu) ul,
ol:not(.zpnodefaults):not(.slides), 
ol:not(.zpnodefaults):not(.slides) ol{
	margin: 0 0 #val(paragraph-spacing) #val(global-list-margin);
	padding: 0;
}
ul:not(.zpnodefaults):not(.slides):not(.zp13slider):not(.zp13carousel):not(.zpnavmainmenu) li:not(.zpnodefaults){
	margin: 0 0 #val(paragraph-spacing) 0;
	list-style: #val(global-unordered-list-style);
}
ol:not(.zpnodefaults):not(.slides) li:not(.zpnodefaults){
	margin: 0 0 #val(paragraph-spacing) 0;
	list-style: #val(global-ordered-list-style);
}

.zpColumnItem:first-child{
	h1, h2, h3, h4, h5, h6{
		&:first-child{
			margin-top: 0;
		}
	}
}
.zpColumnItem:last-child {
	h1:last-child, 
	h2:last-child, 
	h3:last-child, 
	h4:last-child, 
	h5:last-child, 
	h6:last-child,
	p:last-child,
	a.button:last-child,
	ul:last-child, 
	ol:last-child{
		margin-bottom: 0;
	}
}

img {
    border-style: none;
}
a:not(.button) {
    color: #val(article-inactive-font-color);
	text-decoration: #val(article-inactive-decoration);
	font-weight: #val(article-link-weight);
}
a:hover:not(.button) {
    color: #val(article-hover-font-color);
	text-decoration: #val(article-hover-decoration);
}

/***** BUTTON *****/
a.button, #banner a.button, #afterfooter a.button, input.button, .zp-form input.button, .zp-form input[type=submit] {
	display: inline-block;
	margin: 4px 10px #val(articlearea-spacing) 0;
	padding: 0;
	font-family: #val(button-font-family);
	font-size: #val(button-font-size);
	font-weight: #val(button-font-weight);
	text-decoration: none;
	text-transform: #val(button-text-transform);
	text-align: center;
	text-shadow: none;
	line-height: normal;
	color: #val(button-inactive-font-color);
	
	.safecolor(#val(button-outline-color), 50%);
	border: 1px solid @fallbackcolor;
	border: 1px solid @rgbacolor;
	
	<$ if ( "#val(button-inactive-background-color)" == "transparent" ) { $>
	background: #val(button-inactive-background-color);
	<$ }else{$>
	.gradient (lighten(#val(button-inactive-background-color), 5%), #val(button-inactive-background-color), 0%, 50%);
	<$ } $>
}
a.button:hover, #banner a.button:hover, #afterfooter a.button:hover, input.button:hover, .zp-form input.button:hover, .zp-form input[type=submit]:hover {
	color: #val(button-mouseover-font-color);
	text-decoration: none;
	.safecolor(#val(button-outline-color), 50%);
	border: 1px solid @fallbackcolor;
	border: 1px solid @rgbacolor;
	
	<$ if ( "#val(button-mouseover-background-color)" == "transparent" ) { $>
	background: #val(button-mouseover-background-color);
	<$ }else{$>
	.gradient (lighten(#val(button-mouseover-background-color), 5%), #val(button-mouseover-background-color), 0%, 50%);
	<$ } $>
}
a.button span, #banner a.button span, #afterfooter a.button span, input.button, .zp-form input.button, .zp-form input[type=submit] {
	display: block;
	margin: 0;
	padding: 8px 15px;
}

/***** FORM *****/
.zp-form{
	select{
		border-radius: 0;
	}
	input[type=submit] {
		margin-top: 20px;
	}
}
// move banner inline-editing above fixed header/nav
.zpieItem[data-area-name="Banner"]{
	[data-context="container"]{	z-index: 6010;}
	[data-context="row"]{		z-index: 6020;}
	[data-context="column"]{	z-index: 6020;}
	[data-context="article"]{	z-index: 6030;}
}
section#banner{
	margin-left:  auto;
	margin-right: auto;
	
	background-color: #val(banner-background-color);
	font-family: #val(banner-text-font-family);
	font-size: #val(banner-text-font-size);
	line-height: #val(banner-text-lineheight);
	color: #val(banner-text-font-color);
	
	p:not(:last-child){
		margin-bottom: #val(banner-paragraph-spacing);
	}
	
	a:not(.button){
		color: #val(banner-inactive-font-color);
		text-decoration: #val(banner-inactive-decoration);
		&:hover{
			color: #val(banner-hover-font-color);
			text-decoration: #val(banner-hover-decoration);
		}
	}
	
	h1, h2, h3, h4, h5, h6{
		font-family: #val(banner-heading-font-family);
		font-size: #val(banner-heading-font-size);
		font-weight: #val(banner-heading-font-weight);
		color: #val(banner-heading-font-color);
	}
}

header{
	display: flex;
	align-items: center;
	align-content: stretch;
  	justify-content: space-between; //center;
  	flex-wrap: nowrap;
  	
  	<$ if ( "#val(menu1-scrolling)" == "false" ){ $>
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	z-index: 6002;
	<$ } else { $>
	position: relative;
	z-index: 20; // above header-slider
	.zppreview &{
		z-index: 5001; // above .zpRow in inline-editing
	}
	<$ } $>
	width: 100%;
	&.fixed{
		z-index: 6002;
	}

	clear: both;
	min-height: #val(header-minheight);
	margin: 0 auto 0 auto;
	padding: 0 #val(header-padding-hor) 0 #val(header-padding-hor);
	line-height: #val(logo-image-height)px; // logo height to vertically center text
	background-color: #val(header-bgcolor);
	/* Logo */
	a.logo,
	a#logo {
		box-sizing: content-box;
		display: table-cell;
		vertical-align: middle;
		padding-right: 20px;
		line-height: 0;
		width: #val(logo-image-width)px;
		img{
			min-width: 100%;
			max-width: 100%;
			height: auto;
		}
	}
}

// hide desktop nav, on load while we figure out overflow
html.js body:not(.loaded) nav:not(.on) > ul > li,
html.js body:not(.loaded) nav a#mobilenavtoggle{
	opacity: 0;
}
// show desktop nav when page is fully loaded and overflow is set
html.js body.loaded nav:not(.on) > ul > li,
html.js body.loaded nav a#mobilenavtoggle{
	opacity: 1;
}
nav{
	align-self: stretch;
	flex-grow: 2;
	//text-align: #val(menu1-alignment);
	z-index: 20; /* keeps it above slider nav arrows */
	height: 100%;
	min-width: 81px;
	font-family: #val(menu1-font-family);
	
	a#mobilenavtoggle{
		.transition(~"opacity 300ms");
		position: absolute;
		z-index: 20;
		top: 50%;
		right: #val(header-padding-hor);
		.transform(translateY(-50%));
		
		color: #val(menu1-inactive-font-color);
		text-decoration: none;
		&:hover{
			color: #val(menu1-hover-font-color);
			text-decoration: none;
		}
	}
	
	> ul li.overflownonly{
			display: none;
		}
	> ul.overflown li.overflownonly{
		display: table-cell;
		//position: absolute;
		//top: 0;
		//right: 0;
	}
	> ul{
		display: table;
		table-layout: fixed; // needed by chrome to limit the table width
		
		&.alignright{
			margin-left: auto;
			margin-right: 0px;
			
			li li.haschilds{
				a:not(.button){
					padding-left:  2em;
					padding-right: 1em;
				}
			}
		}

		&.alignleft,
		&.aligncenter{
			margin-right: auto;
		}
		&.alignleft{
			margin-left: 0px;
		}
		&.aligncenter{
			margin-left: auto;
		}
		
		
		vertical-align: middle;
		min-height: #val(header-minheight);
		height: 100%;
		max-width: 100%;
		position: relative;
		z-index: 10; // needed in IE, else the UL covers #mobilenavtoggle
		margin-bottom: 0;
		padding: 0;
		word-spacing: -4px; // removes the whitespace affecting inline-block elements see 
		font-size: #val(menu1-font-size);
	
		li{
			position: relative;
			display: inline-block;
			//line-height: @logoh;
			padding: 0;
			vertical-align: top;
		
			a:not(.button){ // not(.button) is only used to solve a specifity issue
				.transition(~"background-color 0.2s ease-in-out, color 0.2s ease-in-out");
				position: relative;
				color: #val(menu2-inactive-font-color);
				display: block;
				margin: 0;
				padding: 0 1em;
			
				font-weight: #val(menu1-inactive-font-weight);
				text-decoration: #val(menu2-inactive-decoration);
				text-indent: 0.125em;
				text-transform: #val(menu2-text-transform);
				
				&:hover{
					font-weight: #val(menu1-hover-font-weight);
					color: #val(menu2-hover-font-color);
					text-decoration: #val(menu2-hover-decoration);
				}
			}
			&.active > a:not(.button),
			a:not(.button).active{
				font-weight: #val(menu1-active-font-weight);
				color: #val(menu2-active-font-color);
				text-decoration: #val(menu2-active-decoration);
			}
		}
		> li{
			.transition(~"opacity 300ms");
			display: table-cell;
			white-space: nowrap; // needed so level one menueitems will not wrap
			vertical-align: middle;
			word-spacing: normal;
			margin-right: 1px; 
			height: 100%;
			position: relative;
			border-bottom: 3px solid transparent; // needed to the over state isn't interrupted
			
			&:last-child{
				margin-right: 0; 
			}
			> a:not(.button){
				position: relative;
				color: #val(menu1-inactive-font-color);
				text-decoration: #val(menu1-inactive-decoration);
				text-transform: #val(menu1-text-transform);
				&:after{
					left: .3em;
					right: auto;
					.transform(~"rotate(45deg)");
				}
			}
			> a:not(.button):hover{
				color: #val(menu1-hover-font-color);
				text-decoration: #val(menu1-hover-decoration);
			}
			&.open > a:not(.button){
				color: #val(menu1-active-font-color);
				text-decoration: #val(menu2-active-decoration);
				&:after{
					.transform(~"rotate(-135deg)");
				}
			}
			&.active {
				border-bottom: 3px solid #val(menu1-active-line-color);
				> a:not(.button){
					color: #val(menu1-active-font-color);
					text-decoration: #val(menu1-active-decoration);
				}
			}
			.ie & > ul,
			.edge & > ul{
				// top: ~"calc(200% - 4px)"; // IE BUG
				top: #val(header-minheight); 
			}
		}
		ul{
			position: absolute;
			top: ~"calc(100% + 3px)";
			left: auto;
			right: 0;
			display: none;
			z-index: 10;
			margin: 0;
			padding: 0;
			background-color: #val(dropdow-bgcolor);
			//box-shadow: 0 1px 2px #val(menu2-inactive-font-color);
			
			&.hidden{
				display: none;
			}
		}
	}

	> ul.overflown{
		li:not(.overflownonly):not(.logo){
			display: none;
		}
	}

	li.haschilds > a:not(.button),
	.dropdown-menu li.haschilds{
		padding-right: 2em; 
	}

	li.haschilds > a:not(.button):after, 
	.dropdown-menu li.haschilds > a:not(.button):after{
		content: '';
		box-sizing: content-box;
		position: absolute;
		z-index: 2;
		top: 50%;
		margin-top: -0.3em;
		left: auto;
		right: 1em;
		height: .5em;
		width: .5em;
		border-color: inherit;
		border-bottom-color: transparent;	/* IE Bugfix: transparent or else a ghost shadow is visible even border-width is 0 */
		border-left-color: transparent;		/* IE Bugfix or else a ghost shadow is visible */
		border-style: solid;
		border-width: 1px 1px 0 0;
		display: block;
		.transition(~"transform 200ms ease");
		.transform(~"rotate(135deg)");
		-webkit-transform-origin: 50% 50%;
				transform-origin: 50% 50%;
	}
	
	li.haschilds.clicked > a:not(.button):after{
		.transform(~"rotate(45deg)");
	}
	> ul > li.haschilds > a:not(.button):after{
		.transform(~"rotate(45deg)");
	}
	> ul > li.haschilds.clicked > a:not(.button):after{
		.transform(~"rotate(135deg)");
	}

	ul ul li{
		display: block;
		border: 0;
		line-height: #val(menu1-line-height);
	
		a:not(.button){
			height: auto;
			text-align: left;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
	}
}
nav:not(.on){
	> ul.alignleft > li:not(.zpisright),
	> ul.aligncenter > li:not(.zpisright),
	li.zpisleft{
		ul{
			left: auto;
			right: 0;
		}
		ul ul{
			position: absolute;
			top: 0;
			left: 100%;
			right: auto;
		}
		li.haschilds{
			a:not(.button){
				padding-left:  1em;
				padding-right: 2em;
				&:after{
					left: auto;
					right: .6em;
					.transform(~"rotate(-135deg)");
				}
			}
			a:not(.button):hover:after,
			&:hover > a:not(.button):after,
			&.clicked.open > a:not(.button):after{
				.transform(~"rotate(45deg)");
			}
		}
	}
	> ul.alignright > li:not(.zpisleft),
	li.zpisright{
		ul{
			left: 0;
			right: auto;
		}
		ul ul{
			position: absolute;
			top: 0;
			left: auto;
			right: 100%;
		}
		li.haschilds{
			a:not(.button){
				padding-left:  2em;
				padding-right: 1em;
				&:after{
					left: .3em;
					right: auto;
					.transform(~"rotate(45deg)");
				}
			}
			&.clicked.open > a:not(.button):after{
				.transform(~"rotate(-135deg)");
			}
		}
	}
	> ul {
		> li{
			opacity: 0;
		}
		ul{
			box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
		}
	}
	li.overflowing{visibility: hidden;}
	
	&:not(.overflown){
		#mobilenavtoggle{display: none;}
	}
}

nav.on{
	max-height: 100vh;
	max-width: 100%;
	padding-bottom:0;
	text-align: left;
	
	> ul li.overflownonly{
		position: absolute;
		top: -(#val(header-minheight));
		right: 0;
		width: auto;
	}
	> ul.overflown li.overflownonly, 
	> ul.overflown li.overflownonly a:not(.button){
		border-top: 0;
	}

	ul{
		max-height: none;
		//padding-bottom: 2.5em;
	}
	ul li{
		display: block !important;
		border: 0;
		> a:not(.button){
			position: relative;
			color: #val(menu1-inactive-font-color);
			text-decoration: #val(menu1-inactive-decoration);
		}
		> a:not(.button):hover{
			color: #val(menu1-hover-font-color);
			text-decoration: #val(menu1-hover-decoration);
		}
		&.open > a:not(.button){
			color: #val(menu1-active-font-color);
			text-decoration: #val(menu2-active-decoration);
		}
		&.active > a:not(.button){
			color: #val(menu1-active-font-color);
			text-decoration: #val(menu1-active-decoration);
		}

	}
	ul ul{
		background-color: transparent;
		margin-left: 1em;
		position: static;
		top: auto; left: auto; right: auto; bottom: auto;
		//display: block;
	}
	li.open > ul:not(.hidden){
		display: block;
	}
	ul li > a:not(.logo){
		line-height: 3.5em;
		height: auto;
		letter-spacing: normal;
		position: relative;
	}

	li.haschilds > a:not(.button):after, 
	.dropdown-menu li.haschilds > a:not(.button):after{
		content: '';
		box-sizing: content-box;
		position: absolute;
		z-index: 2;
		top: 50%;
		margin-top: -0.25em;
		right: 15px;
		height: .5em;
		width: .5em;
		border-color: inherit;
		border-bottom-color: transparent;	/* IE Bugfix: transparent or else a ghost shadow is visible even border-width is 0 */
		border-left-color: transparent;		/* IE Bugfix or else a ghost shadow is visible */
		border-style: solid;
		border-width: 1px 1px 0 0;
		display: block;
		.transition(~"transform 200ms ease");
		.transform(~"rotate(45deg)");
	}
	li.haschilds.open > a:not(.button):after,
	li.haschilds.clicked > a:not(.button):after{
		.transform(~"rotate(135deg)");
	}

	> ul{
		max-height: ~"calc(100vh - #val(header-minheight))";
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		
		background-color: rgb(red(#val(header-bgcolor)), green(#val(header-bgcolor)), blue(#val(header-bgcolor)));
		width: auto;
		height: auto;
		max-width: 100%;
		min-width: 290px;
		position: absolute;
		top: #val(header-minheight);
		right: 0;
		z-index: 10;
		display: block;
		//max-height: none;
		box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
	}
	
	> ul.overflown li.overflownonly{
		display: inline-block !important;
	}
}
/* only define hover styles for the desktop menu on non-touch devices */
.notouch header nav{
	> ul > li > a:not(.button):hover, > ul > li > a:not(.button).active:hover{
		color: #val(menu1-hover-font-color);
		text-decoration: #val(menu1-hover-decoration);
	}

}
.notouch header nav:not(.on){
	> ul{
		li:hover > ul:not(.hidden){
			display: block;
		}
		> li.haschilds:not(.closed):hover > a:after,
		.dropdown-menu li.haschilds:not(.closed):hover > a:after{
			.transform(~"rotate(135deg)");
		}
		li li.haschilds:not(.closed):hover > a:after,
		.dropdown-menu li.haschilds:not(.closed):hover > a:after{
			.transform(~"rotate(45deg)");
		}
		
		&.alignright{
			li:not(.zpisleft) li.haschilds{
				a:not(.button):hover{
					&:after{
						.transform(~"rotate(-135deg)");
					}
				}
			}
		}
	}
}

#webtext{
	margin: #val(webname-margin-top) auto #val(webname-margin-bottom) auto;
	padding: 0 #val(header-padding-hor) 0 #val(header-padding-hor);
    text-align: #val(webname-alignment);
    z-index: 2; //keeps it above background-video in internal preview
    
    &.replacelogo {
		display: table-cell;
		vertical-align: top;
		padding: 0 20px 0 0;
		margin: 0;
		line-height: 1;
	}
	
	/* Webname */
	a#webname{
		font-family: #val(webname-font-family);
		font-size: #val(webname-font-size);
		color: #val(webname-font-color);
		font-weight: #val(webname-font-weight);
		font-style: #val(webname-font-style);
		text-transform: #val(webname-text-transform);
		line-height: 1;	
		text-decoration: none;
		&:hover{
			text-decoration: none;
		}
	}
	#webslogan{
		margin: 0 !important;
		font-family: #val(webslogan-font-family);
		font-size: #val(webslogan-font-size);
		color: #val(webslogan-font-color);
		font-weight: #val(webslogan-font-weight);
		font-style: #val(webslogan-font-style);
		text-transform: #val(webslogan-text-transform);
		line-height: 1.4;	
	}
	
}

/* Begin Header-Slider */
#slider {
	<$ if( '#val(header-image-position)' == 'behind' ){ $>
	margin-top: -#val(header-minheight);
	<$ } $>
	
	overflow: hidden;	
	
	#headerslider{
		font-family: #val(header-caption-font-family);
		font-size: #val(header-caption-font-size) * @fontscale;
		color: #val(header-caption-font-color);
		background-color: #val(header-background-color);
		line-height: 0;
		border-top: 0 !important;
		text-align: #val(header-caption-alignment);
		@shadowcolor: contrast(#val(header-caption-font-color));
		text-shadow: 1px 1px 0 @shadowcolor;
	}
	
	h1, h2, h3, h4, h5, h6{
		font-family: #val(headerheading-font-family);
		font-size: #val(headerheading-font-size);
		font-weight: #val(headerheading-font-weight);
		line-height: 1.2;
		color: #val(headerheading-font-color);
		@shadowcolor1: contrast(#val(headerheading-font-color));
		text-shadow: 1px 1px 0 @shadowcolor1;
		margin: 0;
	}
	
	p{
		margin: 0 0 #val(header-caption-paragraph-spacing) 0;
	}
	
	a:not(.button){
		color: #val(headertext-inactive-font-color);
		text-decoration: #val(headertext-inactive-decoration);
		
		&:hover{
			color: #val(headertext-hover-font-color);
			text-decoration: #val(headertext-hover-decoration);
		}
	}
	
	> :last-child{
		margin-bottom: 0;
	}
	
	.slides > li{ 
		position: relative; 
		
		> img{
			height: auto;
		}
		// .captionwrapper helps an image-less slide to gain dimensions by setting an aspect-ratio via bottom-padding
		div.captionwrapper{
			width: 100%;
			margin: 0;
			padding-bottom: <$= #val(header-image-height) / #val(header-image-width) * 100 $>%;
		}
	}
	
	.flex-caption{
		line-height: #val(header-caption-lineheight);
		background-color: #val(header-text-background-color);
		position: absolute;
		width: 90%;
			
		<$ if ( '#val(header-image-position)' == 'behind' ){ $>
   			max-height: ~"calc(96% - #val(header-minheight))";
   		<$ } else { $>
   			max-height: 96%;
		<$ } $>
		padding: 1em 15px;
		<$ if ( "#val(header-caption-vertical-alignment)" == "top" ){ $>
			left: 5%;
   			<$ if ( '#val(header-image-position)' == 'behind' ){ $>
   			top: ~"calc(5% + #val(header-minheight))";
   			<$ } else { $>
   			top: 2%;
   			<$ } $>
		<$ } else if ( "#val(header-caption-vertical-alignment)" == "bottom" ){ $>
			left: 5%;
   			bottom: 2%;
		<$ } else { // vertically center $>
			left: 50%;
   			top: 50%;
   			<$ if ( '#val(header-image-position)' == 'behind' ){ $>
   				@headerhalf: #val(header-minheight)/2;
   				.transform(~"translate(-50%,calc(-50% + " @headerhalf ~"))");
   			<$ } else { $>
   				.transform(~"translate(-50%,-50%)");
   			<$ } $>
   		<$ } $>
   		overflow: auto;
   		
   		p:last-child,
   		.button:last-child{
			margin-bottom: 0;
		}
	}
	.flexslider{
		box-shadow: none;
		z-index: 5;
	}
	.flex-direction-nav{
		list-style: none !important;
		margin: 0 !important;
		li{ margin: 0;}
	}
	.flex-direction-nav a{
		//background: url(images/bg_direction_nav.svg) no-repeat 0 0;
		color: #val(header-caption-font-color);
		background: transparent;
		border: 0;
		width: 30px;
		height: 40px;
		margin: -20px 0 0;
		<$ if ( '#val(header-image-position)' == 'behind' ){ $>
   			@headerhalf: #val(header-minheight)/2;
   			top: ~"calc(50% + " @headerhalf ~")";
		<$ } $>
		text-align: left;
		text-decoration: none;
		@shadowcolor: contrast(#val(header-caption-font-color));
		text-shadow: 1px 0px 0 @shadowcolor;
		&.flex-prev{
			text-shadow: -1px 0px 0 @shadowcolor;
		}
		
		&:hover{
			color: inherit;
			opacity: 0.7;
			text-decoration: none;
			border: 0;
		}
		&:before{
			content: "⟨"; // ⟨ ⟩ - &rang; &lang;
			font-family: #val(header-caption-font-family);
			font-size: 40px;
			font-weight: bold;
			line-height: 1;
			position: absolute;
			top: 0;
			left: 0;
			width: 30px;
			height: 40px;
			text-indent: 0;
			text-align: center;
			border: 0;
			text-decoration: none;
		}
	}
	.flex-direction-nav .flex-next:before, .flex-direction-nav .next:before {
		content: "⟩"; // ⟨ ⟩ - &rang; &lang;
	}
		
	.flex-control-nav{
		z-index: 10;
		bottom: 4px;
	}
	.flex-control-paging li {
		margin: 0 5px;
		padding: 0;		
		a{
			width: 15px;
			height: 15px;
			background: rgba(255,255,255,0.4);
			box-shadow: 0 0 2px rgba(0, 0, 0, 0.4);
			&.flex-active{
				background: rgba(255,255,255,0.7);
			}
		}
	}
	
	// next / prev buttons
	.flexslider,
	.flexslider:hover{
		.flex-direction-nav .flex-prev, 
		.flex-direction-nav .prev{
			opacity: 1;
			left: 10px;
			@media screen and (max-width:860px) {
				left: 0; // move next/prev buttons closer to the edge on small screens
			}
		}
		.flex-direction-nav .flex-next, 
		.flex-direction-nav .next{
			opacity: 1;
			right: 10px;
			@media screen and (max-width:860px) {
				right: 0; // move next/prev buttons closer to the edge on small screens
			}
		}
	}
}

/* End Header-Slider */

.zpContainer{
	//width: 100%;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	padding: @containerpadding 0 !important;
}

<$ 
	var containerCss = "";
	if ( "#val(container-accent-color)" !== "transparent" || "#val(hr-background-image)" !== "" ){ 
		containerCss += 'background: ~"';
	}
	if ( "#val(container-accent-color)" !== "transparent" ){ 
		var tmpValue = parseInt("#val(container-padding)");
		var tmpUnit = "#val(container-padding)".replace(/([0-9]|\.|\,)+([\S]+)?/, '$2').trim();
		var tmpResult = tmpValue*2 + tmpUnit;
		containerCss += 'radial-gradient(ellipse at bottom center, #val(container-accent-color) 0%, transparent 50%) bottom center / 133% ' + tmpResult + ' no-repeat';
	}
	if ( "#val(container-accent-color)" !== "transparent" && "#val(hr-background-image)" !== "" ){
		containerCss += ', ';
	}
	if ( "#val(hr-background-image)" !== "" ){
		containerCss += 'url(#val(hr-background-image)) bottom center no-repeat';
	}
	if ( "#val(container-accent-color)" !== "transparent" || "#val(hr-background-image)" !== "" ){
		containerCss += '";';
	}
	
$>

div.zpRow,
body:not(.withnews) .zpBreakout:not(.hasNews) .zpRow{
	//max-width: #val(body-max-width)px !important;
	margin-left: auto;
	margin-right: auto;
	margin-top: ~"calc(#val(articlearea-spacing) - 1em)" ; // 1em is the default .zpColumn bottom-margin we need to compensate
}
div.zpRow:first-child{
	margin-top: 0 !important;
	.zpColumn{
		margin-top: 0 !important;
	}
}
div.zpRow:last-child{
	margin-bottom: 0 !important;
	.zpColumn{
		margin-bottom: 0 !important;
	}
}

main{
	display: block; // needed for IE
}

#content,
#news{
	margin: 0 auto;	
	font-family: #val(articletextfont-family);
	font-size: #val(articletext-font-size);
	line-height: #val(articletext-lineheight);
	color: #val(articletext-font-color);
	
	a:not(.button){
		color: #val(article-inactive-font-color);
		text-decoration: #val(article-inactive-decoration);
		font-weight: #val(article-link-weight);
		&:hover{
			color: #val(article-hover-font-color);
			text-decoration: #val(article-hover-decoration);
		}
	}
	h1, h2, h3{
		a:not(.button){
			font-weight: inherit; // links in heads use same font-weight as head
		}
	}
	
	.zpContainer{
		<$= containerCss $>
	}
}
#content{
	margin-top: #val(content-margin-top);
}
/* Breadcrumb */
#breadcrumb {
	margin: #val(breadcrumb-margin-top) auto #val(breadcrumb-margin-bottom) auto;
	font-size: #val(breadcrumb-font-size);
	color: #val(breadcrumb-font-color);
	a:not(.button){
		color: #val(breadcrumb-hyperlink-inactive-font-color);
		text-decoration: #val(breadcrumb-hyperlink-inactive-decoration);
		
		&:hover{
			color: #val(breadcrumb-hyperlink-hover-font-color);
			text-decoration: #val(breadcrumb-hyperlink-hover-decoration);
		}
	}
}

.plain #content {
    float: none;
    width: auto;
}

footer{
	padding: #val(footer-vertical-padding) #val(header-padding-hor)-15 (#val(footer-vertical-padding)-10px) #val(header-padding-hor)-15;
	position: relative;
	z-index: 2; //keeps it above background-video in internal preview

	margin-left:  auto;
	margin-right: auto;

	background-color: #val(footer-background-color);	
	font-family: #val(footer-text-font-family); 
	font-size: #val(footer-text-font-size);
	line-height: #val(footer-text-lineheight);
	color: #val(footer-text-font-color);
	
	.inner{
		-ms-flex-negative: 0;
		flex-shrink: 0;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
		justify-content: space-between; 		
	
		a.logo,
		#search,
		#xmenu,
		#copyright,
		#rightoffooter{
			margin: auto;
			padding: 0 15px 10px 15px;
			
			-webkit-box-flex: 1;
			-ms-flex-positive: 1;
			flex-grow: 1;
			-ms-flex-negative: 1;
				flex-shrink: 1;
			-ms-flex-preferred-size: auto;
				flex-basis: auto;
				
			&:last-child{
				-webkit-box-flex: 0 !important;
				-ms-flex-positive: 0 !important;
				flex-grow: 0 !important;
			}
		}
		a.logo{
			-ms-flex-negative: 0;
				flex-shrink: 0;
		}
		#rightoffooter{
			.zpContainer{
				padding: 0 !important;
				.zpColumn:last-child{
					padding-left: 0;
				}
				.zpColumn,
				.zpColumnItem{
					width: auto !important;
				}
			}
			
			.shariff .orientation-horizontal{
				-webkit-box-pack: center;
				   -ms-flex-pack: center;
				 justify-content: center;
				-ms-flex-wrap: nowrap;
				    flex-wrap: nowrap;
			}
		}
	}
	
	#afterfooter{
		margin: 10px 0;
		.zpContainer{
			padding: 0 15px !important;
			.zpRow{
				max-width: none !important;
			}
		}
	}
	
	p:not(:last-child){
		margin-bottom: #val(footer-paragraph-spacing);
	}
	
	a:not(.button){
		color: #val(footer-inactive-font-color);
		text-decoration: #val(footer-inactive-decoration);
		&:hover{
			color: #val(footer-hover-font-color);
			text-decoration: #val(footer-hover-decoration);
		}
	}
	
	h1, h2, h3, h4, h5, h6{
		font-family: #val(footer-heading-font-family);
		font-size: #val(footer-heading-font-size);
		font-weight: #val(footer-heading-font-weight);
		color: #val(footer-heading-font-color);
	}	
}

#search {
	box-sizing: border-box;
	min-width: 150px;
	max-width: 100%;
	-webkit-box-flex: 4;
	-ms-flex-positive: 4;
	flex-grow: 4;
	-ms-flex-negative: 1;
		flex-shrink: 1;
	
	#zpsearchform{
		font-family: #val(footer-text-font-family); 
		margin: 0 auto; 
		padding: 0;
		width: 100%;
		//max-width: 510px;
		position: relative;
		
		#zpsearchfield{
			box-sizing: border-box;
			margin: 0;
			padding: 0 30px 3px 0px;
			width: 100%;
			//height: 44px;
			font-family: #val(footer-text-font-family); 
			font-size: #val(search-font-size);
			line-height: 1;
			color: #val(searchfield-font-color);
			background-color: #val(searchfield-background-color);
			border: none;
			<$ if ( "#val(searchfield-border-color)" !== "" && "#val(searchfield-border-color)" !== "transparent" ) { $>
				border-bottom: 1px solid #val(searchfield-border-color);
			<$ } $>
			-webkit-appearance: none; /* keeps Safari iOS from adding rounded corners etc. */
			border-radius: 0;         /* keeps Safari iOS from adding rounded corners etc. */
		}
		#zpsearchbutton{
			color: #ffffff;
			stroke: #ffffff;
			margin: 0;
			padding: 0 0 3px 0;
			border: 0;
			box-sizing: border-box;
			height: 100%;
			text-align: center;
			position: absolute;
			top: 0;
			right: 0;
			cursor: pointer;
			-webkit-appearance: none; /* keeps Safari iOS from adding rounded corners etc. */
			border-radius: 0;         /* keeps Safari iOS from adding rounded corners etc. */
			color: red;
		}
	}
}

#xmenu{
	-webkit-box-flex: 1;
	-ms-flex-positive: 1;
	flex-grow: 0;
	-ms-flex-negative: 1;
		flex-shrink: 1;
	min-width: 180px;
	font-size: #val(xmenu-font-size);
	text-align: center;
	
	> a:not(.button){
		padding: .25em;
		color: #val(xmenu-hyperlink-inactive-font-color);
		text-decoration: #val(xmenu-hyperlink-inactive-decoration);
	}
	> a:hover:not(.button){
		color: #val(xmenu-hyperlink-hover-font-color);
		text-decoration: #val(xmenu-hyperlink-hover-decoration);
	}
}

/* Copyright */
#copyright {
	-webkit-box-flex: 1;
	-ms-flex-positive: 1;
	flex-grow: 0;
	-ms-flex-negative: 1;
		flex-shrink: 1;
	min-width: 180px;
    text-align: center;
    a:not(.button){
		color: #val(footer-inactive-font-color);
		text-decoration: #val(footer-inactive-decoration);
		&:hover{
			color: #val(footer-hover-font-color);
			text-decoration: #val(footer-hover-decoration);
		}
	}
}
/* Clearfix */
.clearfix:after {
    content: "";
    display: table;
    clear: both;
}
/* ZP-Grid */
.zpgrid{
	margin-left:  -15px;
	margin-right: -15px;
}
#breadcrumb,
#banner,
#content,
#news{
	max-width: #val(body-max-width)px;
	//padding-left:  15px;
	//padding-right: 15px;
}

// move ReCaptcha-Badge in front of footer:
.grecaptcha-badge{
	z-index: 10;
}

/* breakpoints */
@bodyMaxPadded: #val(body-max-width)px + 40px;
@media screen and (max-width: @bodyMaxPadded) {	
	
	@fontscale: #val(headscale1) / 100;
	h1{font-size: #val(pagetitle-font-size) * @fontscale;}
	h2{font-size: #val(articleheading-font-size) * @fontscale;}
	h3,h5,h6{font-size: #val(articlesubheading-font-size) * @fontscale;}
	h4{font-size: #val(articleh4heading-font-size) * @fontscale;}
	#slider{
		h1, h2, h3, h4, h5, h6{font-size: #val(headerheading-font-size) * @fontscale;}
	}
	
	#webtext,
	#breadcrumb,
	#banner,
	#content,
	#news{
		padding-left:  15px;
		padding-right: 15px;
	}
	
	footer{
		.inner{
			flex-wrap: wrap;
		}
	}
	div.zpRow,
	body:not(.withnews) .zpBreakout:not(.hasNews) .zpRow{
		max-width: ~"calc(100vw - "(@desktopcontentpadding + @desktopcontentpadding) - 15px ~") !important";
	}
}

@media screen and (max-width: 736px) {
	@fontscale: #val(headscale2) / 100;
	h1{font-size: #val(pagetitle-font-size) * @fontscale;}
	h2{font-size: #val(articleheading-font-size) * @fontscale;}
	h3,h5,h6{font-size: #val(articlesubheading-font-size) * @fontscale;}
	h4{font-size: #val(articleh4heading-font-size) * @fontscale;}
	#slider{
		h1, h2, h3, h4, h5, h6{font-size: #val(headerheading-font-size) * @fontscale;}
	}
	
	div.zpRow,
	body:not(.withnews) .zpBreakout:not(.hasNews) .zpRow{
		//max-width: #val(body-max-width)px !important;
		max-width: ~"calc(100vw - "(@desktopcontentpadding - 15px) ~") !important";
	}
	
	header,
	#webtext{
		padding: 0 #val(header-padding-hor)/2 0 #val(header-padding-hor)/2;
	}
	footer{
		padding-left:  (#val(header-padding-hor)/2)-15;
		padding-right: (#val(header-padding-hor)/2)-15;
	}

	#nav{
		a#mobilenavtoggle{
			right: #val(header-padding-hor)/2;
		}
	}
}

/* Small */
@media screen and (max-width: 640px) {
	.objectfit #slider{
		.slides > li {
			min-height: 75vw;
			> img,
			>a.zpnolayoutlinkstyles > img{
				width: 100%;
				height: 75vw;
				object-fit: cover;
			}
			.captionwrapper{
				height: 75vw;
			}
		}
	}
}

@media print{
	/* PAGE SPECIFIC SETTINGS */
	@page :left, @page :right{
		margin: 1cm 2cm;
	}

	body{
		margin: 1cm 2cm;
		max-width: 21cm !important;
		padding: 0 !important;
		font-size: 12pt;
		line-height: 1.4;
		color: black !important;
		background-color: #ffffff;
		background-image: none;
		min-height: 0;
	}
	
	img{
		max-width: 100% !important;
		height: auto !important;
	}
	
	a[href]:not(.brand):not([href^="#"]):not([href^="mailto:"]):after {
		content: " [" attr(href) "]";
		font-size: 90%;
		display: inline-block;
		margin-top: 1em;
		margin-left: .4em;
	}
	
	header, #webtext, #content, #news, #banner, #footer, div.zpRow,
	body:not(.withnews) .zpBreakout:not(.hasNews) .zpRow{
		max-width: 100% !important;
	}
	
	header{
		position: static !important;
		padding-top: 0;
		margin-bottom: 2em;
	}
	
	.zpgrid{
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
	#content{
		color: black !important;
		background: transparent !important;
		margin-bottom: 2em;
	}
	#content .zpContainer,
	#news .zpContainer,
	.zpContainer,
	.zpRow,
	.zpColumn{
		color: black !important;
		background: transparent !important;
		padding: 0 !important;
		margin-bottom: 2em !important; 
	}
	
	.zpContainer,
	.zpBreakout,
	.zpContainer.zpBreakout{
		width: auto !important;
		max-width: 100% !important;
		padding-left: 0 !important;
		margin-left: 0 !important;
		
	}
	#content .zparea .zpContainer:first-child{
		padding-top: 0 !important;
	}
	#content .zparea .zpContainer:last-child{
		padding-bottom: 0 !important;
	}
	
	#footer{
		position: static !important;
	}
	
	// hide when printed
	.noprint, nav, #search, #xmenu{
		display: none !important;
	}
}