@charset "utf-8";

/* =========================================
    			CSS Reset
======================================== */
*{ margin:0; padding:0; }
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, input, textarea,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, main, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin:0;
	padding:0;
	border:0;
	font-size:100%;
	font:inherit;
	vertical-align:baseline;
	float:none;
}
article, aside, details, figcaption, figure, 
footer, header, main, hgroup, menu, nav, section {
	display:block;
}
blockquote, q {
	quotes:none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content:none;
}
table {
	border-collapse:collapse;
	border-spacing:0;
}
/*--------------------------- Ende CSS Reset ---------------------------*/

@font-face { font-family: 'Inter';
             src: url('../fonts/Inter-VariableFont_opsz,wght.woff2') format('truetype'); }
@font-face { font-family: 'Crimson Pro';
             src: url('../fonts/CrimsonPro-VariableFont_wght.woff2') format('truetype'); }

/*======================================== 
				Farben 
========================================*/
:root {	
	--color-black: #000000;
	--color-black-op01: rgba(0,0,0,0.1);
	--color-black-op03: rgba(0,0,0,0.3);
	--color-black-op05: rgba(0,0,0,0.5);
	--color-black-op07: rgba(0,0,0,0.7);
	
	--color-gruen: #004500;
	--color-gruen-op09: rgba(0,69,0,0.9);
	--color-gruen-op02: rgba(0,69,0,0.2);
	--color-elfenbein: #e8e7df;
	--color-orange: #d07040;
	--color-rosa: #dec1d5;
	
	--color-gray-light:#f6f5f1;
	--color-gray:#575757;
	--color-gray-op01:rgba(87,87,87,0.1);	
	
		
	--color-white: #ffffff;
	--color-white-op03: rgba(255,255,255,0.3);
	--color-white-op05: rgba(255,255,255,0.5);
	--color-white-op07: rgba(255,255,255,0.7);
	--color-white-op09: rgba(255,255,255,0.9);
}
/*--------------------------- Ende Farben ---------------------------*/


/* =========================================
    			Grid
======================================== */
.wrapper {
	width:100%;
	height:100%;
}
.row {
	display: block;
	width:100%;
	max-width:75rem;
	margin:auto;	
	float:none;	
	overflow-y: hidden;
}
.row-nav {
	display: block;
	width:100%;
	max-width:75rem;
	margin: 0 auto;	
	float:none;	
	overflow-y: visible;
}
.row-full-screen {
	display: block;
	width:100%;
	max-width: 120rem;
	margin:auto;	
	float:none;	
	overflow-y: hidden;
}
.col {
	float:left;
	padding:0;
}
.col-nav {
	-webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: auto;
    max-width: none;
}
.row .col:last-of-type {margin-right:0.04%}
.col_1 {width:8.33%;}
.col_2 {width:16.66%;}
.col_3 {width:24.99%;}
.col_4 {width:33.32%;}
.col_5 {width:41.65%;}
.col_6 {width:49.98%;}
.col_7 {
	flex: 0 0 58.31%;
	width:58.31%;
}
.col_8 {width:66.64%;}
.col_9 {width:74.97%;}
.col_10 {width:83.3%;}
.col_11 {width:91.63%;}
.col_12 {width:99.96%;}
img, video, object, embed {
	height:auto;
}
@media screen and (max-width:37.5rem) /*600px*/{	
	.row-overflow {
		overflow-y: visible;
	}
	.col {
		float:none;		
	}	
	.row .col:last-of-type {margin-right:0}
	.col_1, .col_2, .col_3, .col_4, .col_5, .col_6, .col_7, .col_8, .col_9, .col_10, .col_11, .col_12 {
		width:100%;
		margin:0;
	}
}
/*--------------------------- Ende Grid ---------------------------*/


/* =========================================
    			Style
======================================== */
html {
	scroll-behavior: smooth;
}
body {
	width: 100%;
	min-width: 20rem;
	color: var(--color-gruen);
	background-color: var(--color-gray-light);
	font-family: 'Crimson Pro', sans-serif;	
	font-size: 1.3rem;
	line-height: 1.4rem;
	text-align: left;	
}
img {
	display: block;
	width: 100%;
	margin: auto;
}
img.size50prozent {
	width: 30%;
	margin: auto;
}
.header-img {
	height: 60vh;
	width: auto;
	overflow: hidden;
}
.header-img img {
	width: 100%;
    height: 100%;
	object-fit: cover;
	object-position: center;
}
hr {
	margin: 2rem 0;
}
/*--- section ---*/
section {
	/*padding: 2rem 0;*/
}
section.top {
	padding: 5rem 0 2rem 0;
}
section.bottom {
	padding-bottom: 5rem;
}
/*--- helpers ---*/
.padding-div {
	padding: 1rem 1rem 1rem 4rem;	
}
.padding-div-gallery {
	padding: 0 1rem 0 4rem;	
}
.padding-div-lr {
	padding: 0 1rem;	
}
.padding-top-0 {
	padding-top: 0;
}
.padding-bottom-0 {
	padding-bottom: 0;
}
.box-shadow {
	box-shadow: var(--color-black-op03) 0px 2px 8px 0px;
	border-radius: 3px;
}
.position-minus {
	position: relative;
	top:-10rem;
}
.border-radius {
	border-radius: 25px;
}
.scale-1_2 {
	transform: scale(1.2);
	-webkit-transform: scale(1.2);
	-moz-transform: scale(1.2);
}
.alert-div {
	position: absolute;
	width: 100%;
	height: 20%;
	z-index: 10000;
	background-color: var(--color-black-op07);
	display: flex;
	align-items: center;
	justify-content: center;
}
.alert-div div {
	width: 30%;
	background-color: var(--color-gray-light);
	padding: 2rem;
	border-radius: 0.5rem;
}
/*--- background ---*/
.bg_elfenbein {
	/*background-color: var(--color-elfenbein);*/
	
}
section.bg_elfenbein {
	padding: 0;
}
/*--- gallery ---*/
.gallery {
	margin-bottom: 2rem;
}
.gallery .row {
	display: flex;
	align-items: center;
}
.gallery .row div {
	/*flex: 1;*/
	display: flex;
	align-items: center;
}
.gallery .row div img {
	padding: 1rem;
}
.gallery-width-70Pz {
	flex-basis: 60%;
}
.gallery-width-30Pz {
	flex-basis: 40%;
}
@media screen and (max-width:48rem) {
	.gallery .row div img {
		padding: 1rem 0;
	}
	
	.gallery .padding-div-lr {
		padding: 0 0.2rem;	
	}
}
@media screen and (max-width:37.5rem) /*600px*/{
	section {
		padding: 2rem 0;
	}
	section.bottom {
		padding-bottom: 1rem;
	}
	.padding-div {
		padding: 1rem;
	}
	.padding-div-gallery {
		padding: 0 1rem;
	}
	.scale-1_2 {
		transform: scale(1);
		-webkit-transform: scale(1);
		-moz-transform: scale(1);
	}
	.gallery-width-70Pz, .gallery-width-30Pz {
		flex-basis: 100%;
	}
	iframe {
		width: 360px;
	}
}
/*--------------------------- Ende Style ---------------------------*/



