@charset "UTF-8";

@media all
{

	:root {
		--dunkelblau: #258;
		--tiefblau: #038;
		--hellblau: #69f;
		--zartblau: #8bf;
		--hintergrund: #234;
	}

	#main-nav {
/*		background-image: linear-gradient(to top right, var(--dunkelblau), var(--hellblau));
		background-image: linear-gradient(to right, var(--hellblau) 10%, var(--hintergrund) 80%);	*/
		background-color: var(--dunkelblau);
		border-top: 1px #333 solid;
		border-bottom: 1px #333 solid;
		width: 100%;
		margin: 1rem 0 2rem 0;
	}

	#main-nav ul {
		font-family: 'DejaVu Sans', Helvetica, sans-serif;
		width: 100%;
		margin: 0.4rem 0 0 0;
		box-shadow: none;
	}

	#main-nav ul li {
		background-image: linear-gradient(to top right, var(--dunkelblau), var(--hellblau));
						font-size: 1.5rem;
						line-height: 2.0;
		font-weight: normal;
		list-style-type: none;
		border-left: 0;
		border-right: 1px var(--dunkelblau) solid;
		width: 20rem;
	}

	#main-nav ul li a,
	#main-nav ul li strong {
		background: transparent;
		color: #fff;
		display: block;
		padding: 0.5rem 0 0.6rem 2em;
		text-decoration: none;
	}
	#main-nav ul li a:visited {
		color: #fff;
	}
	#main-nav ul li a:focus,
	#main-nav ul li a:hover,
	#main-nav ul li a:active  { 
		background-image: linear-gradient(to top right, var(--hellblau), var(--zartblau));
		color: var(--hintergrund);
		text-decoration: none;
	}
	#main-nav ul li.current  { 
		background-image: linear-gradient(to bottom, var(--dunkelblau), var(--hintergrund));
		color: #006;
		text-decoration: none;
	}
	#main-nav ul li.active {
		background-image: linear-gradient(to top right, var(--tiefblau) 20%, var(--dunkelblau) 20%);
		border-left: 1px #36a solid;
		border-right: 1px #69d solid;
	}
	#main-nav ul li.active strong,
	#main-nav ul li.active a:focus,
	#main-nav ul li.active a:hover,
	#main-nav ul li.active a:active { 
		background: transparent; color: #fff; text-decoration: none; 
	}

	#main-nav button {
		background-image: linear-gradient(to right, var(--hellblau) 40%, var(--dunkelblau) 90%);
		color: black;
		border: none;
		text-align: left;
		font-size: 1.6rem;
		padding: 0.4rem;
	}

}


/* ******************************************************* */

@media (min-width: 80rem)
{

	#main-nav ul {
		margin: 0;
		box-shadow: none;
	}

	#main-nav ul li {
/*		background-image: linear-gradient(to top right, var(--dunkelblau), var(--hellblau));	*/
		font-size: 1.1rem;
		font-weight: normal;
		line-height: 1.6;
/*		list-style-type: none;
		border-left: 0;
		border-right: 1px var(--dunkelblau) solid;
*/
		width: 15rem;
	}

	#main-nav ul li a,
	#main-nav ul li strong {
		padding: 0.5rem 0 0.6rem 4em;
	}

}