/*
Style für den Headerbereich mit Navigation
*/




/* ----------------------------------
	BASICS
	Reset ul in Navigation & Menu-Links
---------------------------------- */

nav ul { 
	padding: 0 !important;
	}

.nav a:link,
.nav a:visited,
.nav a:active,
.nav a:hover {
	text-decoration: none !important;
	}



/* ----------------------------------
	HEADERSTART (nach der Navigation)
---------------------------------- */

#headerstart {
	position: relative;
	padding: 3rem 0 0 0;
	}
#headerstart.header-home {
	padding: 5rem 0 0 0;
	}

		@media (min-width:782px) {
			#headerstart { padding: 5rem 0 0 0; }
			#headerstart.header-home { padding: 7.5rem 0 0 0; }
			}

#headerstart.with-img {
	background-color: transparent;
	padding: 0;
	}
#headerstart.with-cover {
	position: relative;
	}




/* ----------------------------------
	HEADERBILD
---------------------------------- */

.with-img .headerimg {
	background-color: transparent;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	text-align: center;
	padding: 0px;
	height: 14rem;
	}

		@media (min-width:782px) {
			.with-img .headerimg { height: 22rem; }
			}
		@media (min-width:1100px) {
			.with-img .headerimg { height: 30rem; }
			}



.vheight-1_2 { 
	height: 50vh !important; /* Use vh as a fallback for browsers that do not support Custom Properties */
	height: calc(var(--vh, 1vh) * 50) !important;
	}
.vheight-3_4 { 
	height: 75vh !important; /* Use vh as a fallback for browsers that do not support Custom Properties */
	height: calc(var(--vh, 1vh) * 75) !important;
	}
.vheight-1_1 { 
	height: 100vh !important; /* Use vh as a fallback for browsers that do not support Custom Properties */
	height: calc(var(--vh, 1vh) * 100) !important;
	}
.vheight-custom { 
	height: 100vw !important;
	}
.vheight-1_2,
.vheight-3_4,
.vheight-1_1,
.vheight-custom {
	-webkit-transition: all 800ms ease;
	-moz-transition: all 800ms ease;
	-ms-transition: all 800ms ease;
	-o-transition: all 800ms ease;
	transition: all 800ms ease;
	transition-delay: 500ms;
	}

		@media (min-width:782px) {
			.vheight-custom { height: 40vw !important; }
			}





/* ----------------------------------
	HEADERTITEL (Seitentitel)
---------------------------------- */

h1.seitentitel {
	font-size: 1.5em !important;
	line-height: 1.0em !important;
	color: var(--color-accent);
	}
h1.seitentitel,
h1.seitentitel + p {
	width: 90%;
	max-width: 1100px;
	margin: 0 auto;
	text-align: center;
	}
h1.seitentitel + p,
.headertext p {
	margin-top: 0.7em;
	}

		@media (min-width: 782px) {
			h1.seitentitel { font-size: 2.0em !important; }
			}


.headertext {
	width: 90%;
	max-width: 1100px;
	margin: 0 auto;
	padding: 0;
	text-align: center;
	padding-top: var(--spacer-big);
	}
.headertext-with-img {
	padding-top: 0;
	padding-bottom: var(--spacer-big);
	position: absolute;
	top: 14rem;
	left: 50%;
	transform:translate(-50%,-100%);
	z-index: 1;
	}

		@media (min-width:782px) {
			.headertext-with-img { top: 22rem; }
			}
		@media (min-width:1100px) {
			.headertext-with-img { top: 30rem; }
			}


.headertext-with-img h1.seitentitel {
	color: white;
	text-shadow: 0px 0px 50px rgba(0, 0, 0, 1);
	}




/* ----------------------------------
	HEADER HOMESLIDER
---------------------------------- */

.slider-wrap {
	width: 100%;
	position: relative;
	background: #999;
	}


/* --- Slider mit div. Containern --- */
.slider {
	margin: 0 auto;
	max-width: 100%;
	}
.slide_viewer {
	/*height: 100vh;*/
	overflow: hidden;
	position: relative;
	}
.slide_group {
	position: relative;
	width: 100%;
	height: 100%;
	}
.slide {
	display: none;
	position: absolute;
	width: 100%;
	height: 100%;
	}
.slide:first-child {
	display: block;
	}
.slide img {
	position: absolute;
	width: 100% !important;
	height: 100% !important;
	/*object-fit: cover !important;*/
	/*object-position: 50% 50% !important;*/
	top: 0;
	right: 0;
	left: 0;
	}



/* --- Bildabdunklung --- */
.slider_gradient {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 30%;
	background: rgb(0,0,0);
	background: linear-gradient(180deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 100%);
	}



/* --- Slide Bullets --- */
.slide_buttons {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0.5em;
	text-align: center;
	}
a.slide_btn {
	color: white;
	font-family: 'Arial', sans-serif;
	font-size: 30px;
	font-weight: 600;
	text-decoration: none;
	margin: 0;
	padding: 0 0.15em;
		-webkit-transition: all 0.2s ease-in-out;
		-moz-transition: all 0.2s ease-in-out;
		-ms-transition: all 0.2s ease-in-out;
		-o-transition: all 0.2s ease-in-out;
		transition: all 0.2s ease-in-out;
	text-shadow: 0px 0px 20px rgba(0, 0, 0, 0.5) !important;
	opacity: 0.3;
	}
