/*
Theme Name: Fieldsets
Version: 2.3 2020
*/


/* fonts */

@font-face {
	font-family: 'Heebo';
	src: url('assets/fonts/Heebo/Heebo-Light.ttf') format('truetype');
	font-weight: 300;
	font-style: normal;
}
@font-face {
	font-family: 'Heebo';
	src: url('assets/fonts/Heebo/Heebo-Regular.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'Heebo';
	src: url('assets/fonts/Heebo/Heebo-Medium.ttf') format('truetype');
	font-weight: 500;
	font-style: normal;
}	
@font-face {
	font-family: 'Heebo';
	src: url('assets/fonts/Heebo/Heebo-Bold.ttf') format('truetype');
	font-weight: bold;
	font-style: normal;
}



.bgcolor-magenta {
	background-color: #E71F69;
}
.bgcolor-rot {
	background-color: #DD2515;
}
.bgcolor-orange {
	background-color: #F18700;
}
.bgcolor-hellgruen {
	background-color: #AFCA0B;
}
.bgcolor-dunkelgruen {
	background-color: #008D3F;
}
.bgcolor-hellblau {
	background-color: #00B6ED;
}
.bgcolor-violett {
	background-color: #662777;
}



/* basics / resets */

html {
	position: relative;
	margin: 0;
	padding: 0;
	height: 100%;
	font-size: 1.57vw;
}

@media (min-width: 1400px) {
	html { font-size: 22px; }
}

@media (max-width: 999px) {
	html { font-size: 18px; }
}
@media (max-width: 511px) {
	html { font-size: 4.25vw; }
}


body {
	margin: 0;
	padding: 0;
	min-height: 100%;
	font-family: 'Heebo', sans-serif;
	font-weight: 300;
	font-size: 1em;
	background-color: white;
	color: #1E4259;
	-webkit-text-size-adjust: none;
	text-size-adjust: none;
}

* {
	-webkit-tap-highlight-color: transparent;
}


form {
	margin: 0;
	padding: 0;
}

table, td, input, textarea, select {
	font-family: inherit;
	font-size: 1em;
}

img, iframe {
	border: 0;
}

img {
	display: block;
	max-width: 100%;
	height: auto;
}

a {
	color: inherit;
	text-decoration: none;
}

.content-text a:not(.button-link) {
	color: #AFCA0B;
	font-weight: bold;
}
.content-text a:not(.button-link):hover {
	color: #008D3F;
}


/* page */

#page {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-align-items: stretch;
    align-items: stretch;
	
	min-height: 100vh;
}

main {
	-webkit-flex: 1 0 auto;
    -ms-flex: 1 0 auto;
    flex: 1 0 auto;
	
	padding-top: 3em;
	
	word-break: break-word;
}


/* header */

header {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	padding: 1em 2em 1.5em 2em;
	box-sizing: border-box;
	z-index: 1000;
	
	background: url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJIZWFkIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIKCSB3aWR0aD0iMTQwMHB4IiBoZWlnaHQ9IjE5OHB4IiB2aWV3Qm94PSIwIDAgMTQwMCAxOTgiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDE0MDAgMTk4OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+Cgkuc3Qwe2ZpbGw6I0ZGRkZGRjt9Cjwvc3R5bGU+CjxnIGlkPSJXYXZlIj4KCTxwYXRoIGlkPSJQZmFkXzQxMDciIGNsYXNzPSJzdDAiIGQ9Ik0xNDAwLDBIMHYxODYuNWM3My4yLDcuNiwxNTkuNSwxMS41LDI1Ni41LDExLjVjMTM2LjksMCwyOTEuNS03LjgsNDU5LjUtMjMuMwoJCWMxNDYuMi0xMy40LDI4OS42LTIwLjMsNDI2LjMtMjAuM2MxMDYuNiwwLDE5My41LDQuMiwyNTcuNiw5TDE0MDAsMHoiLz4KPC9nPgo8L3N2Zz4) bottom center no-repeat;
	background-size: cover;
	pointer-events: none;
}
header a {
	pointer-events: all;
}

footer > .wrap,
header > .wrap {
	margin: 0 auto;
	position: relative;
	max-width: 54.545em;

	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: row;
	flex-direction: row;
	-webkit-flex-wrap: nowrap;
	flex-wrap: nowrap;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	-webkit-align-items: flex-start;
	align-items: flex-start;
}


#logo {
	display: block;
	width: 13.82em;
	max-width: 48%;
	height: auto;
}


