/* base css seemann */ 


@font-face {
    font-family: 'Source Sans Pro regular';
    font-display: swap;
    src: local('Source Sans Pro regular'), url(../Fonts/source-sans-pro-v14-latin-regular.woff2) format('woff2');
} 

@font-face {
    font-family: 'Source Sans Pro italic';
    font-display: swap;
    src: local('Source Sans Pro italic'), url(../Fonts/source-sans-pro-v14-latin-italic.woff2) format('woff2');
} 

@font-face {
    font-family: 'Source Sans Pro bold';
    font-display: swap;
    src: local('Source Sans Pro bold'), url(../Fonts/source-sans-pro-v14-latin-700.woff2) format('woff2');
} 

@font-face {
    font-family: 'Source Sans Pro bold italic';
    font-display: swap;
    src: local('Source Sans Pro italic'), url(../Fonts/source-sans-pro-v14-latin-700italic.woff2) format('woff2');
} 


:root {

	--color-white: rgb(255,255,255); 
	--color-white-transparent: rgba(255,255,255,0.65);
	--color-brightgray: rgb(233, 233, 233);
	--color-lightgray: rgb(196, 200, 193); 
	--color-gray:  rgb(142, 142, 142); 
	--color-darkgray: rgb(57, 57, 57); 
	--color-green: rgb(2, 121, 53);
	--color-brightgreen: rgb(125, 188, 78);
	--color-red: rgb(213,0,0); 

	--gradient-headline: linear-gradient(90deg, var(--color-lightgray) 0%, var(--color-white) 100%);
	
	--font-default: normal normal 100 1rem/1.25rem 'Source Sans Pro regular';

	
	
	--heights-header: 5rem; 
	--widths-contents: 1200px;
	--widths-extended: 1600px;
}

*
{
    padding: 0;
    margin: 0;
    border: 0;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    outline: none;
    hyphens: auto;
	text-decoration: none; 
	
	
}


html
{

    max-width: 100%;
    height: -webkit-fill-available;

}

body
{
	font: var(--font-default); 
    background: var(--color-background);
    min-height: 100vh;
    min-height: -webkit-fill-available;
    -ms-user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
}

noscript
{
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: var(--color-anthrazit);
    z-index: 99999;
}

noscript > span
{
    position: absolute;
    display: block;
    width: 100%;
    text-align: center;
    top: 50%;
    color: var(--color-white);
    transform: translateY(-50%);
}

header 
{
	margin-bottom: 1rem; 
}

header a 
{
	color: inherit; 
	font: inherit; 
}

header * + * 
{
	font-weight: 100; 
}

header > :first-child 
{
	margin-bottom: 0.5rem; 
}

a 
{
	color: var(--color-green); 
}

p, ul, ol 
{
	margin-bottom: 1.25rem; 
}

ul, ol
{
	list-style: none; 
}


ul li,
ol li
{
	font: var(--font-listitem); 
}

strong, b 
{
	font-weight: 900; 
}

/* BILDER */

img
{
    border: 0;
    width: 100%;
    height: auto;
    image-rendering: optimizequality;
    pointer-events: none;

}

table 
{
	width: 100%; 
	border-spacing: 0; 
}

table tr th,
table tr td 
{
	text-align: left; 
	padding: 0.25rem; 
}

table tr.trigger td 
{
	border-top: 1px solid var(--color-lightgray); 
}

table.accordeon tr.trigger 
{
	cursor: pointer; 
}
table.accordeon tr.content td 
{
	display: none;  
}

table.accordeon tr.content td 
{
	background: #FEFEFE; 
}

table.accordeon tr.trigger.active + tr.content td
{
	xdisplay: table-cell; 
	padding: 1rem; 
}

input[type="text"], 
input[type="number"], 
input[type="password"], 
input[type="email"], 
input[type="date"], 
input[type="search"],
input[type="tel"], 
input[type="file"], 
input[type="url"],
select, 
textarea
{
	background: var(--color-brightgray);
	border: 1px solid var(--color-lightgray); 
	height: 3rem;
	padding: 0 0.25rem; 
	font: var(--font-default); 

	text-align: left !important; 
	width: 100%; 
}