a.slide_btn:link,
a.slide_btn:visited,
a.slide_btn:active,
a.slide_btn:hover {
	text-decoration: none;
	cursor: pointer;
	opacity: 1;
	}
.slide_btn.active, .slide_btn:hover {
	opacity: 1;
	}

		@media (min-width:782px) {
			a.slide_btn { font-size: 40px; }
			}
		@media (min-width:1210px) {
			.slide_buttons { bottom: 1.5em; }
			}



/* --- Slide Arrows --- */
.directional_nav {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 2.5%;
	right: 2.5%;
	}
.previous_btn {
	margin: auto;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
		-webkit-mask-image: url(../img/arrow-left.svg);
		mask-image: url(../img/arrow-left.svg);
	}
.next_btn {
	margin: auto;
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
		-webkit-mask-image: url(../img/arrow-right.svg);
		mask-image: url(../img/arrow-right.svg);
	}
.previous_btn, .next_btn {
	cursor: pointer;
	width: 1.5rem;
	height: 20%;
	opacity: 0.5;
	background-color: white;
	-webkit-transition: opacity 0.4s ease-in-out;
	-moz-transition: opacity 0.4s ease-in-out;
	-ms-transition: opacity 0.4s ease-in-out;
	-o-transition: opacity 0.4s ease-in-out;
	transition: opacity 0.4s ease-in-out;
	z-index: 60;
		-webkit-mask-size: 100% auto;
		-webkit-mask-repeat: no-repeat;
		-webkit-mask-position: center;
		mask-size: 100% auto;
		mask-repeat: no-repeat;
		mask-position: center;
	}
.previous_btn:hover, .next_btn:hover {
	opacity: 1;
	}

			@media (min-width:600px) {
				.previous_btn, .next_btn { width: 1.8rem; }
			}
			@media (min-width:782px) {
				.directional_nav { left: 1%; right: 1%; }
				.previous_btn, .next_btn { width: 2.2rem; opacity: 0.4; }
			}
			@media (min-width:1210px) {
				.directional_nav { left: 2rem; right: 2rem; }
				.previous_btn, .next_btn { width: 3rem; }
			}
			@media (min-width:1760px) {
				.directional_nav { left: 4rem; right: 4rem; }
			}




/* ----------------------------------
	HEADERTEXT statisches Bild & Homeslider
---------------------------------- */

.headertext-home {
	position: absolute;
	bottom: 12%;
	right: 0;
	left: 0;
	display: -webkit-box;  display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; /* or inline-flex */
	flex-direction: column;
	justify-content: flex-end;
	z-index: 2;
	}
.headertext-home * {
		-webkit-transition: all 300ms ease;
		-moz-transition: all 300ms ease;
		-ms-transition: all 300ms ease;
		-o-transition: all 300ms ease;
		transition: all 300ms ease;
	}

.headertext-home mark {
	text-shadow: none !important;
	padding: 0 0.3em;
	}
.headertext-home > *:last-child {
	margin: 0 auto 0 auto !important;
	}


/* --- Textdefinition --- */
.headertext-home h1, .headertext-home h2, 
.headertext-home h3, .headertext-home h4, 
.headertext-home h5, .headertext-home h6 {
	font-size: 1.3em;
	line-height: 1.3em;
	line-height: 1.1em;
	}
.headertext-home h1 + p, .headertext-home h2 + p, 
.headertext-home h3 + p, .headertext-home h4 + p, 
.headertext-home h5 + p, .headertext-home h6 + p {
	margin-top: 0.8em;
	}
.headertext-home p {
	font-size: 0.9em;
	line-height: 1.4em;
	}
.headertext-home p.has-background {
	width: 100%;
	max-width: 100%;
	}

		@media (min-width:782px) {
			.headertext-home h1, .headertext-home h2, 
			.headertext-home h3, .headertext-home h4, 
			.headertext-home h5, .headertext-home h6 { 
				font-size: 1.75em;
				}
			.headertext-home p {
				font-size: 1.1em;
				}
			}
		@media (min-width:1210px) {
			.headertext-home h1, .headertext-home h2, 
			.headertext-home h3, .headertext-home h4, 
			.headertext-home h5, .headertext-home h6 { 
				font-size: 2.0em; 
				}
			.headertext-home p {
				font-size: 1.3em;
				}
			}

		@media (min-width:600px) {
			.headertext-home .wp-block-cover h1,
			.headertext-home .wp-block-cover h2,
			.headertext-home .wp-block-cover h3,
			.headertext-home .wp-block-cover h4,
			.headertext-home .wp-block-cover h5,
			.headertext-home .wp-block-cover h6 {
				max-width: 80%;
				}
			.headertext-home .wp-block-cover .has-text-align-right {
				margin-left: auto !important;
				}
			.headertext-home .wp-block-cover .has-text-align-center {
				margin-left: auto !important;
				margin-right: auto !important;
				}
			}


/* --- Anpassungen fuer den Coverblock im CPT "Slider" --- */

.headertext-home.headertext-full {
	top: 0;
	bottom: 0;
	position: relative;
	min-height: 100% !important;
	height: 100% !important;
	}
.headertext-home.headertext-full > * {
	width: 100% !important;
	max-width: 100% !important;
	}