.verlauf-gruen {
	background: linear-gradient(to bottom, rgba(175,202,11,0.5) 0%,rgba(0,141,63,0) 100%);
}
.verlauf-orange {
	background: linear-gradient(to bottom, rgba(255,213,0,0.55) 0%,rgba(242,143,0,0.25) 60%,rgba(241,135,0,0) 100%);
}
.verlauf-violett {
	background: linear-gradient(to bottom, rgba(102,39,119,0.35) 0%,rgba(231,31,105,0) 100%);
}

.welle-unten.verlauf-gruen {
	background: linear-gradient(to bottom, rgba(0,141,63,0) 0%,rgba(175,202,11,0.5) 100%);
}
.welle-unten.verlauf-orange {
	background: linear-gradient(to bottom, rgba(241,135,0,0) 0%,rgba(242,143,0,0.25) 40%,rgba(255,213,0,0.55) 100%);
}
.welle-unten.verlauf-violett {
	background: linear-gradient(to bottom, rgba(231,31,105,0) 0%,rgba(102,39,119,0.35) 100%);
}

.slider-type-hero-slider::before,
.slider-type-hero-slider::after,
.welle-unten::after {
	content: "";
	display: block;
	height: 3.6vw;
	background: url(assets/images/welle-unten.svg) top center no-repeat;
	background-size: cover;
	position: relative;
	left: 0;
	top: 1px;
	pointer-events: none;
}

.slider-type-hero-slider::before {
	background-image: url(assets/images/gruenes-band.svg);
	background-size: 111vw auto;
	background-position: right top;
	position: absolute;
	top: auto;
	bottom: -1px;
	width: 100%;
	height: 6.75vw;
	z-index: 510;
	pointer-events: none;
}
.slider-type-hero-slider::after {
	position: absolute;
	top: auto;
	bottom: -1px;
	width: 100%;
	z-index: 500;
	transform: scaleX(-1);
}


.welle::before {
	content: "";
	display: block;
	height: 3.6vw;
	background: url(assets/images/welle.svg) bottom center no-repeat;
	background-size: cover;
	position: relative;
	left: 0;
	top: -1px;
}


.content-slider > .content-text {
	position: absolute;
	z-index: 600;
	left: 50%;
	width: calc(100% - 4em);
	max-width: 54.545em;
	transform: translate(-50%, -50%);
	bottom: 5%;
	color: white;
	pointer-events: none;
	user-select: none;
}

@media (min-width: 1500px) {
	.content-slider > .content-text {
		bottom: 2.6vw;
	}
}

.content-slider > .content-image {
	position: absolute;
	z-index: 600;
	left: 50%;
	width: calc(100% - 4em);
	max-width: 54.545em;
	transform: translateX(-55%);
	bottom: 0;
	height: 82%;
	z-index: 505;
	color: white;
	pointer-events: none;
	user-select: none;
}
.content-slider > .content-image > .image-wrap {
	width: 100%;
	height: 100%;
}
.content-slider > .content-image img {
	width: 100%;
	object-fit: contain;
	object-position: bottom left;
}

.ratio {
	pointer-events: none;
}


.news h2 {
	font-weight: 300;
}
.news {
	border: 2px #1E4259 solid;
	border-radius: 4px;
	position: relative;
	overflow: hidden;
	padding: 0.4em 0.4em 0.4em 5em;
		
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: row;
	flex-direction: row;
	-webkit-flex-wrap: nowrap;
	flex-wrap: nowrap;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	-webkit-align-items: flex-start;
	align-items: flex-start;
	
	transition: border-color 0.2s ease;
}
.news-open {
	border-color: #AFCA0B;
}
.news + .news {
	margin-top: 0.75em;
}

.news-date {
	position: absolute;
	top: -2px;
	left: -2px;
	border-radius: 2px 2px 4px 2px;
	background-color: #1E4259;
	color: #AFCA0B;
	text-align: center;
	text-transform: uppercase;
	padding: 1.1em 0.5em 0.95em 0.5em;
	font-size: 0.82em;
	width: 3.5rem;
	box-sizing: border-box;
	line-height: 120%;
	transition: color 0.2s ease, background-color 0.2s ease;
}
.news-open .news-date {
	color: #1E4259;
	background-color: #AFCA0B;
}

.news-date strong {
	display: block;
}

.news .content-image .image-wrap img {
	border-radius: 4px;
}


.news > .content-text {
	max-width: 100%;
	width: 100%;
	box-sizing: border-box;
	padding-top: 1em;
	padding-bottom: 0.25em;
}
.news.has-image > .content-text {
	width: calc(100% - 18em);
}
.news .content-image {
	width: 16.5em;
}
.news:not(.has-image) > .content-text {
	padding-right: 4.6em;
}