input[type="file"]
{
	padding-top: 0.7rem !important; 
}

input.valid, 
select.valid, 
textarea.valid
{
	background: url(../Images/check-ok.svg) no-repeat scroll 0.5rem 0.8rem var(--color-brightgray);
	background-size: 1.25rem; 
	padding: 0 0.25rem 0 2.25rem; 	
}

textarea
{
	padding: 0.5rem; 
	height: auto; 
	min-height: 10rem; 	
}

input.invalid, 
select.invalid, 
textarea.invalid
{
	background: url(../Images/check-fail.svg) no-repeat scroll 0.5rem 0.8rem #fed0d0;
	background-size: 1.25rem; 
	padding: 0 0.25rem 0 2.25rem; 
}

textarea.valid,
textarea.invalid
{
	padding: 0.5rem 0.25rem 0.5rem 2.25rem; 	
}

input[type="submit"], 
.btn 
{
	font: var(--font-btn); 
	color: var(--color-white);
	padding: 0.75rem 1rem 0.75rem 1rem; 
	text-transform: uppercase; 
	vertical-align: bottom;
	background: var(--color-brightgreen); 
	display: inline-block;
	cursor: pointer; 
	vertical-align: baseline;
}

input[type="submit"]:hover,
input[type="submit"]:active,
.btn:hover,
.btn:active 
{
	background: var(--color-green); 
}

fieldset 
{
	border: 1px solid var(--color-brightgray); 
	padding: 1rem; 
	margin: 1rem 0;
}

fieldset legend 
{
	padding: 0.5rem; 
	border:0;
	background: var(--color-brightgreen);
	color: var(--color-white); 
}

fieldset .fields .field > label 
{
	display: block; 
	margin-bottom: 0.25rem; 
}

fieldset .fields .field
{
	margin: 0; 
	padding: 1rem 0 1rem 0; 

}
.anfrage-formular fieldset .fields .field:not(.headline)::before 
{
	content: ""; 
	display: block; 
	height: 0; 
	margin-bottom: 1rem; 
	border-bottom: 1px solid #DDD; 
}

XXXfieldset .fields .field[data-dependencies]
{
	padding-left: 1rem; 
	border-left: 1px solid #DDD; 

}

fieldset .fields .field:first-child::before,
fieldset .fields .field[data-dependencies]::before 
{
	display: none; 
}



fieldset .fields .field.headline:not(:first-child)  
{
	margin-top: 3rem; 
}

fieldset .fields .field.check_with_value input[type="checkbox"] ~ div.specification
{
	display: none; 
}
fieldset .fields .field.check_with_value input[type="checkbox"]:checked ~ div.specification
{
	display: block;
	padding: 0.5rem; 
	margin: 0.25rem; 
	border-left: 1px solid var(--color-lightgray);
}

fieldset .fields .field.check_with_value input[type="checkbox"]:checked ~ div.specification input
{
	display: inline-block; 
	width: 12rem; 
}


fieldset .fields .field.file .dropzone 
{
	display: block; 
	padding: 6rem 1rem 3rem 1rem; 
	cursor: pointer; 
	border: 1px solid var(--color-lightgray);
	border-top: 0;
	background: url(../Images/upload.svg) no-repeat scroll center 2rem var(--color-brightgray); 
	background-size: 3rem;
	text-align: center; 
	color: var(--color-lightgray);
	position: relative; 
} 

fieldset .fields .field.file .dropzone.loading
{
	background: url(../Images/loading.gif) no-repeat scroll center center var(--color-brightgray); 
	cursor: wait; 
}


fieldset .fields .field.file .dropzone.finished
{
	padding: 1rem; 
	background: var(--color-brightgray); 
	text-align: left; 
	cursor: default; 
	display: none; 	
}


fieldset .fields .field.file .dropzone.dragover
{
	background: var(--color-lightgray);
}