/* =========================================
    		Textformatierung
======================================== */
h1, h2, .h2, h3, h4, h5, figcaption, .mehrLesen {	
	font-family: 'Inter', sans-serif;	
}
h1 {
	font-size: 4rem;
	line-height: 4.5rem;
	text-align: left;
	text-transform: uppercase;
	letter-spacing: 2px;
	font-weight: 600;
	margin-bottom: 1.2rem;
}
.h2-teaser {
	font-size: 3rem;
	line-height: 3rem;
	text-align: left;
	text-transform: uppercase;
	letter-spacing: 2px;
	font-weight: 600;
	margin-bottom: 1.2rem;
}
.h1-teaser {
	font-size: 1rem;
	line-height: 1.5rem;
	font-weight: 600;
	letter-spacing: 0;
	text-decoration: underline;
}
h2, .h3-teaser {
	font-size: 2rem;
	line-height: 2.5rem;
	text-align: left;
	margin-bottom: 1rem;
	font-weight: 500;
}
.h2 {
	font-size: 1rem;
	text-align: center;	
}
.h2-underline {
	margin: 1.5rem 0;
    padding: 0;
    height: 10px;
    /*background-color: var(--color-orange);*/
	background: linear-gradient(to right, var(--color-rosa), var(--color-orange));
    width: 80px;
}
h3 {
	font-size: 2rem;
	line-height: 2.5rem;
	text-align: left;
	margin-bottom: 1rem;
	font-weight: 500;
}
h4 {
	font-size: 1.8rem;
	line-height: 2.2rem;
	margin-bottom: 1rem;
}
h5 {
	font-size: 1.5rem;
	line-height: 2rem;
	margin-bottom: 1rem;
}
.langtext h5 {
	margin-bottom: 0;
}
p {
	/*-webkit-hyphens: auto; 
	hyphens: auto;*/
}
.font-size-150 {
	font-size: 120%;
	line-height: 120%;
}
.langtext .verein {
	font-size: 120%;
	line-height: 100%;
}
.langtext .verein h5 {
	margin-top: 1rem;
}
b, strong {
	font-weight: 600;
}
.font-weight-900 {
	font-weight: 900;
}
figcaption {
	font-size: 0.9rem;
	text-align: left;
	max-width: 73rem;
	margin: 0.2rem auto auto auto;
	line-height: 1rem;
}
a {
	color:var(--color-gruen);
	text-decoration: underline;
}
a:hover {
	color:var(--color-orange);
	-webkit-transition: all .5s ease;
	-moz-transition: all .5s ease;
	-ms-transition: all .5s ease;
	-o-transition: all .5s ease;
	transition: all .5s ease;
	text-decoration: none;
}
a:hover i {
	color:var(--color-gruen);
}
.uppercase {
	text-transform: uppercase;
}
.normal {
	font-size: 1rem!important;
}
.small {
	font-size: 80%;
}
.tiny {
	font-size: 5%;
}
.text-align-center {
	text-align: center;
}
.mehrLesen {
	position: absolute;
	bottom: 1rem;
	font-size: 0.9rem;
	text-transform: uppercase;
	font-weight: 600;	
}
.text .mehrLesen{
	position: relative;
	bottom: auto;
	text-decoration: none;
}
a.text{
	text-decoration: none;
}
.underline {
	text-decoration: underline;
}
.datum {
	font-family: 'Inter', sans-serif;
	font-size: 1.2rem;
	font-weight: 600;
	margin-bottom: 1.4rem;
}
/*--- Text-Color ---*/
.orange { color: var(--color-orange)!important; }
.light-gray {color: var(--color-gray-light)!important;}
/*--- Text-Specials ---*/
.text-alert {
	text-align: center;
	color: var(--color-orange);
	padding: 1.5rem;
	border: 1px solid var(--color-orange);
	margin-bottom: 1rem;
}
.alert-info {
    color: var(--color-gray);
    background-color: transparent;
    border-color: transparent;
}
/*--- Icons ---*/
i {
    width: 1.2em;
    margin-right: 0.3rem;
    padding-top: 0.1rem;
    color: var(--color-blue);
    text-align: center;
}
/*--- Lists ---*/
ul {
	list-style: none;
}
ul.links {
	display: flex;
    width: 100%;
    align-items: center;
} 
ul.links li {
	margin-right: 1rem; 
}
ul.info-links li {
	font-size: 1.2rem;
	line-height: 1.8rem; 
	margin-bottom: 0.5rem;
}
@media screen and (max-width:75rem) {
	h1, .h2-teaser {
		font-size: 3rem;
		line-height: 3.5rem;
		margin-bottom: 1rem;
	}
	.h1-teaser {
		font-size: 1rem;
	}
	h2, .h3-teaser {
		font-size: 2rem;
		line-height: 2.5rem;
		margin-bottom: 1.2rem;
	}
	.h2 {
		font-size: 1rem;
	}
	h3 {
		font-size: 1.8rem;
		line-height: 2rem;
		margin-bottom: 1rem;
	}
	h4 {
		font-size: 1.4rem;
		line-height: 1.6rem;
		margin-bottom: 0.8rem;
	}
	h5 {
		font-size: 1.3rem;
		line-height: 1.5rem;
		margin-bottom: 0.7rem;
	}
	.font-size-150 {
		font-size: 120%;
		line-height: 100%;
	}
}
@media screen and (max-width:48rem) {
	ul.links {
		display: block;
	} 
	.mehrLesen {
		position: relative;
		bottom: 0;
		margin-top: 1rem;
	}
}
@media screen and (max-width:37.5rem) {
	h1, .h2-teaser {
		font-size: 2.2rem;
		line-height: 2.2rem;
		margin-bottom: 1rem;
	}
	.h1-teaser {
		font-size: 1rem;
	}
	h2, .h3-teaser {
		font-size: 1.8rem;
		line-height: 2.2rem;
		margin-bottom: 1rem;
	}
	.h2 {
		font-size: 1rem;
	}
	h3 {
		font-size: 1.5rem;
		line-height: 1.8rem;
		margin-bottom: 1rem;
	}
	h4 {
		font-size: 1.2rem;
		line-height: 1.4rem;
		margin-bottom: 0.8rem;
	}
	h5 {
		font-size: 1.1rem;
		line-height: 1.3rem;
		margin-bottom: 0.7rem;
	}
	p {
		font-size: 1.3rem;
	}
	.font-size-150 {
		font-size: 120%;
		line-height: 100%;
	}
	.mehrLesen {
		font-size: 1rem!important;
	}
	.datum {
		margin-bottom: 0.5rem;
	}
	.copyright p {
		font-size: 0.8rem;
	}
}
/*--------------------------- Ende Textformatierung ---------------------------*/