.headertext-home.headertext-full .wp-block-cover__inner-container {
	width: 75vw !important;
	max-width: 75vw !important;
	margin-top: var(--spacer-big) !important;
	margin-bottom: var(--spacer-big) !important;
	}
.headertext-home.headertext-full .wp-block-cover__inner-container * {
	margin: 0;
	}
.headertext-home.headertext-full .wp-block-cover__inner-container * + * {
	margin-top: 1rem;
	}
.headertext-home.headertext-full .wp-block-cover__inner-container br {
	margin-top: 0 !important;
	}
.headertext-home.headertext-full .wp-block-cover__inner-container .wp-block-buttons {
	padding-top: 0.5rem;
	}
.headertext-home.headertext-full .wp-block-cover__inner-container .wp-block-buttons * + * {
	margin-top: 0rem;
	}
.headertext-home.headertext-full .wp-block-cover.is-style-height-full {
	min-height: 100% !important;
	height: 100% !important;
	padding: var(--spacer-big) 5vw !important;
	margin: 0 !important;
	}
.headertext-home.headertext-full iframe {
	height: 100% !important;
	width: 100% !important;
	}

		@media (min-width:782px) {
			.headertext-home.headertext-full .wp-block-cover__inner-container {
				width: 60vw !important;
				max-width: 600px !important;
				}
			}
		@media (min-width:1210px) {
			.headertext-home.headertext-full .wp-block-cover__inner-container {
				width: 40vw !important;
				max-width: 600px !important;
				}
			}


/* --- Pfeil --- */
.headertext-home > .header-arrow-link {
	width: 50%;
	height: 3rem;
	padding: 0.5em 0;
	margin: 1.5em auto 0 auto !important;
	position: relative;
	}
.header-arrow {
	content: "";
	background-color: white;
		-webkit-mask-image: url(../img/arrow-down-long.svg);
		-webkit-mask-size: auto 100%;
		-webkit-mask-repeat: no-repeat;
		-webkit-mask-position: center;
		mask-image: url(../img/arrow-down-long.svg);
		mask-size: auto 100%;
		mask-repeat: no-repeat;
		mask-position: center;
	width: 3rem;
	height: 3rem;
	position: absolute;
	left: calc(50% - 1.5rem);
		-webkit-transition: all 300ms ease;
		-moz-transition: all 300ms ease;
		-ms-transition: all 300ms ease;
		-o-transition: all 300ms ease;
		transition: all 300ms ease;
	}

		@media (min-width:782px) {
			.header-arrow-link:hover .header-arrow { transform: translate(0, 1em); }
			}
		@media (min-width:782px) {
			.header-arrow { height: 4rem;}
			}


/* --- Ausgeblendet wenn Mobile querformatig --- */
		@media (orientation:landscape) and (max-width:900px) {
			.headertext-home > .header-arrow-link { display: none; }
			.headertext-home > .wp-block-classic { display: none; }
			.headertext-home > p { display: none; }
		}




/* ----------------------------------
	Scroll to Start > Home
---------------------------------- */

#scroll-to-start {
	height: 3rem;
	margin-top: -3rem;
	}

		@media (min-width:782px) {
			#scroll-to-start {
				height: 5rem;
				margin-top: -5rem;
				}
			}




/* ----------------------------------
	STICKY NAVBAR
---------------------------------- */

#navbar {
	width: 100%;
	position: fixed; /* Standard gemaess Customizer-Einstellungen fuer Positionierung der Navigation */
	top: 0;
	z-index: 999;
	}
#navbar.alignbasic,
#navbar.alignwide,
#navbar.alignfull {
	max-width: 100%;
	}
#navbar.navbar-home {
	}
#navbar.header-change {
	-webkit-box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.05);
	-moz-box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.05);
	box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.05);
	}
#navbar:before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: var(--color-nav-scroll-bg);
	display: block;
	}
#navbar.navbar-transparent:before {
	background-color: var(--color-nav-start-img-bg);
	}
#navbar.header-change:before {
	background-color: var(--color-nav-scroll-bg);
	opacity: 1;
	}

		@media (min-width:782px) {
			#navbar.header-change { background-color: var(--color-general-bg); }
			#navbar:before { background-color: var(--color-nav-scroll-bg); }
			#navbar.header-change:before { opacity: 0.93; }
			}
		@media (min-width:1210px) {
			}




/* ----------------------------------
	RESPONSIVE NAVBAR AUFBAU
---------------------------------- */

/* --- Positionierung innerhalb des Navbars --- */

.nav {
	position: relative;
	z-index: 999;
	margin: 0 auto 0 auto;
	padding: 0 5%;
	}

		@media (min-width:1210px) {
			#navbar.alignbasic .nav { max-width: 1100px; padding: 0;}
		}
		@media (min-width:1760px) {
			#navbar.alignwide .nav { max-width: 1600px; padding: 0;}
			#navbar.alignfull .nav { max-width: calc(100% - 8rem); padding: 0; }
		}


/* --- Navbar-Header (Seitentitel oder Seitenlogo) --- */

.nav > .nav-header {
	display: inline;
	content: "";
	}
.nav > .nav-header > .nav-title {
	display: block;
	position: relative;
	width: 75%;
	height: 3.0rem;
	overflow: hidden;
	font-size: 1rem;
	line-height: 3.0rem;
	color: white;
	text-align: left;
	}
