html {
	--hintergrundfarbe: #f0f8ff; 
	--textfarbe: #000040; 
	--linkfarbe: #5050ff;
	--linkfarbe_visited: #4040aa;
	--linkfarbe_active: var(--linkfarbe);
	--buttonfarbe: #fff;
	--rahmenfarbe: #80a0ff;
	--navitextfarbe: #fff;
	--navicurrentfarbe: #000;
	--hintergrundfarbesrc: #e0e0ff;
	--farbesrc: #fff;
	background-color:var(--hintergrundfarbe); 
	font-size: 15px;
}
body {
	font-size: max(1rem, min(0.7rem + 0.7vw, 1.2rem));
	--zeilenhoehe: 1.4;
	@media (width >= 40em) {
		--zeilenhoehe: 1.5;
	}
	line-height: var(--zeilenhoehe);
	margin:0px;
	padding:0px;
}
/*  *,*::after,*::before { font-family:Arial,sans-serif; }  */
*,*::after,*::before { font-family: Verdana, sans-serif; }
p { text-wrap: pretty; }
th { text-wrap: balance; }
h1,h2,h3,h4 { font-weight:bold; text-wrap: balance; }
body        { color:var(--textfarbe); 
              margin:0px; padding: 3em 1em .5em 30px;
              background-image: linear-gradient(90deg, var(--rahmenfarbe) 24px, var(--hintergrundfarbe) 26px); }
/*p,ul,ol,li,td,th,address,blockquote
            { color:var(--textfarbe); background-color:var(--hintetrgrundfarbe) }*/
.Drag_n_Drop { background-color:var(--hintergrundfarbe) }
.Drag_Bar    { background-color:var(--rahmenfarbe) }
input,select,textarea
            { font-size: .8em; line-height:1.3em; color:var(--textfarbe); background-color:#ffffff }
	    input[type="number"] {
    font-size: 12px; /* Schriftgröße */
    -moz-appearance: textfield; /* Entfernt Spinner in Firefox */
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none; /* Entfernt Spinner in Webkit-basierten Browsern */
    margin: 0;
}

a:link      { color: var(--linkfarbe) }
a:visited   { color: var(--linkfarbe_visited) }
a:active    { color: var(--linkfarbe_active) }
button      { color:var(--buttonfarbe); background-color:var(--rahmenfarbe);
							text-align:center;
              font-size: 1.0em; /*font-family:"Times New Roman",serif;*/
              cursor:pointer }
input       { text-align:left }
h1          { font-size: 1.4em; padding-top:1em; margin-top:0px }
h2          { font-size: 1.25em; padding-top:1em; padding-bottom:0; margin-top:0px }
h3          { font-size: 1.1em; padding-top:0.5em; padding-bottom:0; margin-top:0px }
h4          { font-size: 1.0em }
.kleiner    { font-size: 0.8em }
hr          { height:1px;color:var(--rahmenfarbe) }
.tabelle { 
	border: 1px solid var(--rahmenfarbe); border-spacing: 0px; border-collapse: collapse;
	td, th { border:1px solid var(--rahmenfarbe); border-spacing: 0px; border-collapse: collapse; padding: 3px }
}
.src        { border:1px solid var(--rahmenfarbe); color:var(--farbesrc); background-color:var(--hintergrundfarbesrc);
              margin-left:10px; margin-right:10px; padding:10px; }
summary     { cursor: pointer }

/* Skip-Link */
#skip-link { 
	position: absolute; 
	left: 0; top: 0; background: black; 
	color: white; padding: 0.25em; 
	transform: translateY(-150%);
	transition: 0.2s transform; 
	z-index: 1001; 
	&:focus { 
		transform: translateY(0); 
	}			
} 