/* =========================================
    			Header
======================================== */
header {	
	margin: auto;
	z-index: 999;
	background-color: var(--color-gray-light);
}
.section-top-header {
	width:100%;	
	max-width:75rem;
	padding: 0.4rem 0;
	margin: auto;
	height: 6rem;
	overflow: hidden;
	background-color: var(--color-gray-light);	
}
.top-header-img-1 {
	position: fixed;
	height: 5rem;
	max-width: 75rem;
	z-index: 1500;
	background-color: var(--color-gray-light);	
}
.top-logo-header {
	width: 100%;
	background-image: url("/images/logo/ZB_logo_2_1920px.png");
	background-size: 100%;
	background-repeat: no-repeat;
}
.topHeader {	
	position: fixed;
	top: 0;
	max-width:75rem;
	width: 100%;
	padding: 0.75rem;
	z-index: 1400;
	background-color: var(--color-gray-light);
	height: 6rem;
}
.div-topHeader-firefox {
	display: none;
}
@supports (-webkit-appearance:none) {
	.div-topHeader-left, .div-topHeader-right, .div-topHeader-center {
		display: none;
	} 
	.div-topHeader-firefox {
		display: block;				
	}
	.div-topHeader-firefox img {
		height: 4.5rem;
		width: auto;
		margin: auto;
	}
}
@supports (-moz-appearance:none) {
	.div-topHeader-left, .div-topHeader-right, .div-topHeader-center {
		display: none;
	} 
	.div-topHeader-firefox {
		display: block;				
	}
	.div-topHeader-firefox img {
		height: 4.5rem;
		width: auto;
		margin: auto;
	}
}
@supports (-ms-appearance:none) {
	.div-topHeader-left, .div-topHeader-right, .div-topHeader-center {
		display: none;
	} 
	.div-topHeader-firefox {
		display: block;				
	}
	.div-topHeader-firefox img {
		height: 4.5rem;
		width: auto;
		margin: auto;
	}
}
@supports (-o-appearance:none) {
	.div-topHeader-left, .div-topHeader-right, .div-topHeader-center {
		display: none;
	} 
	.div-topHeader-firefox {
		display: block;				
	}
	.div-topHeader-firefox img {
		height: 4.5rem;
		width: auto;
		margin: auto;
	}
}
.div-topHeader-left {
	float: left;
	position: relative;
	left: 0; 
	width: 5%;
	max-width: 37.5rem;	
	overflow: hidden;
	animation-name: move-bar-left;
	-webkit-animation-name: move-bar-left;
	-moz-animation-name: move-bar-left;
	animation-timeline: scroll(y);
	/*not supported */-webkit-animation-timeline: scroll(y);
	/*not supported */-moz-animation-timeline: scroll(y);
}
.div-topHeader-right {
	float: right;
	position: relative;
	right: 0;
	width: 5%;
	max-width: 37.5rem;
	overflow: hidden;
	animation-name: move-bar-right;	
	-webkit-animation-name: move-bar-right;	
	-moz-animation-name: move-bar-right;	
	animation-timeline: scroll(y);
	/*not supported */-webkit-animation-timeline: scroll(y);
	/*not supported */-moz-animation-timeline: scroll(y);
}
.div-topHeader-left img {
	float: left;
	width: auto;
	height: 5rem;
}
.div-topHeader-right img {
	float: right;
	width: auto;
	height: 5rem;
}
@keyframes move-bar-left {
	 from {
		left: 0%;
	}
	 to {
		left: 45%;
	}
}
@keyframes move-bar-right {
	 from {
		right: 0%;
	}
	 to {
		right: 45%;
	}
}
.div-topHeader-center {
	position: relative;	
	width: 0%;
	max-width: 75rem;
	height: 2.7rem;
	overflow: hidden;	
	margin: auto;
	padding: 0.5rem 0;	
	animation-name: scale-center;
	-webkit-animation-name: scale-center;
	-moz-animation-name: scale-center;
	animation-timeline: scroll(y);
	/*not supported */-webkit-animation-timeline: scroll(y);
	/*not supported */-moz-animation-timeline: scroll(y);
	border-bottom: 6px solid var(--color-gruen);
}
@keyframes scale-center {
	 from {
		width: 90%;
	}
	 to {
		width: 0%;
	}
}
/* Mobil */
.section-top-header-mobil {
	display: none;
}
@media screen and (max-width:75rem) {
	.section-top-header {
		/*display:none;*/
		height: 5rem;
	}
	.topHeader {
		height: 5rem;
		padding: 0.3rem 0.75rem 0.75rem 0.75rem;
	}
	.top-header-img-1 {
		height: 4.5rem;
	}
	.section-top-header-mobil { 
		display: block;
		width: 100%;
		height: auto;
		padding: 0.2rem 0.5rem;
	}
	.top-header-2 {
		height: 4rem;
		max-width: 100%;
		margin-left: -0.5rem
	}
	.div-topHeader-left img, .div-topHeader-right img {
		height: 3.5rem;
	}
	.div-topHeader-center {
		height: 1.9rem;
        border-bottom: 4px solid var(--color-gruen);
	}
}
@media screen and (max-width:48rem) {
	.section-top-header {
		/*display:none;*/
		height: 4rem;
	}
	.topHeader {
		height: 4rem;
		padding: 0.3rem 0.75rem 0.75rem 0.75rem;
	}
	.top-header-img-1 {
		height: 3.2rem;
	}	
}
@media screen and (max-width:37.5rem) {
	.section-top-header {
		/*display:none;*/
	}
	.topHeader {
		height: 3.5rem;
		padding: 0.6rem 0.75rem 0.95rem 0.75rem;
	}
	.top-header-img-1 {
		/*height: 2.2rem;*/
		height: 3rem;
	}
	.div-topHeader-left, .div-topHeader-right {
		width: 5%;
	}
	.section-top-header-mobil { 
		display: block;
		width: 100%;
		height: auto;
		padding: 0.2rem 0.5rem;
	}
	.top-header-2 {
		height: 3rem;
		max-width: 100%;
		margin-left: -0.5rem
	}
	.div-topHeader-left img, .div-topHeader-right img {
		height: 2.5rem;
	}
	.div-topHeader-center {
		height: 1.36rem;
        border-bottom: 3.2px solid var(--color-gruen);
	}
	@supports (-webkit-appearance:none) {
		.div-topHeader-firefox img {
			height: 2.5rem;
		}
	}
	@supports (-moz-appearance:none) {
		.div-topHeader-firefox img {
			height: 2.5rem;
		}
	}
}
@media screen and (max-width:28rem) {
	.top-logo-header {
		/*background-image: url("/kundenseiten/zeitgeschichte-braunau/images/logo/ZB_logo_1_var1.png");*/
		background-image: url("/images/logo/ZB_logo_1.png");
		background-size: 94%;
		left:3%;
	}
}
/* --- Header-Logo-Animation --- */
.div_center {
	position: absolute;
	z-index: -1;
	top: 0.5rem;
	width: 100%;
	height: 5rem;
	background-image: url("/images/logo/ZB_logo_balken-1920px.png");
	background-size: cover;
}
#hori {
	position:fixed;
	width: 30%;
	left: 0;
	top: 0.5rem;
	height: 5rem;
	overflow: hidden;
	background-color: var(--color-gray-light);				
	background-image: url("/images/logo/ZB_short_2_left.png");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: right;
}
#hori img {
	width: auto;
	height: 5rem;
	margin: 0;
}
#hori2 {
	position:fixed;
	width: 32%;
	right: 0;
	top: 0.5rem;
	height: 5rem;
	overflow: hidden;
	background-color: var(--color-gray-light);
	background-image: url("/images/logo/ZB_short_2_right.png");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: left;
}
#hori2 img {
	width: auto;
	height: 5rem;
	margin: 0;
}
@media screen and (max-width:90rem) /*  */ {
	#hori2 {
		width: 40%;
	}
}
@media screen and (max-width:75rem) /* 1200px */ {
	.div_center,				
	#hori img,
	#hori2 img {
		height: 4.5rem;
	} 
	#hori,
	#hori2 {
		height: 4.5rem;
	}	
}
@media screen and (max-width:48rem) /* 768px */ {
	.div_center,				
	#hori img,
	#hori2 img {
		height: 3.2rem;
	} 
	#hori,
	#hori2 {					
		height: 3.2rem;
	}
}
@media screen and (max-width:37.5rem) /* 600px */ {
	.div_center,				
	#hori img,
	#hori2 img {
		top: 0.2rem;
	} 
	#hori,
	#hori2 {
		top: 0.2rem;
	}
}
@media screen and (max-width:28rem) /* 448px */ {

}
/* --- Ende Header-Logo-Animation --- */
/*--------------------------- Ende Header ---------------------------*/