.navbar-home .nav > .nav-header > .nav-title {
	height: 5.0rem;
	line-height: 5.0rem;
	}
#navbar.header-change .nav > .nav-header > .nav-title {
	height: 3.0rem;
	line-height: 3.0rem;
	}

		@media (min-width:782px) {
			.nav > .nav-header > .nav-title {
				width: 75%;
				height: 4.0rem;
				line-height: 4.0rem;
				}
			.navbar-home .nav > .nav-header > .nav-title {
				height: 5.0rem;
				line-height: 5.0rem;
				}
			#navbar.header-change .nav > .nav-header > .nav-title {
				height: 4.0rem;
				line-height: 4.0rem;
				}
			}
		@media (min-width:1210px) {
			.nav > .nav-header > .nav-title {
				width: 25rem;
				height: 5.0rem;
				line-height: 5.0rem;
				}
			.navbar-home .nav > .nav-header > .nav-title {
				height: 7.5rem;
				line-height: 7.5rem;
				}
			#navbar.header-change .nav > .nav-header > .nav-title {
				height: 5.0rem;
				line-height: 5.0rem;
				}
			}


/* --- Seitentitel --- */

span.navtitle { font-size: 1.2em; }

.nav > .nav-header > .nav-title,
.nav > .nav-header > .nav-title a:link,
.nav > .nav-header > .nav-title a:visited,
.nav > .nav-header > .nav-title a:active { color: var(--color-nav-color-title); }
.nav > .nav-header > .nav-title a:hover { color: var(--color-general-txt); }

.navbar-home .nav > .nav-header > .nav-title,
.navbar-home .nav > .nav-header > .nav-title a:link,
.navbar-home .nav > .nav-header > .nav-title a:visited,
.navbar-home .nav > .nav-header > .nav-title a:active { color: white; }
.navbar-home .nav > .nav-header > .nav-title a:hover { color: var(--color-accent); }

.header-change .nav > .nav-header > .nav-title,
.header-change .nav > .nav-header > .nav-title a:link,
.header-change .nav > .nav-header > .nav-title a:visited,
.header-change .nav > .nav-header > .nav-title a:active { color: var(--color-nav-color-title); }
.header-change .nav > .nav-header > .nav-title a:hover { color: var(--color-general-txt); }


		@media (min-width:782px) {
			span.navtitle { font-size: 1.5em; }
			}
		@media (min-width:1210px) {
			span.navtitle { font-size: 2.0em; }
			}


/* --- Seitenlogo --- */

.nav-title img {
	position: absolute;
	top: 15%;
	bottom: 15%;
	width: 100%;
	height: 70%;
	object-fit: contain;
	object-position: 0 0;
	}
		@media (min-width:782px) {
			.navbar-home .nav-title img {
				top: 20%;
				bottom: 20%;
				height: 60%;
				}
			}




/* --------------------------------------------------------------------
	MOBILE-NAVIGATION 
	mit Burger-Menu
-------------------------------------------------------------------- */

		@media (max-width:781px) {

/* --- Button --- */
			.nav > #nav-check {
				display: none;
				}
			.nav > .nav-btn {
				display: inline-block;
				position: absolute;
				right: calc(5vw - 1.2rem);
				top: 0px;
				}
			.nav > .nav-btn > label {
				display: inline-block;
				width: 1.8rem;
				height: 1.5rem;
				padding: 0.85rem 1.2rem;
				}
			.navbar-home .nav > .nav-btn > label {
				padding: 1.65rem 1.2rem;
				}
			#navbar.header-change .nav > .nav-btn > label {
				padding: 0.85rem 1.2rem;
				}
			.nav > .nav-btn > label:hover,
			.nav > #nav-check:checked ~ .nav-btn > label {
				background-color: none;
				}
			.nav > .nav-btn > label > span {
				display: block;
				width: 1.8rem;
				height: 0.4rem;
				border-top: 3px solid var(--color-nav-start-txt);
				}
					/* --- farbwechsel Burgermenu --- */
					.navbar-transparent .nav > .nav-btn > label > span { 
						border-top: 3px solid var(--color-nav-start-img-txt);
						}
					.header-change .nav > .nav-btn > label > span { 
						border-top: 3px solid var(--color-nav-scroll-txt);
						}
			.nav > #nav-check:checked ~ .nav-btn > label {
				background-color: none;
				}
			.nav > #nav-check:checked ~ .nav-btn > label > span:first-of-type {
				transform: rotateY(0deg) rotate(45deg); /* needs Y at 0 deg to behave properly*/
				margin-top: 0.6rem;
				}
			.nav > #nav-check:checked ~ .nav-btn > label > span:last-of-type {
				transform: rotateY(0deg) rotate(-45deg); /* needs Y at 0 deg to behave properly*/
				margin-left: 0.25rem;
				margin-top: -1.2rem;
				}
			.nav > #nav-check:checked ~ .nav-btn > label > span:nth-of-type(2) {
				border-top: 3px solid transparent !important;
				}