.news-toggle {
	position: absolute;
	top: 3.5rem;
	left: -2px;
	width: 3.5rem;
	height: 3.6rem;
	background: url(assets/images/arrow-down.svg) center center no-repeat;
	background-size: 1.25em auto;
	cursor: pointer;
	transition: transform 0.2s ease;
}

.news-open .news-toggle {
	transform: rotate(180deg);
}


.news > .content-text > h2:first-child + * {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	transition: -webkit-line-clamp 0.2s ease;
	padding: 0 !important;
	margin-bottom: 0.3em;
}

.news-open > .content-text > h2:first-child + * {
	-webkit-line-clamp: 30;
}

.news > .content-text > h2:first-child + * ~ * {
	transition: padding 0.2s ease, max-height 0.2s ease;
	max-height: 50em;
	overflow: hidden;
}
.news:not(.news-open) > .content-text > h2:first-child + * ~ * {
	max-height: 0em;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}


.news > .content-image > .image-wrap > .ratio {
	transition: padding 0.2s ease;
}

.news:not(.news-open) > .content-image > .image-wrap > .ratio {
	padding-top: 38% !important;
}


@media (max-width: 999px) {
	.news {
		-webkit-flex-direction: column-reverse;
		flex-direction: column-reverse;
		-webkit-flex-wrap: wrap;
		flex-wrap: wrap;
		padding-left: 0.4em;
	}
	.news > .content-text {
		padding-top: 1.3em;
		padding-left: 0.5em;
		padding-right: 0.5em !important;
	}
	
	
	.news:not(.has-image) > .content-text {
		padding-top: 4.5em;
	}
	
	.news.has-image > .content-text,
	.news .content-image {
		width: 100%;
		box-sizing: border-box;
	}
	
	.has-image .news-toggle {
		filter: contrast(0.5) brightness(8);
	}
	
	.news-toggle {
		left: auto;
		right: 4px;
		top: 0;
	}
	
	
}



.teaser {
	background: white;
	box-sizing: border-box;
	border-radius: 4px;
	overflow: hidden;
}
.teaser > .content-text {
	padding: 1.5em;
}

.teaser h3 {
	padding-bottom: 0.25rem;
}


.attribute {
	margin-top: 0.5em !important;
	margin-bottom: 0.4em !important;
}

.a-mischung,
.a-standort,
.a-wasserbedarf {
	width: 50%;
	background: none left top no-repeat;
	box-sizing: border-box;
	padding-left: 1.25rem;
	padding-right: 0.4rem;
	display: inline-block;
	vertical-align: top;
}

.a-mischung {
	background-position: -0.175em 0;
}

.attribute-full * {
	width: auto;
	display: block;
	margin: 0.8em 0;
}


.filter-title {
	display: block;
	margin-bottom: 0.2em;
	padding-left: 1.25rem;
	white-space: nowrap;
	background: none 0 0.2rem no-repeat;
}
.a-mischung,
.i-mischung {
	background-image: url(assets/images/i-art.svg);
	background-size: 1.2rem auto;
}
.a-standort,
.i-standort {
	background-image: url(assets/images/i-standort.svg);
	background-size: 0.75rem auto;
}
.a-wasserbedarf,
.i-wasserbedarf {
	background-image: url(assets/images/i-wasser.svg);
	background-size: 0.8rem auto;
}

.i-mischung {
	background-position: -0.1em 0.2rem;
}


#form-142 .input-select-wrapper {
	top: -0.95em;
}
#form-142 select {
	background: transparent;
}
#form-142 .input-select-button {
	filter: brightness(0) saturate(100%) invert(45%) sepia(94%) saturate(1751%) hue-rotate(12deg) brightness(107%) contrast(101%);
}


@media (min-width: 1000px) {
	.desktop-padding-right {
		padding-right: 1.5em !important;
	}
	
	.image-wrap.content-breite-75,
	.content-breite-75 > .content {
		max-width: 75%;
	}
	
	.content-overlay-groesser + .content-text,
	.content-overlay-groesser .content-image .content-text {
		font-size: 1.7em;
	}
	
}

.column > .slider-type-default-slider {
	border-radius: 4px;
	overflow: hidden;
}

.bilder-neben-text {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: row;
	flex-direction: row;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	-webkit-align-items: flex-start;
	align-items: flex-start;
	-webkit-align-content: flex-start;
    align-content: flex-start;
}


.bilder-neben-text > .content-image {
	width: 30%;
	margin-bottom: 2.5em;
}
.bilder-neben-text > .content-text {
	width: calc(70% - 1.5em);
	margin-bottom: 2.5em;
}
.bilder-neben-text > .content-text > :first-child {
	padding-top: 0;
	margin-top: -0.25em;
}