/* =========================================
    			Top-Cover
======================================== */
.bg_index { 
	/*background-image: url("/kundenseiten/zeitgeschichte-braunau/images/artikel/danzig_musterbild.jpg");*/
}
.top-cover {
	position: relative;	
	z-index: 1;
	width: 100%;
	max-width: 73rem;
	margin:auto;
	background-size: cover;
	background-position: center;
	text-shadow: 1px 2px 4px rgba(0, 0, 0, 0.2);
	backdrop-filter: blur(5px);
}
.top-cover:after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: -1;
	/*backdrop-filter: blur(5px);*/
	background-color: var(--color-gruen-op02);
}
.top-cover p {
	font-size: 2em;
	max-width: 80%;
	margin-left: auto;
	margin-right: auto;
	font-weight: 300;
}
.top-cover .content {
	padding: 12rem 0 9rem 0;
	height: auto;
	max-width: 75rem;
}
.top-cover .content.subpage {
	padding: 18rem 0 15rem 0;
	height: auto;
	max-width: 75rem;
}
@media screen and (max-width:48rem) {
	.top-cover-startseite {
		max-width: 92%;
	}
	.top-cover .content {
		padding: 5rem 0;
	}
	.top-cover .content.subpage {
		padding: 6rem 0;
	}
}
/*--------------------------- Ende Top-Cover ---------------------------*/


/* =========================================
    			Navigation
======================================== */
.menu-logo {
	position: absolute;
    top: 1rem;
    left: 2rem;
	height: 2rem;
	width: 2rem;
	display: none;
}
.menu-icons {
    color: var(--color-gruen);
    font-size: 2rem;
    position: absolute;
    top: 50%;
    right: 0.5rem;
    transform: translateY(-50%);
    z-index: 1500;
    display: none;
}
.navigation {
	position: fixed;
	top: 6rem;
	width: 100%;
	height: 4rem;
	z-index: 9999;
	background-color: var(--color-gray-light);
	border-top: 2px solid var(--color-gruen);
	border-bottom: 2px solid var(--color-gruen);
}
nav {
    display: flex;
    align-items: center;
    width: 100%;
    height: 4rem;
	font-family: 'Inter', sans-serif;
}
.nav-list {
    display: flex;
    width: 100%;
    align-items: center;
	z-index: 999;
}
.nav-list li {
    line-height: 2.5rem;
    position: relative;
	width: auto;
	text-align: center;
	padding: 0 2%;
}
/*.nav-list li:first-of-type {
	width: 150%;
}*/
.nav-list li a img {
	height: 2rem;
	width: 2rem;
}
/*--- underline hover ---*/
.nav-list li a::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 0.1em;
	background-color: var(--color-gruen);
	opacity: 0;
	/*transition: opacity 0.5s, transform 0.5s;*/
	transform: scale(0);
	transform-origin: center;
}
/*.nav-list li a:hover::after,
.nav-list li a:focus::after {
	opacity: 1;
	transform: scale(1);
}*/
.nav-list li a:hover {
	text-decoration: underline;
}
/*--- Ende underline hover ---*/
.nav-list li a i {
    margin-left: .5rem;
    font-size: 1rem;
}
.sub-menu li {
    line-height: 4rem;
	max-width: 280px;
}
/*.sub-menu li:first-of-type {
	width: 100%;
}*/
.nav-list a {
    display: block;
    color: var(--color-gruen);
    padding: 0 1rem;
    font-size: 1.2rem;
    transition: color .6s;
	font-weight: 600;
	text-decoration: none;
}
.nav-list a:hover{
	transition: all .3s ease;
}
.sub-menu {
    width: 280px;
    display: block;
    position: absolute;
    border-top: 3px solid var(--color-blue-medium);
    background-color: var(--color-gray-light);
    z-index: 100;
    top: 16rem;
    opacity: 0;
    visibility: hidden;
    transition: all .6s ease;
}
/*.sub-menu::before{
    content: "";
    position: absolute;
    top: -2.5rem;
    left: 3rem;
    border: 1.2rem solid transparent;
    border-bottom-color: var(--color-blue-medium);
    transition: all .6s ease;
}*/
.sub-menu .sub-menu::before{
    top: .9rem;
    left: -2.5rem;
    border: 1.2rem solid transparent;
    border-right-color: var(--color-blue-medium);
}
.sub-menu .sub-menu{
    border-top: none;
    border-left: 3px solid var(--color-blue-medium);
    top: 0;
    left: 160%;
}
.nav-list li:hover > .sub-menu{
    top: 3.15rem;
    opacity: 1;
    visibility: visible;
}
.sub-menu li:hover > .sub-menu{
    top: 0;
    left: 100%;
}
li.move-right{
    margin: auto 0 auto auto;
    line-height: initial;
}

@media (max-width:75rem){
	.navigation {
		top: 5rem;
	}
    .nav-list{
        position: fixed;
        top: 4.5rem;
		margin-top: 2.5rem;
        left: 0;
        height: auto;
        display: none;
        flex-direction: column;
        align-items: initial;
        background-color: var(--color-gray-light);
        z-index: 999;
		overflow-x: hidden;
		border-bottom: 2px solid var(--color-gruen);
    }
	.nav-list li a img {
		display: none;
	}
    .sub-menu{
        position: initial;
        border: 3px solid transparent;
        border-left-color: var(--color-blue-medium);
        margin-left: 1rem;
        max-height: 0;
    }
    .sub-menu::before{
        display: none;
    }
	.nav-list li {
		text-align: left;
		line-height: 4rem;
	}
    .nav-list li:hover > .sub-menu{
        opacity: 1;
        visibility: visible;
        max-height: initial;
    }
	.menu-logo {
		display: block;
	}
    .menu-icons {
        display: block;
    }
	.menu-icons i {
		margin: 0;
	}
    .menu-icons .fa-times {
        display: none;
    }
    nav.active .fa-times{
        display: block;
    }
    nav.active .fa-bars{
        display: none;
    }
    nav.active .nav-list{
        display: flex;
    }
}
@media (max-width:48rem){
	.navigation {
		top: 4rem;
	}
}
@media (max-width:37.5rem){
	.navigation {
		top: 3.5rem;
	}
}
/*--------------------------- Ende Navigation ---------------------------*/