/* --- Burger-Menu - eingeblendete Navigation --- */
			.nav > .nav-links {
				display: block;
					display: -webkit-box;  display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; /* or inline-flex */
					flex-direction: column;
					justify-content: space-between;
				background-color: var(--color-subnav-bg);
				transition: all 0.3s ease-in;
				overflow-y: hidden;
				position: absolute;
				top: 3.0rem;
				left: 0;
				right: 0;
				bottom: 0;
				}
			.nav > .nav-links { top: 3.0rem; }
			.navbar-home .nav > .nav-links { top: 5.0rem; }
			#navbar.header-change .nav > .nav-links { top: 3.0rem; }

			.nav > #nav-check:not(:checked) ~ .nav-links {
				height: 0px;
				opacity: 0;
				}
			.nav > #nav-check:checked ~ .nav-links {
				height: calc(100vh - 3rem); /* Use vh as a fallback for browsers that do not support Custom Properties */
				height: calc(var(--vh, 1vh) * 100 - 3rem);
				overflow-y: auto;
				opacity: 1;
				}
			.navbar-home .nav > #nav-check:checked ~ .nav-links {
				height: calc(100vh - 5rem); /* Use vh as a fallback for browsers that do not support Custom Properties */
				height: calc(var(--vh, 1vh) * 100 - 5rem);
				}
			.navbar-home .nav > #nav-check:not(:checked) ~ .nav-header:before {
				background: var(--color-general-bg);
				opacity: 0;
				}
			.navbar-home .nav > #nav-check:checked ~ .nav-header .nav-title {
				color: var(--color-accent);
				}
			.navbar-home .nav > #nav-check:checked ~ .nav-header:before {
				content: "";
				display: block;
				width: 100%;
				height: 5rem;
				background: var(--color-general-bg);
				position: absolute;
				left: 0;
				opacity: 1;
				}
			.navbar-transparent .nav > #nav-check:checked ~ .nav-btn > label > span:first-of-type,
			.navbar-transparent .nav > #nav-check:checked ~ .nav-btn > label > span:last-of-type { 
				border-color: var(--color-nav-scroll-txt);
				}
			.header-change .nav > #nav-check:checked ~ .nav-links {
				height: calc(100vh - 3rem); /* Use vh as a fallback for browsers that do not support Custom Properties */
				height: calc(var(--vh, 1vh) * 100 - 3rem);
				overflow-y: auto;
				}

/* --- Gestaltung Menu-Items --- */
			nav.hauptnav .menu {
				padding: calc(5vw - 0.5em) 5vw !important;
				-webkit-box-shadow: inset 0px 10px 15px 0px rgba(0,0,0,0.05);
				-moz-box-shadow: inset 0px 10px 15px 0px rgba(0,0,0,0.05);
				box-shadow: inset 0px 10px 15px 0px rgba(0,0,0,0.05);
				}
			nav.hauptnav ul li > a {
				display: block;
				font-size: 1.0em;
				line-height: 2.5rem;
				color: var(--color-nav-scroll-txt);
				}
			nav.hauptnav ul.menu > li > a {
				text-transform: uppercase;
				}
			nav.hauptnav .sub-menu {
				margin: -0.1em 0 0.3em 0;
				}
			nav.hauptnav .sub-menu li > a {
				padding: 0.1em 0 0.4em 1em;
				line-height: 1.5rem;
				opacity: 0.8;
				}
			nav.hauptnav li {
				position: relative;
				list-style-type: none;
				margin: 0;
				}
			nav.hauptnav .current_page_item > a,
			nav.hauptnav .current_page_ancestor > a,
			nav.hauptnav li.current_page_item > a, 
			nav.hauptnav li.current-page-ancestor > a,
			nav.hauptnav li.current-menu-item > a, 
			nav.hauptnav li.current-menu-ancestor > a,
			nav.hauptnav li.current-menu-parent > a,
			nav.hauptnav li.current-post-parent > a,
			nav.hauptnav li.current-category-ancestor > a {
				color: var(--color-nav-color-link);
				font-weight: var(--font-general-bold);
				}
			nav.hauptnav .sub-menu .current_page_item > a,
			nav.hauptnav .sub-menu .current_page_ancestor > a,
			nav.hauptnav .sub-menu li.current_page_item > a, 
			nav.hauptnav .sub-menu li.current-page-ancestor > a,
			nav.hauptnav .sub-menu li.current-menu-item > a, 
			nav.hauptnav .sub-menu li.current-menu-ancestor > a,
			nav.hauptnav .sub-menu li.current-menu-parent > a,
			nav.hauptnav .sub-menu li.current-post-parent > a,
			nav.hauptnav .sub-menu li.current-category-ancestor > a {
				color: var(--color-nav-color-link);
				font-weight: var(--font-general-regular);
				opacity: 1;
				}
		}