fieldset .fields .field.file .dropzone .btn 
{
	position: absolute; 
	bottom: 1rem; 
	right: 1rem; 
	background: var(--color-brightgreen); 
}

.field.file .uploads a 
{
	position: relative; 
	display: inline-block; 
	margin: 0.5rem 0.25rem 0 0; 	
}

.field.file .uploads a::before 
{
	content: "\2612"; 
	display: block; 
	position: absolute; 
	font-size: 1.5rem; 
	bottom: 0.25rem; 
	color: var(--color-red); 
	right: 0.25rem; 
	text-align: center; 
	line-height: 1.6rem; 
	background: var(--color-white-transparent); 
	width: 1.6rem; 
	height: 1.6rem; 
}

.field.file .uploads a.loading 
{
	opacity: 0.4; 
	
}

.field.file .uploads a.loading::before 
{
	display: none; 
}

.field.file .uploads a img.thumbnail 
{
	height: 6rem; 
	display: block; 
	border: 1px solid #DDD; 

	width: auto !important; 
}

fieldset table th,
fieldset table td
{
	text-align: left; 
	width: 50%; 
}

fieldset table
{
	width: 100%; 
}

fieldset table tr td 
{
	padding: 0.25rem; 
	border-top: 1px solid var(--color-lightgray);
}


.alert  
{
	background: var(--color-brightgreen); 
	padding: 1rem; 
	border-radius: 0.5rem; 
	margin: 0 0 2rem 0; 
	color: var(--color-white); 
}
.alert strong 
{
	display: block; 
	font-size: 1.25rem; 
}

.alert.hint 
{
	background: var(--color-gray); 
	color: var(--color-white); 
}

.alert.type1,
.alert.type2
{
	background: var(--color-red); 
}


#mainNavigation .opener {
	position: absolute;
	width: 2rem;
	height: 2rem;
	display: block;
	z-index: 10;
	cursor: pointer;
	top: 50%;
	left: 2rem;
	transform: translateY(-50%);
	
}


#mainNavigation .opener .row {
	width: 100%;
	display: block;
	height: 4px;
	background: var(--color-brightgreen);
	margin-bottom: 20%;
	border-radius: 10%;
	overflow: hidden;
	transition: all 0.5s;
}

#mainNavigation .opener.opened .row {
    display: none;
}

#mainNavigation .opener.opened .row:first-child {
    display: block;
    top: 33%;
    left: 10%;
    margin: 0;
    position: absolute;
    transform: rotate(45deg);
}

#mainNavigation .opener.opened .row:last-child {
    display: block;
    top: 33%;
    left: 10%;
    margin: 0;
    position: absolute;
    transform: rotate(-45deg);
}


#mainNavigation > ul {
	opacity: 0;
	position: absolute;
	right: 0;
	transform: translateY(-200%);
	transition: opacity 0.5s, transform 0.5s, display 0s;
	list-style: none;
	top: 0;
	z-index: 5; 
	width: 100%; 
	background: transparent; 
	padding: calc(var(--heights-header) + 1rem) 1rem 1rem 1rem; 
	height: 100vh; 
}

#mainNavigation ul li
{
	padding-bottom: 0.5rem; 
	padding-left: 1rem; 
}

#mainNavigation ul li a 
{
	color: var(--color-brightgreen); 
	text-transform: uppercase; 
}


#mainNavigation ul li.current-page > a
{
	color: var(--color-gray) !important; 
}

#mainNavigation ul li > a:hover,
#mainNavigation ul li.collapsed > a
{
	color: var(--color-darkgray) !important;
}


#mainNavigation > ul > li::after 
{
	display: block; 
	content: ""; 
	position: absolute; 
	width: 100vw; 
	height: 100vh; 
	z-index: -1;
	left: 50%;
	transform: translateX(-50%); 
	top: 0; 
}

#mainNavigation > ul,
#mainNavigation > ul > li::after 
{
	background: var(--color-white); 
}

#mainNavigation ul > li > ul 
{
	display: none; 
	margin-left: 1rem; 
}