/* =========================================
    			Polygon
======================================== */
/*.polygon {	
	width: 400px;
    height: 370px;
    clip-path: polygon(18% 13.5%, 100% 0%, 94% 99.5%, 0% 96%);
	background: transparent;
	margin: auto;
}
.polygon-inner {	
	position: relative;
	top: -400px;	
	width: 400px;
    height: 370px;
	background: transparent;
	margin: auto;	
	z-index: -1;
}
.polygon-headline {	
	position: relative;
	top: -200px;		
	background: transparent;
	z-index: 10;
	width:40%;
	margin: auto;
}*/
.polygon-color {
	width: 300px;
	height: 300px;
	/*clip-path: polygon(18% 13.5%, 0 96%, 6.5% 96%, 23% 19%, 93% 7.5%, 88% 93%, 5% 90%, 0% 96%, 94% 99.5%, 100% 0);*/
	clip-path: polygon(19% 13.5%, 0 96%, 5.5% 95%, 23% 18%, 94.55% 6.5%, 90.5% 94%, 5% 91%, 0% 96%, 95.5% 99.5%, 100% 0);
	background: red;
	margin: auto;
}
.polygon {	
	width: 300px;
	height: 277.5px;
    clip-path: polygon(18% 13.5%, 100% 0%, 94% 99.5%, 0% 96%);
	background: transparent;
	margin: auto;
}
.polygon-left {
	margin-left: 0;
}
.polygon-inner {	
	position: relative;
	top: -280px;	
	width: 300px;
	height: 277.5px;
	background: transparent;
	margin: auto;	
	z-index: -1;
}
.polygon-headline {	
	position: relative;
	top: -150px;		
	background: transparent;
	z-index: 10;
	width:60%;
	margin: auto;
}
.polygon img, .polygon-inner img {
	width: 100%;
    height: 100%;
	object-fit: cover;
	object-position: center;
}
/*-- 200px --*/
.polygon-200px {
	width: 200px;
    height: 185px;
}
.polygon-inner-200px {
	top: -190px;	
	width: 200px;
    height: 185px;
}
.polygon-headline-200px {
	top: -100px;
}
/*-- 400px --*/
.polygon-400px {
	width: 400px;
    height: 370px;
}
.polygon-inner-400px {
	top: -380px;	
	width: 400px;
    height: 370px;
}
.polygon-headline-400px {
	top: -200px;
}
.logo-header-small {
	position: relative;
	width: 200px;
	top: -90px;
}
/*-- polygon-colors --*/
.polygon-bg-color_rosa-orange {
	background: linear-gradient(to right, var(--color-rosa), var(--color-orange));
}
.polygon-bg-color_orange {
	background: var(--color-orange);	
}
.polygon-bg-color_green-sepia {
	background-color: var(--color-gruen-op09);
}
.polygon-bg-color_green-sepia img {
	object-fit: cover;
	opacity: 0.8;
	filter: brightness(120%);
	filter: grayscale(1);
}
@media screen and (max-width:37.5rem) {
	/*.polygon {	
		width: 200px;
		height: 185px;
	}
	.polygon-inner {	
		top: -200px;	
		width: 200px;
		height: 185px;
	}
	.polygon-headline {	
		top: -100px;
		width: 60%;
	}*/	
	/*-- 400px --*/
	.polygon-400px {	
		width: 300px;
		height: 278px;
      	margin-bottom: 0.5rem;
	}
	.polygon-inner-400px {	
		top: -285px;	
		width: 300px;
		height: 278px;
	}
	.polygon-headline-400px {	
		top: -150px;
		width: 90%;
	}
}
/*--------------------------- Ende Polygon ---------------------------*/


/* =========================================
    			Artikel
======================================== */
.card {
	display: flex;
	flex-direction: row;
	width: 100%;
	min-height: 120px;
	background-color: transparent;
	border: none;	
	align-items: center;
	overflow: visible;
}
.card.reverse {
	flex-direction: row-reverse;
}
.card .meta {
	position: relative;
    z-index: 1;
	flex-basis: 20%;
    height: auto;
	background-color: transparent;
	border: none;
	margin: 1rem 0;
}
.card .meta div {
	align-items: flex-start;
}
.card.reverse .meta div {
	align-items: flex-end;
}
.card a:hover {
	color: var(--color-orange);
	/*box-shadow: rgba(0, 0, 0, 0.16) 0px 5px 15px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;*/
}
.card .description {
	display:block;
	position: relative;
    z-index: 0;
	height: 300px;
	/*flex-basis: 60%;*/
	padding: 1.5rem 1.5rem 1.5rem 15rem;
    background-color: var(--color-elfenbein);
	overflow-y: hidden;
    text-align: left;
}
.card .description-polygon-200px {
	height: 120px;
	padding: 1.5rem 1.5rem 1.5rem 8rem;	
	font-size: 1.2rem;
	line-height: 1.4rem;
}
.card.reverse .description {
	padding: 1.5rem 15rem 1.5rem 1.5rem;
}
.card.reverse .description-polygon-200px {
	max-height: 120px;
	padding: 1.5rem 8rem 1.5rem 1.5rem;	
	font-size: 1rem;
	line-height: 1.2rem;
}
.card .description .kategorie {
	font-family: 'Inter', sans-serif;
	font-size: 0.9rem;
	text-transform: uppercase;
	margin-bottom: 1rem;
	/*border-bottom: 1px solid var(--color-gruen);*/
	text-decoration: underline;
}
.card .description h3 {
	font-weight: 600;
	text-transform: uppercase;
}
.card .description-polygon-200px h3 {
	font-size: 1.2rem;
	line-height: 1.5rem;
	margin-bottom: 0.5rem;
}
.card .description-polygon-200px .datum {
	font-size: 0.8rem;
	margin-bottom: 0.5rem;
}
.card .description::-webkit-scrollbar {
	width: 5px;
	height: 8px;
	background-color: var(--color-black-op01);
}
.card .description::-webkit-scrollbar-thumb {
    background: var(--color-gruen);
}
/*--- underline hover ---*/
/*.card a::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 0.1em;
	background-color: var(--color-gruen);
	opacity: 0;
	transition: opacity 0.5s, transform 0.5s;
	transform: scale(0);
	transform-origin: center;
}
.card a:hover::after,
.card a:focus::after {
	opacity: 1;
	transform: scale(1);
}*/
.card .meta a:hover::after,
.card .meta a:focus::after{
	transform: scale(0);
}
/*--- Ende underline hover ---*/
@media screen and (max-width:75rem) {
	.card .description-polygon-200px, .card.reverse .description-polygon-200px {
		/*height: 240px;*/
	}
}
@media screen and (max-width:67.5rem) {
	.card, .card.reverse {
		display: block;
		flex-direction: column;
	}
	.card .meta {		
		flex-basis: 20%;
		margin-bottom: 0;
	}
	.card .description, .card.reverse .description {		
		padding: 1rem;
	}
	.card .description-polygon-200px, .card.reverse .description-polygon-200px {
		/*height: 200px;*/
	}
	.card .description h3 {
		font-size: 1.5rem;
		line-height: 2rem;
	}
}
@media screen and (max-width:55rem) {
	.card .description h3 {
		font-size: 1.3rem;
		line-height: 1.5rem;
	}
	.card .description-polygon-200px, .card.reverse .description-polygon-200px {
		font-size: 1.1rem;
		line-height: 1.2rem;
	}
}
@media screen and (max-width:48rem) {
	.card .description-polygon-200px, .card.reverse .description-polygon-200px {
		/*height: 240px;*/
	}
}
@media screen and (max-width:37.5rem) {
	.card {
		min-height: 100px;
	}
	.card, .card.reverse {
		display: block;
		flex-direction: column;
	}
	.card .description {
		height: auto;
	}
	.card .despcription-referenten {
		height: auto;
	}
	.card .meta {		
		flex-basis: 20%;
		margin-bottom: 0;
	}
	.card .description-polygon-200px, .card.reverse .description-polygon-200px {
		/*height: 200px;*/
		padding: 1rem;
	}
	.card .description h3 {
		font-size: 1.5rem;
		line-height: 2rem;
	}
	
}
/*--------------------------- Ende Artikel ---------------------------*/