/* --------------------------------------------------------------------
	DESKTOP-NAVIGATION
	mit aufklappbarer Subnav
-------------------------------------------------------------------- */

		@media (min-width:782px) {

/* --- Elemente vom Burger Menu deaktivieren --- */
			.nav > #nav-check { display: none; }
			.nav > .nav-btn { display: none; }

/* --- Container --- */
			.nav > .nav-links {
				display: block;
				position: absolute;
				top: 0;
				right: 5%;
				margin: 0 0 0 auto;
				padding: 0 !important;
				}
			.menu-main-menu-container {
				text-align: left;
				}
	
			nav.hauptnav {
				height: 4.0rem;
				display: -webkit-box;  display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; /* or inline-flex */
				flex-direction: column;
				justify-content: flex-end;
				}
			.navbar-home nav.hauptnav { height: 5.0rem; }
			.header-change nav.hauptnav { height: 4.0rem; }		


/* --- Grundaufbau --- */

			/* Aeusserstes ul-Listenelement = Hauptnavigation bzw. 1. Ebene */
			nav.hauptnav ul {
				margin: 0 0 0 0;
				padding: 0;
				background: none;
				}
			nav.hauptnav ul:after {
				content: "";
				display: table;
				clear: both;
				}
			/* Das Grund-Listen-Element */
			nav.hauptnav li {
				float: left;
				position: relative;
				list-style-type: none;
				margin: 0;
				}
			/* Grundeinstellungen fuer alle Textelemente innerhalb der Navigation */
			nav.hauptnav a {
				margin: 0;
				display: block;
				text-decoration: none;
				letter-spacing: 0.01em;
				}
			/* dem ul-Listenelement untergeordnetes Element = Subnavigation bzw. 2. Ebene */
			nav.hauptnav ul ul {
				float: left;
				margin: 0;
				padding: 0;
				background-color: var(--color-subnav-bg);
				/* "display" stellt die Sichtbarkeit der Subnavigation auf unsichtbar */
				display: none;
				/* "position:absolute" positioniert die Subnavigation absolut zum entsprechenden Hauptnavigationspunkt 
				(top = vertikale Position, left = vertikale Position) */
				position: absolute;
				top: 4rem;
				left: 0;
				/* "z-index" legt die Subnavigation als ueberlagernde Ebene ueber alle anderen Elemente */
				z-index: 99999;
				-webkit-box-shadow: 0px 10px 15px 0px rgba(0,0,0,0.05)/*, inset 0px 1px 0px 0px rgba(0,0,0,0.1)*/;
				-moz-box-shadow: 0px 10px 15px 0px rgba(0,0,0,0.05)/*, inset 0px 1px 0px 0px rgba(0,0,0,0.1)*/;
				box-shadow: 0px 10px 15px 0px rgba(0,0,0,0.05)/*, inset 0px 1px 0px 0px rgba(0,0,0,0.1)*/;
				}
			/* dem ul-Listenelement untergeordnetes Element = Subnavigation bzw. 2. Ebene */
			nav.hauptnav ul ul ul {
				float: left;
				width: 230px;
				margin: 0;
				padding: 0;
				background-color: var(--color-subnav-bg);
				/* "display" stellt die Sichtbarkeit der Subnavigation auf unsichtbar */
				display: none;
				/* "position:absolute" positioniert die Subnavigation absolut zum entsprechenden Hauptnavigationspunkt 
				(top = vertikale Position, left = vertikale Position) */	
				position: absolute;
				top: 0;
				left: -230px;
				/* "z-index" legt die Subnavigation als ueberlagernde Ebene ueber alle anderen Elemente */
				z-index: 99999;
				}

/* --- Textgestaltung fuer die Hauptnavigation --- */
			nav.hauptnav ul a {
				background: none;
			    font-size: 0.9em;
				line-height: 4rem;
				padding: 0 1em 0 1rem;
			    color: var(--color-nav-start-txt);
				}
			.navbar-transparent nav.hauptnav ul a {
				color: var(--color-nav-start-txt);
				}
			.navbar-transparent.has-headerimg nav.hauptnav ul a {
				color: var(--color-nav-start-img-txt);
				}
			.header-change nav.hauptnav ul a,
			.header-change.has-headerimg nav.hauptnav ul a {
				color: var(--color-nav-scroll-txt);
				}
			nav.hauptnav > ul > li:last-child a {
				padding-right: 0;
				}


/* --- Textgestaltung fuer die Subnavigation. - Die Gestaltung basiert auf der Hauptnavigations-Gestaltung, 
			d.h. was dort eingestellt wurde, muss in der Subnavigation explizit veraendert werden, sonst werden die Einstellungen 
			der Hauptnavigation uebernommen. --- */
			nav.hauptnav ul ul a {
				/* "width" legt die Breite der Subnavigation fest. */
				width: 230px;
				font-size: 0.9em;
				line-height: 1.47rem;
				padding-top: 0.35rem;
				padding-bottom: 0.28rem;
				color: var(--color-subnav-txt);
				}
			.navbar-transparent nav.hauptnav ul ul a {
				color: var(--color-subnav-txt);
				}
			.navbar-transparent.has-headerimg nav.hauptnav ul ul a {
				color: var(--color-subnav-txt);
				}
			.header-change nav.hauptnav ul ul a,
			.header-change.has-headerimg nav.hauptnav ul ul a {
				color: var(--color-subnav-txt);
				}
			nav.hauptnav ul ul li:first-child a {
				padding-top: 0.7rem;
				}
			nav.hauptnav ul ul li:last-child a {
				padding-bottom: 0.7rem;
				}


/* --- Rollover fuer Subnavig. - Dies wird zuerst aufgefuehrt, damit die CSS-Stile fuer die Hauptnavigation 
			nachtraeglich uebersteuert werden koennen. Reihenfolge NICHT veraendern!!! --- */
			nav.hauptnav li:hover > a,
			nav.hauptnav ul ul :hover > a,
			nav.hauptnav a:focus {
			    background-color: var(--color-subnav-hover);
				color: var(--color-nav-color-link);
				}
			.navbar-transparent nav.hauptnav li:hover > a,
			.navbar-transparent nav.hauptnav ul ul :hover > a,
			.navbar-transparent nav.hauptnav a:focus {
				color: var(--color-nav-color-link);
				}
			.header-change nav.hauptnav li:hover > a,
			.header-change nav.hauptnav ul ul :hover > a,
			.header-change nav.hauptnav a:focus {
				color: var(--color-nav-color-link);
				}
			/* Aktiver Zustand fuer Subnavig. - Dies wird zuerst aufgefuehrt, damit die CSS-Stile fuer die Hauptnavigation 
			nachtraeglich uebersteuert werden koennen. Reihenfolge NICHT veraendern!!!  */
			nav.hauptnav a:focus,
			nav.hauptnav a:active,
			nav.hauptnav a.active {
			    background-color: var(--color-subnav-hover);
				}


/* --- Rollover fuer Hauptnavig --- */
			nav.hauptnav li:hover > a,
			nav.hauptnav a:focus {
			    background-color: transparent;
				color: var(--color-nav-color-link);
				}
			.navbar-transparent nav.hauptnav li:hover > a,
			.navbar-transparent nav.hauptnav a:focus {
				color: var(--color-nav-color-link);
				}
			.header-change nav.hauptnav li:hover > a,
			.header-change nav.hauptnav a:focus {
				color: var(--color-nav-color-link);
				}


/* --- Wenn dies fehlt, dann funktioniert das Einblenden der Subnavigation nicht. --- */
			nav.hauptnav ul li:hover > ul {
				display: block;
				}


/* --- Aktiver Zustand der Hauptnavigations-Elemente --- */
			/* Die definierten Elemente muessen auch in der Subnavigaton aufgefuehrt werden, damit nichts uebersteuert wird. */
			nav.hauptnav ul .current_page_item > a,
			nav.hauptnav ul .current_page_ancestor > a,
			nav.hauptnav ul li.current_page_item > a, 
			nav.hauptnav ul li.current-page-ancestor > a,
			nav.hauptnav ul li.current-menu-item > a, 
			nav.hauptnav ul li.current-menu-ancestor > a,
			nav.hauptnav ul li.current-menu-parent > a,
			nav.hauptnav ul li.current-post-parent > a,
			nav.hauptnav ul li.current-category-ancestor > a {
				color: var(--color-nav-color-link);
				font-weight: var(--font-general-bold);
				}
			.navbar-transparent nav.hauptnav ul .current_page_item > a,
			.navbar-transparent nav.hauptnav ul .current_page_ancestor > a,
			.navbar-transparent nav.hauptnav ul li.current_page_item > a, 
			.navbar-transparent nav.hauptnav ul li.current-page-ancestor > a,
			.navbar-transparent nav.hauptnav ul li.current-menu-item > a, 
			.navbar-transparent nav.hauptnav ul li.current-menu-ancestor > a,
			.navbar-transparent nav.hauptnav ul li.current-menu-parent > a,
			.navbar-transparent nav.hauptnav ul li.current-post-parent > a,
			.navbar-transparent nav.hauptnav ul li.current-category-ancestor > a {
				color: var(--color-nav-color-link);
				}
			.header-change nav.hauptnav ul .current_page_item > a,
			.header-change nav.hauptnav ul .current_page_ancestor > a,
			.header-change nav.hauptnav ul li.current_page_item > a, 
			.header-change nav.hauptnav ul li.current-page-ancestor > a,
			.header-change nav.hauptnav ul li.current-menu-item > a, 
			.header-change nav.hauptnav ul li.current-menu-ancestor > a,
			.header-change nav.hauptnav ul li.current-menu-parent > a,
			.header-change nav.hauptnav ul li.current-post-parent > a,
			.header-change nav.hauptnav ul li.current-category-ancestor > a {
				color: var(--color-nav-color-link);
				text-shadow: none;
				}


/* --- Aktiver Zustand der Subnavigations-Elemente --- */
			/* Die definierten Elemente muessen auch in der Hauptnavigaton aufgefuehrt werden, damit nichts uebersteuert wird. */
			nav.hauptnav ul ul .current_page_item > a,
			nav.hauptnav ul ul .current_page_ancestor > a,
			nav.hauptnav ul ul li.current_page_item > a, 
			nav.hauptnav ul ul li.current-page-ancestor > a,
			nav.hauptnav ul ul li.current-menu-item > a, 
			nav.hauptnav ul ul li.current-menu-ancestor > a,
			nav.hauptnav ul ul li.current-menu-parent > a,
			nav.hauptnav ul ul li.current-post-parent > a,
			nav.hauptnav ul ul li.current-category-ancestor > a {
				color: var(--color-nav-color-link);
				}
			.navbar-transparent nav.hauptnav ul ul .current_page_item > a,
			.navbar-transparent nav.hauptnav ul ul .current_page_ancestor > a,
			.navbar-transparent nav.hauptnav ul ul li.current_page_item > a, 
			.navbar-transparent nav.hauptnav ul ul li.current-page-ancestor > a,
			.navbar-transparent nav.hauptnav ul ul li.current-menu-item > a, 
			.navbar-transparent nav.hauptnav ul ul li.current-menu-ancestor > a,
			.navbar-transparent nav.hauptnav ul ul li.current-menu-parent > a,
			.navbar-transparent nav.hauptnav ul ul li.current-post-parent > a,
			.navbar-transparent nav.hauptnav ul ul li.current-category-ancestor > a {
				color: var(--color-nav-color-link);
				}
			.header-change nav.hauptnav ul ul .current_page_item > a,
			.header-change nav.hauptnav ul ul .current_page_ancestor > a,
			.header-change nav.hauptnav ul ul li.current_page_item > a, 
			.header-change nav.hauptnav ul ul li.current-page-ancestor > a,
			.header-change nav.hauptnav ul ul li.current-menu-item > a, 
			.header-change nav.hauptnav ul ul li.current-menu-ancestor > a,
			.header-change nav.hauptnav ul ul li.current-menu-parent > a,
			.header-change nav.hauptnav ul ul li.current-post-parent > a,
			.header-change nav.hauptnav ul ul li.current-category-ancestor > a {
				color: var(--color-nav-color-link);
				}
			}


		@media (min-width:1210px) {
			/* --- Container --- */
			.alignbasic .nav > .nav-links {
				right: 0;
				}

			nav.hauptnav { height: 5.0rem; }
			.navbar-home nav.hauptnav { height: 7.5rem; }
			.header-change nav.hauptnav { height: 5.0rem; }

			nav.hauptnav ul a { 
				font-size: 1.0em; 
				padding-left: 1.4rem; 
				padding-right: 1.4rem;
				}
			nav.hauptnav ul ul a {
			    font-size: 1.0em;
				line-height: 2.1rem;
				padding-top: 0.5rem;
				padding-bottom: 0.6rem;
				}
			nav.hauptnav ul ul li:first-child a {
				padding-top: 1.0rem;
				}
			nav.hauptnav ul ul li:last-child a {
				padding-bottom: 1.0rem;
				}
			}

		@media (min-width:1760px) {
			/* --- Container --- */
			.alignwide .nav > .nav-links {
				right: 0;
				}
			.alignfull .nav > .nav-links {
				right: 0;
				}
			}




