:root {
	--black: #000000;
	--white: #FFFFFF;
	--hfoedlightblue: #008CD2;
	--hfoeddarkblue: #0070A6;
	--hfoedlightgrey: #f3f3f3;
	--hfoedlightgreyborder: #e6e6e6;
}

/* ---------- viewport all ---------- */
@media all {
	/* body */
	body { background: url(../img/hintergrund.png) top left repeat-x; }

	/* allgemein */
	a:focus {
		border-color: var(--hfoedlightblue)!important;
		background-color: var(--hfoedlightblue)!important;
	}
	p a:active, p a:focus, p a:hover { color: var(--hfoedlightblue); }
	#main [tabindex]:focus,
	#main a:focus,
	#main button:focus,
	#main label:focus { background-color: var(--hfoeddarkblue)!important; }

	/* header */
	.modHeader div.logo { margin-bottom: 40px; }

	.modHeader div.header-navigation { height: 40px; }
	.modHeader div.header-navigation ul li a {
		border-bottom: 0;
		width: auto;
		height: 40px;
		padding: .6em;
		border-color: var(--hfoedlightgreyborder);
	}
	.modHeader div.header-navigation ul li a[data-role=home] {
		width: auto;
		padding-left: .4em;
		padding-right: .4em;
		position: relative;
	}
	.modHeader div.header-navigation ul li a[data-role=home]::before,
	.modHeader div.header-navigation ul li a[data-role=home]::after {
		content: '';
		width: 37px;
		height: 100%;
		background-repeat: no-repeat;
		background-size: 70%;
		background-position: center;
		display: inline-block;
		margin-left: 0;
		margin-right: 0;
	}
	.modHeader div.header-navigation ul li a[data-role=home]::after {
		position: absolute;
		top: 0;
		left: .4em;
		opacity: 0;
	}
	.modHeader div.header-navigation ul li a[data-role=home]::before { background-image: url(../img/house-solid_black.svg); }
	.modHeader div.header-navigation ul li a[data-role=home]::after { background-image: url(../img/house-solid_white.svg); }
	.modHeader div.header-navigation ul li a[data-role=home]:focus::after { opacity: 1; }

	.modHeader div.header-navigation ul li.accessibility a {
		background: var(--hfoeddarkblue);
		width: 40px;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.modHeader div.header-navigation ul li.accessibility a[class*=" icon-"],
	.modHeader div.header-navigation ul li.accessibility a[class^=icon-] { position: relative; }
	.modHeader div.header-navigation ul li.accessibility a[class*=" icon-"]::before,
	.modHeader div.header-navigation ul li.accessibility a[class*=" icon-"]::after,
	.modHeader div.header-navigation ul li.accessibility a[class^=icon-]::before,
	.modHeader div.header-navigation ul li.accessibility a[class^=icon-]::after {
		content: '';
		display: inline-block;
		font-family: Arial,Verdana,Helvetica,sans-serif;
		width: 100%;
		height: 100%;
		margin: 0;
		background-repeat: no-repeat;
		background-size: contain;
		background-position: center;
	}
	.modHeader div.header-navigation ul li.accessibility a[class*=" icon-"]::after,
	.modHeader div.header-navigation ul li.accessibility a[class^=icon-]::after {
		position: absolute;
		top: 0.6em;
		left: 0.6em;
		width: calc(100% - 1.2em);
		height: calc(100% - 1.2em);
		opacity: 0;
	}

	.modHeader div.header-navigation ul li.accessibility a.icon-fontsize:before {
		content: 'Aa';
		width: auto;
		height: auto;
	}
	.modHeader div.header-navigation ul li.accessibility a.icon-contrast::before { background-image: url(../img/circle-half-stroke-regular_white.svg); }
	.modHeader div.header-navigation ul li.accessibility a.icon-contrast::after { background-image: url(../img/circle-half-stroke-regular_black.svg); }
	.modHeader div.header-navigation ul li.accessibility a.icon-text:before { background-image: url(../img/file-lines-light.svg); }
	.modHeader div.header-navigation ul li.accessibility a.icon-hearing-impaired:before { background-image: url(../img/ear-deaf-regular.svg); }

	.modHeader form .ym-searchfield {
		height: 40px;
		padding: 0 20px;
		background-color: var(--hfoedlightgrey);
		border-color: var(--hfoedlightgreyborder);
	}
	.modHeader form .ym-searchbutton::before,
	.modHeader form .ym-searchbutton::after {
		content: '';
		background-repeat: no-repeat;
		background-size: contain;
		background-position: center;
		width: 100%;
		height: 100%;
		margin: 0;
	}
	.modHeader form .ym-searchbutton::after {
		position: absolute;
		top: .25em;
		left: .25em;
		width: calc(100% - .5em);
		height: calc(100% - .5em);
		opacity: 0;
	}
	.modHeader form .ym-searchbutton::before { background-image: url(../img/search_black.svg); }
	.modHeader form .ym-searchbutton::after { background-image: url(../img/search_white.svg); }
	.modHeader form button.ym-searchbutton:focus:not(.accessibility)::before { opacity: 0; }
	.modHeader form button.ym-searchbutton:focus:not(.accessibility)::after { opacity: 1; }

	/* Banner */
	.modHeader section#modHeaderStage ul li figure figcaption { background: var(--hfoeddarkblue); }
	.modHeader section#modHeaderStage ul li figure>div div.controls button { background: var(--hfoeddarkblue); }
	.modHeader section#modHeaderStage ul li figure>div div.controls button.active {
		background: var(--hfoedlightgrey);
		color: var(--hfoeddarkblue);
	}
	.modHeader section#modHeaderStage ul li figure>div div.controls button.play span.progress span.indicator { background: var(--hfoedlightblue); }

	/* Navigation 1. Ebene */
	.modMainNavigation ul.nav-level-1 > li {
		width: auto!important;
		flex-grow: 1;
	}
	.modMainNavigation ul.nav-level-1 > li > a {
		background: var(--white);
		color: var(--black);
		border: none;
		height: auto;
		padding-bottom: .71428571em;
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 3.86em;
		/*min-height: 5.49em;*/
	}

	.modMainNavigation ul.nav-level-1>li.active>a,
	.modMainNavigation ul.nav-level-1>li>a:active,
	.modMainNavigation ul.nav-level-1>li>a:focus,
	.modMainNavigation ul.nav-level-1>li>a:hover {
		background: var(--hfoedlightblue);
		color: var(--white);
	}
	.modHeader div.header-navigation .modBurgerNavigation div.burger-navigation-content [data-role=main-navigation] ul.nav-level-1>li>a { background: var(--hfoeddarkblue); }
	.modHeader div.header-navigation .modBurgerNavigation div.burger-navigation-content [data-role=main-navigation] ul.nav-level-1>li>a:active,
	.modHeader div.header-navigation .modBurgerNavigation div.burger-navigation-content [data-role=main-navigation] ul.nav-level-1>li>a:focus,
	.modHeader div.header-navigation .modBurgerNavigation div.burger-navigation-content [data-role=main-navigation] ul.nav-level-1>li>a:hover,
	.modHeader div.header-navigation .modBurgerNavigation div.burger-navigation-content [data-role=main-navigation] ul.nav-level-1>li.active:not(.open)>a,
	.modHeader div.header-navigation .modBurgerNavigation div.burger-navigation-content [data-role=main-navigation] ul.nav-level-1>li.open:not(.active)>a { background: var(--hfoedlightblue); }

	/* Navigation 2. Ebene */
	.modMainNavigation ul.nav-level-2>li a {
		border: none;
		color: var(--black);
		padding-top: 1em;
		padding-bottom: 1em;
		position: relative;
	}
	.modMainNavigation ul.nav-level-2>li.active>a,
	.modMainNavigation ul.nav-level-2>li a:active,
	.modMainNavigation ul.nav-level-2>li a:focus,
	.modMainNavigation ul.nav-level-2>li a:hover {
		background: transparent;
		color: var(--black);
		position: relative;
	}
	.modMainNavigation ul.nav-level-2>li a::after {
		content: '';
		display: block;
		width: 100%;
		height: 3px;
		background-color: var(--hfoedlightblue);
		position: absolute;
		bottom: 0;
		left: 0;
		opacity: 0;
	}
	.modMainNavigation ul.nav-level-2>li.active>a::after,
	.modMainNavigation ul.nav-level-2>li a:active::after,
	.modMainNavigation ul.nav-level-2>li a:focus::after,
	.modMainNavigation ul.nav-level-2>li a:hover::after { opacity: 1; }

	/* Navigation 3. Ebene */
	.modSidebarNavigation ul.nav-level-1>li>a {
		padding-left: 0;
		margin-left: 30px;
		color: var(--black);
		padding-top: 1em;
		padding-bottom: 1em;
		position: relative;
		border-bottom: 1px solid var(--hfoedlightgreyborder);
	}
	.modSidebarNavigation ul.nav-level-1>li>a::before {
		content: '';
		display: block;
		width: 0;
		height: 0;
		border-left: 14px solid var(--hfoedlightblue);
		border-top: 8px solid transparent;
		border-bottom: 8px solid transparent;
		position: absolute;
		top: 50%;
		left: -25px;
		transform: translateY(-50%);
		opacity: 0;
	}
	.modSidebarNavigation ul.nav-level-1>li>a::after {
		content: '';
		display: block;
		width: 30px;
		height: 100%;
		background-color: transparent;
		position: absolute;
		top: 0;
		left: -30px;
	}
	#main { margin-top: 10px; }
	#main .modSidebarNavigation ul.nav-level-1>li>a:focus,
	#main .modSidebarNavigation ul.nav-level-1>li>a:focus::after {
		/*background-color: var(--hfoeddarkblue)!important;*/
		/*border: none!important;*/
		background-color: transparent!important;
		border-color: var(--hfoedlightgreyborder)!important;
		color: var(--hfoedlightblue)!important;
	}
	.modSidebarNavigation ul.nav-level-1>li.active>a {
		color: var(--black);
		font-weight: initial;
	}
	.modSidebarNavigation ul.nav-level-1>li.active>a::before { opacity: 1; }

	/* Main */
	h1 { color: var(--hfoedlightblue); }

	/* Footer */
	.modFooter { background: var(--hfoeddarkblue); }
	.modFooter ul {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 40px 80px;
	}
	.modFooter ul li {
		padding: 0;
		border-right: none;
		text-align: center;
	}
	.modFooter ul li[title]{ flex-basis: 100%; }
}