/* =========================================
    			Lightbox
======================================== */
.lightbox-easy {
	display: none;
	position: fixed;
	z-index: 999;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 1em;
	background: var(--color-black-op07);
	}
.lightbox-easy:target {
	display: block;
}
.card a.hover-lightbox-easy-link:hover {
	color: transparent;
	box-shadow: rgba(0, 0, 0, 0) 0px 5px 15px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 1px;
}
.card a.hover-lightbox-easy-link::after {
	    background-color: transparent;
}
.lightbox-easy-div {
	position: relative;
	z-index: 9999;
}
.lightbox-easy-div img {
	display: block;
	width: 80%;
	max-width: 1200px;
	height: auto;
	max-height: 1080px;
	margin: 3rem auto;
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
}
/*--------------------------- Ende Lightbox ---------------------------*/


/* =========================================
    			Button
======================================== */
.button-standard {	
	font-family: 'Inter', sans-serif;	
	text-transform: uppercase;
	font-weight: 600;
	color: var(--color-gruen)!important;
	display: inline-block;
	border: 2px solid var(--color-gruen)!important;	
	padding: 0.8rem 1rem!important;
	font-size: 1rem;
	width: 220px!important;	
	text-align: center;
	margin: auto;
	margin-top: 1rem;
}
.button-standard.reverse {
	background-color: var(--color-gruen)!important;
	color: var(--color-white)!important;
}
a.button-standard {
	text-decoration: none!important;
}
.button-standard:active, .button-standard:focus, .button-standard:hover {	
	/*box-shadow: var(--color-black-op03) 0px 2px 8px 0px;*/
	transition: 0.5s;
	background-color: var(--color-gruen)!important;
	color: var(--color-elfenbein)!important;
}
.button-standard.reverse:active, .button-standard.reverse:focus, .button-standard.reverse:hover {
	color: var(--color-gruen)!important;
	background-color: transparent!important;
}
@media screen and (max-width:37.5rem) {
	.button-standard {
		display: block!important;
		margin-left: 0!important;
		margin-top: 0!important;
		margin-bottom: 1rem;
	}
	.button-standard:nth-of-type(2) {
		margin-left: auto!important;
		margin-top: 1rem!important;
	}
}
/*--------------------------- Ende Button ---------------------------*/


/* =========================================
    			Timeline
======================================== */
.timeline {	
	padding-left: 2rem;
	text-align: left;
	border-left: 2px solid var(--color-black-op03);
	margin-bottom: 2rem;
}
.timeline time {	
	position: relative;
	font-family: 'Inter', sans-serif;
	font-size: 1.2rem;
	font-weight: 600;
	top: 2rem;
}
.timeline time::after {
	width: 15px;
	height: 15px;
	display: block;
	position: relative;
	left: -2.55rem;
	top: -1.2rem;
	border-radius: 15px;
	content: '';
	border: 3px solid var(--color-gruen);
	background: var(--color-white);
}
.timeline h3 {
	margin-bottom: 0;
}
.timeline h4 {
	margin: 2rem 0 0 0;
	font-weight: 600;
}
.timeline h5 {
	font-size: 1.3rem;
	line-height: 1.5rem;
	margin-top: -1rem;
	margin-bottom: -0.5rem;
}
.timeline ul {
	margin-top: 2rem;
	list-style: disc;
}
.timeline ul > li {
	text-align: left;
    margin-left: 2rem;
}
.timeline-item {
	padding: 3rem 2rem;
	position: relative;
	
} 
.timeline-item::before {
	content: attr(date-is);
	position: absolute;
	left: 2rem;
	top: 0.8rem;
	display: block;
	font-family: 'Inter', sans-serif;
	font-size: 1.2rem;
	font-weight: 600;
}
.timeline-item h4 {
	margin-bottom: 0;	
}
.timeline-item::after {
	width: 15px;
	height: 15px;
	display: block;
	top: 1rem;
	position: absolute;
	left: -8px;
	border-radius: 15px;
	content: '';
	border: 3px solid var(--color-gruen);
	background: var(--color-white);
}
 .timeline-item:last-child {
	 border-image: linear-gradient(to bottom, var(--color-black-op03) 60%, var(--color-black-op01)) 1 100%;
}
@media screen and (max-width:37.5rem) {
	.timeline-item {
		padding: 3rem 1rem 2rem 1.5rem;
	}
	.timeline-item::before {
		left: 1.5rem;
	}
	.timeline h4 {
		font-size: 1.5rem;
		margin: 1rem 0 0.5rem 0;
		font-weight: 600;
	}
}
/*--------------------------- Ende Timeline ---------------------------*/