/* -------------------------------------------------------------------------- */
/*	Zusatz fuer das Hauptmenu > Wenn Submenu vorhanden
/* -------------------------------------------------------------------------- */

/* --- Menu-Item hat Submenu --- */

nav.hauptnav .menu-item-has-children > a:after {
	content: "";
	display: inline-block;
	width: 0.7em;
	height: 0.5em;
	margin-left: 4px;
	color: inherit;
	background-color: currentColor;
		-webkit-mask-image: url(../img/arrow-down.svg);
		-webkit-mask-size: 100% auto;
		-webkit-mask-repeat: no-repeat;
		-webkit-mask-position: center;
		mask-image: url(../img/arrow-down.svg);
		mask-size: 100% auto;
		mask-repeat: no-repeat;
		mask-position: center;
	opacity: 1;
	}




/* -------------------------------------------------------------------------- */
/*	Toggle Search
/* -------------------------------------------------------------------------- */

/* --- Such-Icon im Menu --- */

.menu-search .searchform input[type="search"] {
	margin-top: 0 !important;
	}


/* --- Such-Icon Mobile-Menu --- */

		@media (max-width:781px) {
			nav.hauptnav li.menu-search { 
				width: 80%; 
				max-width: 400px; 
				width: 100%;
				max-width: 100%;/*    >> wenn linksbuendig */
				margin: 1.5em auto 2rem auto; 
				}
			nav.hauptnav li.menu-search .searchform input[type="submit"] {
				border: 0px solid var(--color-second-light);
				}
			#searchBar { 
				position: relative; 
				display: block; 
				}
			#toggle-search { 
				position: relative; 
				}
			#toggle-search .search-icon { 
				display: none; 
				}
		}