#mainNavigation > ul > li.parent > a::after 
{
	content: "\00BB"; 
	display: inline-block; 
	margin-left: 0.5rem; 
	transform-origin: 50% 50%; 
	transition: transform 0.2s; 
}


#mainNavigation > ul > li.parent.collapsed > a::after
{
	transform: rotate(-90deg); 

}

#mainNavigation  ul > li.parent > ul
{
	display: none; 
}

#mainNavigation  ul > li.current-page.collapsed  > ul,
#mainNavigation  ul > li.parent.collapsed > ul,
#mainNavigation  ul > li.current-page::after,
#mainNavigation  ul > li.parent.collapsed::after 
{
	display: block; 
}

#mainNavigation ul.level_3
{
	column-count: 2; 
	column-gap: 2rem; 
}



#mainNavigation > ul > li.current-page::after
{
	z-index: -2;
}


#mainNavigation > .opener.opened + ul 
{
	transform: translateY(0); 
	opacity: 1;
}

#wrapper 
{
	display: flex;
	min-height: 100vh;
	flex-direction: column;
	position: relative;
	max-width: 100vw;
}



#header .indented, 
#footer .indented, 
#main 
{
	width: 100%; 
	max-width: var(--widths-contents); 
	margin-left: auto; 
	margin-right: auto; 
	display: block; 
}



#header 
{
	position: sticky;
	overflow-x: visible;
	top: 0;
	width: 100%;
	left: 0;
	height: 5rem;
	z-index: 1;
	margin: 0;
	background: var(--color-white);
	border-bottom: 1px solid var(--color-brightgray); 
}

#header .indented,
#footer .indented
{
	position: relative; 
	height: 100%; 
}

#header #logo 
{
	position: absolute; 
	max-height: 90%;
	margin: 0; 
	top: 50%;
	transform: translateY(-50%); 
	z-index: 3; 
	width: auto; 
	display: block; 
	right: 1rem; 
}

#header #logo img 
{
	height: 4rem;
	width: auto;
}

#header #logout 
{
	position: absolute; 
	bottom: -1.5rem;
	right: 0.5rem; 
}

#header #logout form input.btn 
{
	width: 1rem; 
	height: 1rem; 
	overflow: hidden; 
	padding: 0; 
	line-height: 1rem; 
	text-indent: 50000px; 
	white-space: nowrap; 
	background: url(../Images/logout.svg) no-repeat scroll center center transparent; 
	background-size:0.75rem; 
}


#main 
{
	flex: 1; 
	padding: 4rem 1rem;
	overflow: hidden; 
}



#main .frame
{
	max-width: 100%; 
	margin-bottom: 2rem; 
}

#main .frame.frame-half
{
	width: 100%; 
	max-width: calc(var(--widths-contents) / 2); 
	margin-left: auto; 
	margin-right: auto; 
}

#main .frame.frame-width-extended 
{
	position: relative;
	left: 50%; 
	transform: translateX(-50%); 
	width: var(--widths-extended);
	max-width: 100vw;
	margin-left: auto;
	margin-right: auto;
	display: block;
}

#main .frame.align-center *
{
	text-align: center; 
}

#footer 
{
	flex: 2; 
	background: var(--color-brightgreen); 
	padding: 2rem 1rem; 
}

#footer .indented
{
	padding: 0 1rem; 
}

#footer .indented *
{
	color: var(--color-white); 
}



#cookie-consent-opener 
{
	background: var(--color-gray);
	padding: 0.5rem;
	position: fixed;
	bottom: 0;
	right: 0;
	color: var(--color-white);
	cursor: pointer; 
}


@media screen and (min-width: 800px)
{
	
	#header 
	{
		height: 8rem; 
	}


	#header #logout 
	{
		bottom: 0.5rem;
	}
	
	#main.flexbox 
	{
		display: flex; 
		flex-flow: row wrap; 
		
	}

	#main.flexbox .frame.frame-half
	{
		width: calc(50% - 4rem); 
	}
	
	#main.flexbox .frame.frame-default 
	{
		display: block; 
		width: 100% !important; 
	}
	
}