/* =========================================
    			Control-Panel
======================================== */
.form-wrapper {
	max-width: 500px;
	width: 100%;
	background: var(--color-elfenbein);
	margin: auto;
	box-shadow: 2px 2px 4px rgba(0,0,0,0.125);
	border: 1px solid var(--color-gruen);
	padding: 2rem;
	margin-top: 2rem;
}
.form-wrapper-100Prozent {
	max-width: 100%;
}
.form-wrapper .form {
	width: 100%;
}
.form-wrapper .form .inputfield {
	margin-bottom: 1rem;
	display: flex;
	/*align-items: center;*/
}
.form-wrapper .form .inputfield.inputFormatBelow {
	margin-bottom: 0;
	display: flex;
	/*align-items: center;*/
}
.form-wrapper .form .inputfield span {
	/*position: relative;
	right: 0.5rem;*/
}
.form-wrapper .form .inputfield label {
	width: 200px;
	color: var(--color-gruen);
	margin-right: 10px;
	font-size: 1.1rem;
}
.form-wrapper .form .inputfield .buttonDiv {
	width: 100%;
}
.form-wrapper .form .inputfield button {
	width: auto;
	min-width: 2rem;
	padding: 0.2rem;
	border: 1px solid var(--color-gruen);
	color: var(--color-gruen);
}
.form-wrapper-100Prozent .form .inputfield label {
	width: 400px;
	color: var(--color-gruen);
	margin-right: 10px;
	font-size: 1.1rem;
}
.form-wrapper .form .inputfield .input,
.form-wrapper .form .inputfield .textarea {
	width: 100%;
	outline: none;
	border: 1px solid var(--color-gray-light);
	font-size: 1.1rem;
	padding: 0.3rem 0.8rem;
	border-radius: 3px;
	transition: all 0.3s ease;
}
.form-wrapper .form .inputfield .input-div {
	width: 100%;
	outline: none;
	border: 1px solid var(--color-gray-light);
	font-size: 1.1rem;
	border-radius: 3px;
	transition: all 0.3s ease;
}
#password-field, #password-field-2 {
	position: relative;
	right: 0.75rem;
	width: 80%;
}
.form-wrapper .form .inputfield .textarea {
	width: 100%;
	height: 125px;
	/*resize: none;*/
}
.form-wrapper .form .inputfield .custom_select {
	position: relative;
	width: 100%;
	height: 37px;
}
.form-wrapper .form .inputfield .custom_select:before {
	content: "";
	position: absolute;
	top: 12px;
	right: 10px;
	border: 8px solid;
	border-color: var(--color-gruen) transparent transparent transparent;
	pointer-events: none;
}
.form-wrapper .form .inputfield .custom_select select {
	-webkit-appearance: none;
	-moz-appearance:   none;
	appearance:        none;
	outline: none;
	width: 100%;
	height: 100%;
	padding: 0.3rem 0.8rem;
	font-size: 1.1rem;
	border: 1px solid var(--color-gray-light);
	border-radius: 3px;
}
.form-wrapper .form .inputfield .input:focus,
.form-wrapper .form .inputfield .textarea:focus,
.form-wrapper .form .inputfield .custom_select select:focus {
	border: 1px solid var(--color-gruen);
}
.form-wrapper .form .inputfield p {
	font-size: 1.1rem;
	color: var(--color-gruen);
}
.form-wrapper .form .inputfield .check {
	width: 15px;
	height: 15px;
	position: relative;
	display: block;
	cursor: pointer;
}
.form-wrapper .form .inputfield .check input[type="checkbox"] {
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
}
.form-wrapper .form .inputfield .check .checkmark {
	width: 15px;
	height: 15px;
	border: 1px solid var(--color-gruen);
	display: block;
	position: relative;
}
.form-wrapper .form .inputfield .check .checkmark:before {
	content: "";
	position: absolute;
	top: 1px;
	left: 2px;
	width: 5px;
	height: 2px;
	border: 2px solid;
	border-color: transparent transparent var(--color-white) var(--color-white);
	transform: rotate(-45deg);
	display: none;
}
.form-wrapper .form .inputfield .check input[type="checkbox"]:checked ~ .checkmark {
	background: var(--color-gruen);
}
.form-wrapper .form .inputfield .check input[type="checkbox"]:checked ~ .checkmark:before {
	display: block;
}
.form-wrapper .form .inputfield:last-child {
	margin-bottom: 0;
}
@media (max-width:37.5rem) {
	.form-wrapper .form .inputfield {
		flex-direction: column;
		align-items: flex-start;
	}
	.form-wrapper .form .inputfield label {
		margin-bottom: 5px;
	}
	.form-wrapper .form .inputfield.terms {
		flex-direction: row;
	}
	.form-wrapper .form .inputfield span {
		right: -85%;
		top: -1.7rem;
	}
	#password-field, #password-field-2 {		
		right: 0;
		width: 80%;
	}
}
/*--------------------------- Ende Control-Panel ---------------------------*/


/* =========================================
    			Login-Bereich
======================================== */
.card-wrap {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin-top: 0.5rem;
}
.card-item {
	max-width: 350px;	
	margin: 1.5rem 1.5rem 0.5rem 0;
	padding:1.5rem;
	height: auto;
	align-content: center;
	min-height: 180px;
	background-color: var(--color-elfenbein);
    border: 1px solid var(--color-gruen);
	transition: 0.2s;
    border-radius: 0.5rem;
}
a.card-item-link {
	text-decoration: none;
}
.card-item:hover {
	border-color: var(--color-orange);
}
.card-item-content {
	display: flex;
	flex-direction: row;
	align-items: center;
	color: var(--color-gruen);
}
.card-item-content i {
	font-size: 3rem;
	margin-right: 2rem;
	color: var(--color-gruen);
}
.card-item-content:hover i {
	color: var(--color-gruen);
}
/*--------------------------- Ende Login-Bereich ---------------------------*/


/* =========================================
    			Breadcrumb
======================================== */
/* Style the list */
ul.breadcrumb {
    list-style: none;	
	margin: 0.5rem 0;
	background-color: transparent;
}
/* Display list items side by side */
ul.breadcrumb li {
    display: inline;
    font-size: 1rem;
}
/* Add a slash symbol (/) before/behind each list item */
ul.breadcrumb li+li:before {    
    content: "";
	padding-right:0.3rem;
}
/* Add a color to all links inside the list */
ul.breadcrumb li a {    
    text-decoration: none;
	padding:0.3rem;
}
/* Add a color on mouse-over */
ul.breadcrumb li a:hover {
    text-decoration: underline;	
}
ul.breadcrumb li a:focus {
	color:var(--gruen);
}
/*--------------------------- Ende Breadcrumb ---------------------------*/


/* =========================================
    			Info Sidebar
======================================== */
.info-sidebar {
	position: fixed;
	top:5rem;
	right:0;
	z-index: 9999;
}
.info-sidebar-toggle-label{
	padding: 0.5rem 1rem;
	cursor: pointer;
	background-color: var(--color-elfenbein);
	color:var(--color-orange);
	border: 1px solid var(--color-gruen);
}
.info-sidebar-toggle-label:before {
	font-family: "Font Awesome 5 Free";
	font-size: 1.5rem;
	font-weight: 900;
	content: "\f053";
}
.info-sidebar-content {
	display: none;
	width:500px;
	background-color: var(--color-elfenbein);
	color:var(--color-gruen);
	padding: 1.5rem;
	border: 1px solid var(--color-gruen);
	text-align:left;
}
.info-sidebar-content td:first-of-type {
	padding: 0.2rem 0.5rem 0.2rem 0;
	border-right: 1px solid var(--color-gruen);
}
.info-sidebar-content td {
	padding: 0.2rem 1rem;
}
.info-sidebar-content td:last-of-type {
	padding: 0.2rem 0;
}
#info-sidebar-toggle-visibility{
	position: absolute;
	left: -999999999px;
}
#info-sidebar-toggle-visibility:checked ~ .info-sidebar-content{
	display: block;
}
#info-sidebar-toggle-visibility:checked ~ .info-sidebar-toggle-label:before {
	font-family: "Font Awesome 5 Free";
	font-size: 1.5rem;
	font-weight: 900;
	content: "\f00d";
}
@media only screen and (max-width: 30rem) {
	.info-sidebar {
		top:15rem;
	}
	.info-sidebar-content {
		width:300px;
	}
}
/*--------------------------- Ende Info Sidebar ---------------------------*/