/* --- Such-Icon Desktop-Menu --- */

		@media (min-width:782px) {
			#toggle-search {
				cursor: pointer;
				}
			#toggle-search {
				padding: 0 0 0 1.4rem;
				}
			.search-icon {
				width: 1.7rem;
				height: 4rem;
				margin-right: -0.4rem;
				margin-left: -0.4rem;
				display: block;
				background-color: var(--color-nav-start-txt);
					-webkit-mask-image: url(../img/icon-search-white.svg);
					-webkit-mask-size: auto 1.8em;
					-webkit-mask-repeat: no-repeat;
					-webkit-mask-position: center 42%;
					mask-image: url(../img/icon-search-white.svg);
					mask-size: auto 1.8em;
					mask-repeat: no-repeat;
					mask-position: center 50%;
				}
			.navbar-transparent #toggle-search .search-icon {
				background-color: var(--color-nav-start-img-txt);
				}
			.header-change #toggle-search .search-icon {
				background-color: var(--color-nav-scroll-txt);
				}
			#toggle-search:hover .search-icon {
				background-color: var(--color-nav-color-link);
				}
			#toggle-search.color-change .search-icon {
				background-color: var(--color-nav-color-link);
				}
			#searchBar {
				display: none;
				}
			}
		@media (max-width:1200px) {
			/* Desktop klein */	
			#toggle-search {
				padding: 0 0 0 1.2rem;
				}
			}