#sitenav {
	& { 
	/* Anpassung der Navi an das Seitenlayout */
		top: 1em; 
		left: 2em;
		z-index: 1000;
		&.wide { 
			top: 0; 
			left: 22px; 
			right: 0;
		}
	/* Farben */
		*, a { 
			background-color: var(--rahmenfarbe); 
			color: var(--navitextfarbe);
		}
	}

	/* Für AT */
	.visually-hidden {
		position: absolute !important; 
		clip: rect(1px, 1px, 1px, 1px) !important; 
		padding: 0 !important; 
		border: 0 !important; 
		height: 1px !important; 
		width: 1px !important; 
		overflow: hidden !important; 
		white-space: nowrap !important; 
	}

	/* Positionierung */
	&,
	& ul { 
		position: absolute; 
	}

	/* Regeln für schmale und breite Displays */
	& ul { 
		margin:0;
		padding-top: .2em; 
		padding-left: 1em; 
		padding-right: 1em; 
	}
	& > details { 
		padding: .2em; 
	}
	& > details > ul { 
		margin-left: -.5em; 
		margin-top: .3em; 
	}
	& ul ul { 
		margin-left: calc(100% - 1.2em);
		margin-top: -3.1em; 
		padding-left: .1em; 
	}
	& li a,
	& li summary { 
		display: inline-block; 
		padding: .5em; 
		margin: .3em; 
		line-height: 1.4em; 
		max-height: 1.4em; 
	}
	& li { 
		padding: 0em; 
		white-space: nowrap; 
		vertical-align: middle; 
	}

	/* Anpassungen an breite Displays. Die Klasse wide wird vom Script gesetzt, wenn der Platz reicht. */
	&.wide > details { 
		padding: 0; 
	} 
	&.wide > details > ul { 
		display: flex;
		flex-wrap: wrap; 
		width: 100%; 
		box-sizing: border-box; 
	}
	&.wide ul { 
		margin:0; 
		padding-top: .2em; 
		padding-left: 0; 
		padding-right: 0; 
	}
	&.wide ul ul { 
		margin-left: -.5em; 
		margin-top: -.1em; 
		padding-left: .5em; 
		padding-right: .5em; 
	}
	&.wide ul ul ul { 
		margin-left: calc(100% - 1.2em); 
		margin-top: -3.1em; 
		padding-left: .1em; 
	}

	/* Originalsymbole vor den Summary entfernen und eigene Symbole definieren */
	& summary::-webkit-details-marker { 
		display: none; 
	}
	& summary { 
		list-style-type:  none; 
	}
	& *::before,
	& *::after { 
		/*font-family: arial_unicode_ms; */
		vertical-align: top; 
		display: inline-block;
	}
	& details *::after {
		text-align: end;
		width: 1.5em;
	}
	& details *::before {
		text-align: center;
		width: 1.2em;
	}
	& ul details:not([open]) > summary::after { 
		content: '►'; 
	}
	& ul details[open] > summary::after { 
		content: '◄'; 
	}
	& > details:not([open]) > summary::before { 
		content: '☰';
	} 
	& > details[open] > summary::before { 
		content: '×';
	} 
	&.wide details[open] details:not([open]) summary::after { 
		content: '▼'; 
	}
	&.wide details[open] details[open] summary::after { 
		content: '▲'; 
	}
	&.wide details[open] details[open] details:not([open]) summary::after { 
		content: '►'; 
	}
	&.wide details[open] details[open] details[open] summary::after { 
		content: '◄'; 
		}

	/* Link zur aktuellen Seite */
	& li[aria-current] a[href='#']::before,
	& li[aria-current] a[tabindex]::before { 
		content: '►';
		text-align: start;
	}
	&.withjs > details > ul > li[aria-current] > details > summary { 
		border-left: 2px solid var(--navicurrentfarbe); 
	}
	&.withjs > details > ul > li[aria-current] > details > ul > li[aria-current] > details > summary { 
		border-left: 2px solid var(--navicurrentfarbe); 
	}
	&.wide > details > ul > li[aria-current] > details > summary { 
		border-left: none; 
	}
	&.wide > details > ul > li[aria-current] { 
		border-bottom: 2px solid var(--navicurrentfarbe); 
	}

	/* Sprachicon */
	& .langselect img { 
		height: 2em; 
		transform: translateY(-.4em); 
	}

	/* Rahmen etc. */
	& summary { 
		cursor: pointer; 
	}
	& ul { 
		list-style-type: none; 
		border-radius: .5em; 
	}
	&.wide ul ul { 
		border-radius: 0 0 .5em .5em;
	}
	& > details { 
		border: thin solid var(--rahmenfarbe); 
		border-radius: .2em; 
	}
	&.wide > details { 
		border: none; 
		border-radius: 0; 
	} 
	&.wide > details > ul { 
		border-radius: 0; 
	}
	& li a { 
		text-decoration: none; 
	}
	& li a,
	& li summary { 
		outline: none; 
	}
	& li a:focus,
	& li summary:focus { 
		outline: thin solid var(--linkfarbe); 
	}
	& li a:focus-visible, 
	& li summary:focus-visible { 
		outline: thin solid var(--linkfarbe); 
	}
	& li a:focus:not(:focus-visible), 
	& li summary:focus:not(:focus-visible) { 
		outline: none; 
	}
}