/* =========================================
    			IMG Slider
======================================== */
.carousel {
	position: relative;
}
.carousel::after {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}
.carousel ul {
	overflow: auto; 
	display: flex; 	
	scroll-snap-type: x mandatory;
	scroll-snap-points-y: repeat(100%);
	scroll-snap-align: left;
	scroll-behavior: smooth;
	-ms-overflow-style: none; /* IE and Edge */
	scrollbar-width: none; /* Firefox */
	padding-bottom: 1rem;
}
.carousel ul::-webkit-scrollbar {
	display: none; /* Hide scrollbar for Chrome, Safari and Opera */
} 
.carousel ul li {
	width: 100%; 
	min-width: 100%;
	list-style: none; 
	scroll-snap-align: start;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	text-align: center;
	margin-right: calc(-100% + 300px);
	transition: transform 0.2s linear;
	/*opacity: 0.3;*/
	opacity: 0;
	line-height: 1;
	position: relative;
	bottom: 15px;
}
.carousel ul li.selected {
	opacity: 1; 
	z-index: 9;
}
.carousel ul li > div {
	z-index: 9; 
	margin: 0; 
	width: 100%;
	/*max-width: 360px;*/
	transition: all 0.2s linear;
	/*transform: scale(0.95);*/
}
.carousel ul li > div figcaption {
	margin-top: 0.3rem;
}
.carousel ul li div a {	
	display: inline-block; 
	color: var(--color-gruen); 
	padding: 8px 15px; 
	font-size: 13px; 
	text-decoration: none; 
	border-radius: 4px; 
	margin-top: 17px;
}
.carousel ol {
	position: absolute; 
	bottom: 15px; 
	display: flex; 
	justify-content: center; 
	left: 50%; 
	transform: translateX(-50%);
	z-index: 9;
}
.carousel ol li {
	list-style: none; 
	padding: 0 5px;
}
.carousel ol li a {
	display: block; 
	height: 10px; 
	width: 10px; 
	border: 2px solid var(--color-gruen); 
	background: transparent; 
	border-radius: 100%;
}
.carousel ol li.selected a {
	background: var(--color-gruen);
}
.carousel .prev, .carousel .next {
	user-select:none; 
	cursor: pointer; 
	font-size: 50px; 
	color:  var(--color-elfenbein); 
	position: absolute; 
	left: 0; 
	padding: 15px; 
	top: 50%; 
	transform: translateY(-50%); 
	z-index: 9;
}
.carousel .next { 
	left: auto; 
	right: 0;
}

/* RESPONSIVE CSS */
@media only screen and (max-width: 600px) {
  	.carousel .prev, .carousel .next {
		color:  var(--color-elfenbein); 
	}
}
/*--------------------------- Ende IMG Slider ---------------------------*/


/* =========================================
    			Flex Img
======================================== */
.flex-container-img {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: center;
	align-content: stretch;
	width: 100%;
}
.flex-container-img.card-item {
	max-width: 100%;
}
.flex-container-img.card-item i {
	font-size: 3rem;
}
.flex-container-img .flex-items:nth-child(1) {
	width: 30%;
	padding: 0.5rem;
}
.flex-container-img .flex-items:nth-child(2) {
	width: 70%;
	padding: 0.5rem;
}
@media only screen and (max-width: 30rem) {
	.flex-container-img {
		flex-direction: column;
		align-items: flex-start;
	}
	.flex-container-img .flex-items:nth-child(1) {
		width: 60%;
	}
}
/*--------------------------- Ende Flex Img ---------------------------*/


/* =========================================
    			Social Media
======================================== */
.social-media {
	display: flex;
	flex-direction: row;
	align-items: center;
	margin-top: 3rem;
}
.social-media a i {
	font-size: 2.2rem;
	margin-right: 1.2rem;
}
.social-media a:hover i {
	transform: scale(1.2);
	transition: 0.3s ease-in-out;
}
/*--------------------------- Ende Social Media ---------------------------*/


/* =========================================
    			Footer
======================================== */
.section-pre-footer-top {
	position: relative;
	top:3rem;
	background: transparent;
	height: 3rem;
	border-bottom: 3.5px solid var(--color-gruen);
}
.section-pre-footer {
	position: relative;
	top: 0;
	z-index: 1;
	padding: 0 1rem;
}
.section-pre-footer img {
	height: 6rem;
	width: auto;
	float: right;
	/*margin-right: 5rem;*/
}
.section-pre-footer-bottom {
	/*background: linear-gradient(to right, var(--color-rosa), var(--color-orange));*/
	height: 3rem;
	/*border-top: 4px solid var(--color-gruen);*/
}
footer {
	position: relative;	
	font-family: 'Inter', sans-serif;	
	font-weight: 600;
	text-align: left;
	padding: 5rem 0 3rem 0;	
	border-top: 4px solid var(--color-gruen);	
}
/*--- BG Animation ---*/
.animation-bg {
	overflow: auto;
	background: linear-gradient(to right, var(--color-rosa) , var(--color-orange));
	animation: gradient 20s ease infinite;
    background-size: 200% 200%;
    background-attachment: fixed;
}
@keyframes gradient {
    0% {
        background-position: 0% 0%;
    }
    50% {
        background-position: 100% 100%;
    }
    100% {
        background-position: 0% 0%;
    }
}
.animation-bg-rotate {
	position: relative;
	z-index: 0;
	width: 300px;
	height: 300px;
	overflow: hidden;
	padding: 2rem;
}
.animation-bg-rotate::before {
	position: absolute;
	content: '';
	z-index: -2;
	top: -50%;
	left: -50%;
	width: 200%;
	height: 200%;
	background-repeat: no-repeat;	 
	background-image: linear-gradient(var(--color-rosa) , var(--color-orange));
	animation: bg-rotate 4s linear infinite;
}
.animation-bg-rotate::after {
	content: '';
	position: absolute;
	z-index: -1;
	width: calc(100);
	height: calc(100);	
	top: 10px;
	left: 10px;
}
 @keyframes bg-rotate {
	100% {
		transform: rotate(1turn);
	}
}
/*--- Ende BG Animation ---*/
footer.login {
	padding: 2rem 0;
}
footer div.row:last-of-type {
	margin-top: 3rem;
	font-size: 0.9rem;
}
footer.login div.row:last-of-type {
	margin-top: 0;
}
footer ul li {
	font-size: 1.7rem;
	line-height: 2rem;
}
footer a, footer i {
}
footer a:hover, footer a:hover i {
	transition: 0.3s;
}
footer hr {
	background-color: var(--color-white-op03);
}
@media screen and (max-width:53rem) {	
	.section-pre-footer-top {
		height: 1.5rem;	
		top: 1.2rem;
	}
	.section-pre-footer img {
		position: relative;
		height: 3rem;
		top: -0.1rem;
	}
	.section-pre-footer-bottom {
		height: 1rem;
	}
}
@media screen and (max-width:37.5rem) {	
	.logo-footer {
		width: 50%;
	}
	footer ul li {
		font-size: 1.4rem;
		line-height: 1.8rem;
	}
	.section-pre-footer-top {
		height: 1.5rem;	
		top: 1.2rem;
	}
	.section-pre-footer img {
		position: relative;
		height: 2rem;
		top: -0.1rem;
	}
	.section-pre-footer-bottom {
		height: 0.5rem;
	}
}
/*--------------------------- Ende Footer ---------------------------*/