@media (max-width: 999px) {
	.bilder-neben-text > .content-image {
		width: 35%;
	}
	.bilder-neben-text > .content-text {
		width: calc(65% - 1.5em);
	}
}

/* footer */

footer {
	position: relative;
	padding: 2.7em 2em;
	box-sizing: border-box;
}

footer > .wrap {
	-webkit-align-items: flex-start;
	align-items: flex-end;
	min-height: 7.25em;
}

footer nav ul,
footer nav li {
	margin: 0;
	padding: 0;
	list-style-type: none;
	display: inline;
}
footer nav li + li {
	padding-left: 1em;
}

footer nav {
	margin-bottom: -0.3em;
	text-align: right;
}

footer nav a:hover {
	color: #AFCA0B;
}

#footer-logo {
	position: absolute;
	left: 0;
	top: 0;
	width: 12em;
	max-width: 45vw;
}


#footer-siegel {
	position: absolute;
	right: 0;
	top: 0;
	white-space: nowrap;
	transform-origin: top right;
}
#footer-siegel img {
	display: inline;
}


#footer-nav-col,
#footer-col1,
#footer-col2 {
	width: 33.333%;
}


#footer-col1 a,
#footer-col2 a {
	font-size: 0.82rem;
}


.mitarbeiter section:first-child {
	padding-top: 3em;
}
.mitarbeiter section:last-child {
	padding-bottom: 2.5em;
}

.mitarbeiter section + section {
	margin-top: 2.5em;
}

.button-wrap-after-headline {
	padding-top: 0 !important;
}
@media (min-width: 1000px) {
	.button-wrap-after-headline {
		text-align: right;
		margin-top: -2.6em !important;
	}
}


.content-slider img {
	border-radius: 4px;
}
.content-teaserlist .content-slider img {
	border-radius: 4px 4px 0 0;
}


/* breakpoints */

.mobile-only {
	display: none;
}

@media (max-width: 1399px) {
	#footer-siegel {
		transform: scale(0.8);
	}
}
@media (max-width: 1199px) {
	#footer-siegel {
		transform: scale(0.7);
	}
}

@media (max-width: 999px) {
	.desktop-only {
		display: none;
	}
	.mobile-only {
		display: block;
	}
	
	.slider-type-hero-slider > .content-text {
		display: none;
	}
	.slider-type-hero-slider > .content-image {
		height: 70%;
		width: calc(100% - 7em);
	}
	
	header,
	footer {
		padding-left: 1em;
		padding-right: 1em;
	}
	
	#logo {
		margin-bottom: -0.3em;
	}
	
	.slider-type-hero-slider::after {
		height: 7vw;
		bottom: -5px;
	}
	
	.slider-type-hero-slider .swiper-pagination-bullets {
		display: none;
	}
	
	footer > .wrap {
		max-width: calc(100% - 0.5em);
	}
	
	#footer-nav-col,
	#footer-col1,
	#footer-col2 {
		width: 100%;
	}
		
	footer > .wrap {
		-webkit-flex-wrap: wrap;
		flex-wrap: wrap;	
	}
	
	#footer-logo {
		position: relative;
		margin-bottom: 1em;
	}
	
	#footer-col2 {
		order: 1;
	}
	#footer-col1 {
		order: 2;
		padding: 1.5em 0 2em 0;
	}
	#footer-nav-col {
		order: 3;
	}
	
	.filter-title.i-standort,
	.filter-title.i-wasserbedarf {
		margin-top: -1em;
	}
	
	

	.mitarbeiter section:first-child {
		padding-top: 1em;
	}
	.mitarbeiter section:last-child {
		padding-bottom: 0.5em;
	}
	.mitarbeiter section + section {
		margin-top: 0;
	}
	.mitarbeiter .column {
		margin-top: 0 !important;
		padding-top: 1.5em;
		padding-bottom: 1.5em;
	}
	
	
	#form-142 .columns:not(.form-error) {
		display: block;
	}
	#form-142 .column {
		width: 100%;
	}
	
	
	.teaser-horizontal > .content-text {
		background-position: center center;
		background-size: cover;
	}
	
}


@media (max-width: 511px) {
	.slider-type-hero-slider > .content-image {
		width: calc(100% - 4em);
	}
	
	.content-image .content {
		font-size: 0.82em;
	}
	
	#footer-siegel {
		transform: scale(0.6);
	}
	
}

#usercentrics-button {
	transition: opacity 0.25s ease;
}
.overlay-open #usercentrics-button {
	opacity: 0;
	pointer-events: none;
}