/* Contrast Mode */
.contrastMode .modHeader div.header-navigation ul li a[data-role=home]:focus::after { opacity: 0; }
.contrastMode .modHeader div.header-navigation ul li.accessibility a[class*=" icon-"]:hover::after,
.contrastMode .modHeader div.header-navigation ul li.accessibility a[class*=" icon-"]:focus::after,
.contrastMode .modHeader div.header-navigation ul li.accessibility a[class^=icon-]:hover::after,
.contrastMode .modHeader div.header-navigation ul li.accessibility a[class^=icon-]:focus::after { opacity: 1; }
.contrastMode .modMainNavigation ul.nav-level-1>li>a { color: var(--white); }

/* ---------- viewport tablet ---------- */
@media only screen and (max-width : 1024px) {
	.modMainNavigation ul.nav-level-1 > li > a {
		height: 100%;
		hyphens: auto;
		min-width: 75px;
	}
	.modFooter ul { gap: 0 40px; }
	.modFooter ul li:first-child { margin-bottom: 20px; }
}

/* ---------- viewport smartphone ---------- */
@media only screen and (max-width : 766px) {
	body { background: none; }
	.modContent ul li { width: calc(100% - 1em); }
	.modHeader form .ym-searchfield {
		padding: 0 50px 0 10px;
	}
	.modFooter ul {
		justify-content: flex-start;
		gap: 5px 20px;
	}
	.modFooter ul li:not(:last-child) {
		padding-right: 20px;
		border-right: 1px solid var(--white);
	}
	.modFooter ul li[title] {
		text-align: left;
		border-right: none;
	}

}
@media only screen and (max-width : 418px) {
	.modFooter ul li:nth-child(2),
	.modFooter ul li:nth-child(4) { border-right: none; }
}


/* ---------- viewport desktop ---------- */
@media screen {}

/* ---------- viewport tablet ---------- */
@media only screen and (min-width : 767px) and (max-width : 1024px) {}

/* ---------- viewport smartphone ---------- */
@media only screen and (min-width : 20px) and (max-width : 766px) {}