@media only screen {
html {
	background: url("stifte.png") no-repeat bottom, linear-gradient(#99ccdd, white), #9accd7;
	background-size: contain;
	color: midnightblue;
	min-height: 100vh;
}

body {
	display: grid;
	margin: 10px auto;
	font-family: sans-serif;
	color: #333333;
	background-color: rgba(255, 255, 255, .6);
}
/* IE */
body {display: -ms-grid; -ms-grid-columns: auto; -ms-grid-rows: auto auto auto auto auto;}
header {-ms-grid-row: 1;}
nav {-ms-grid-row: 2;}
main {-ms-grid-row: 3; display:block;}
aside {-ms-grid-row: 4;}
footer {-ms-grid-row: 5;}
/* IE Ende */

/* Form */
header,
nav,
main,
article,
section,
aside,
footer {
	border-radius: 0px 0.5em 0.5em;
	border: 1px solid;
	padding: 10px;
	margin: 10px;
}
/* Farben */
header {
	background: url("bottom.png") no-repeat right bottom #d9ecf1;
	background-size:contain;
/*	border-color: #809fff;*/
	border-color: slateblue;
	color: slateblue; /* #333366 #809fff; */
}
header h1 {
	margin: 0em;
	font-size: 3em;
}
header h2 {
	margin: 0em;
	font-size: 2em;
}
h1,h2 {
	color: slateblue;
}
main {background: #fffbf0;border-color: #e7c157;}
section {background: #F1F3F4;border-color: slateblue;}
nav {background: #ffeeaa;border-color: #f07740;}
article {background: #ffede0;border-color: #df6c20;}
aside {background: #ebf5d7;border-color: #8db243;}
footer {
	background: url("bottom.png") no-repeat center bottom #d0dadb;
	background-size:contain;
	border-color: #3b4544;
}
dt {
	font-weight: bold;
}
dd {
	position: relative;
	top: -1.1em;
	left: 2em;
}
img {
	width: 100%;
/*	border: 1px solid;
	border-color: #df6c20;*/
}
	aside.zusatz img  {
		float: none;
		width: 50%;
	}

/* Logo */
#logo {
	border: 0px;
}

header img,
#logo {
	width: 180px;
	height:73px;
	margin: 5em auto 0em;
	bottom: 0px;
	object-fit: contain;
	object-position: right bottom;
	transition: all .25s ease;
}
header h3 {
	margin-bottom: 0px;
}

#logo {
	display: none;
}
/* Kalenderblatt */
#kalender {
	float: none;
	margin: 0em;
	width: 100%;
	border: 0px;
}

/* Navigation allgemein schmal */
nav {
	z-index: 1000;
}
#sitenav *{
/*	background-color: lightgray;*/
	color: black
}
#sitenav a,
#sitenav li summary {
	display: block;
	border: 1px solid darkblue;
	border-radius: 10px;
	box-shadow: 0 5px 10px white inset;
	color: gold;
	background-color: darkblue;
	transition: all .25s ease-in;
}
#sitenav li li a{
	border: 1px solid royalblue;
	background-color: royalblue;	
}

#sitenav {
/*	top: 1em;
	left: 2em;*/
}

#sitenav ul {
	list-style-type: none;
	margin: 0;
	padding-top: .2em;
	padding-left: .5em;
	padding-right: .5em;
	border-radius: .5em;
}

#sitenav ul ul {
/*	margin-left: 7em;
	margin-top: -3.1em;
	padding-left: .1em;*/
}

#sitenav li a {
/*	display: inline-block;*/
	margin-top: .1em;
	margin-bottom: .1em;
}

#sitenav li a,
#sitenav li summary {
	padding: .5em .2em;
	margin: .3em 0em;
	line-height: 1.4em;
	outline: none;
}

#sitenav li a:hover,
#sitenav li summary:hover,
#sitenav li a:focus,
#sitenav li summary:focus {
	color: darkblue;
	background-color: gold;
}

#sitenav li a {
	text-decoration: none;
}

#sitenav li {
	padding: 0em;
	white-space: nowrap;
	vertical-align: top;
}

#sitenav li[aria-current] > a[href='#']::before {
	content: "► ";
	color: red;
	font-family: arial_unicode_ms
}
#sitenav li[aria-current] details:not([open]) summary::after {
	content: "► ";
	color: red;
	font-family: arial_unicode_ms
}

#sitenav ul details summary::after {
	font-family: arial_unicode_ms;
}

#sitenav ul details:not([open]) summary::after {
	content: ' ►';
}

#sitenav ul details[open] summary::after {
	content: ' ◄';
}

#sitenav ul summary::before {
	content: "";
	width: 0;
}

#sitenav > details:not([open]) > summary::before {
	content: "☰";
	font-size: 0.9em;
}

#sitenav > details[open] > summary::before {
	content: "×";
	font-size: 1.2em;
}

#sitenav > details {
	display: block;
	border: 1px solid black;
	border-radius: .2em;
	padding: .2em;
}

#sitenav > details > ul {
	margin-top: .3em;
}

#sitenav summary {
	cursor: pointer;
}

#sitenav summary::-webkit-details-marker {
	display: none;
}

#sitenav summary {
	list-style-type: none;
}
}
@media only screen and (min-width: 25em) {
	img {
		width: 50%;
		float: right;
		margin: 0 0 1em 1em;
	}

}
@media only screen and (min-width: 40em) {
	img {
		width: 25%;
	}
	aside.zusatz img  {
		float: none;
		width: 50%;
	}
	#logo {
		display: block;
	}
/* Navigation */
}

/* Etwas Platz ausnutzen */
@media only screen and (min-width: 40em) and (max-width: 49.99em){
	aside {display:grid;grid-template-columns: 1fr 1fr;}
	aside section {grid-column: 1 / span 2;}
	aside section.links {grid-column: 1;}
	aside section.rechts {grid-column: 2;}
/* für IE */
	aside {display: -ms-grid;-ms-grid-columns: 1fr 1fr;-ms-grid-rows: auto auto;}
	aside section {-ms-grid-row: 2; -ms-grid-column: 1; -ms-grid-column-span: 2;}
	aside section.links {-ms-grid-row: 1; -ms-grid-column: 1; -ms-grid-column-span: 1;}
	aside section.rechts {-ms-grid-row: 1; -ms-grid-column: 2;  -ms-grid-column-span: 1;}
}

@media only screen and (min-width: 50em) { 
	body {
		grid-template-columns: 1fr 1fr;
	}
/* für IE*/
	body { -ms-grid-columns: 1fr 1fr; -ms-grid-rows: auto auto auto auto;}
	header {-ms-grid-row: 1; -ms-grid-column: 1; -ms-grid-column-span: 2;}
	nav {-ms-grid-row: 2; -ms-grid-column: 1; -ms-grid-column-span: 2;}
	main {-ms-grid-row: 3; -ms-grid-column: 1; -ms-grid-column-span: 1;}
	aside {-ms-grid-row: 3; -ms-grid-column: 2; -ms-grid-column-span: 1;}
	footer {-ms-grid-row: 4; -ms-grid-column: 1;  -ms-grid-column-span: 2;}
/* IE Ende*/
	nav{
		grid-column: 1 / -1;
	}
	img {
		width: 20%;
	}
	aside.zusatz img  {
		float: none;
		width: 50%;
	}
/* Navigation */

/* Einstellungen für breitere Viewports */

#sitenav.large {
/*	top: 0;
	left: 0;
	right: 0;*/
}

#sitenav.large {
	padding: 0.5em 0.2em;
}

#sitenav.large > details {
	border: none;
	border-radius: 0;
	padding: 0;
}

#sitenav.large > details > ul,
#sitenav.large > details > ul > li {
	display: inline-block;
}

#sitenav.large ul details:not([open]) summary::after {
	content: ' ▼';
}

#sitenav.large ul details[open] summary::after {
	content: ' ▲';
}

#sitenav.large > details > ul {
	width: 100%;
	box-sizing: border-box;
}

#sitenav.large > details > ul {
	margin-left: 0;
	margin-top: 0;
	border-radius: 0;
}

#sitenav.large ul ul {
	margin-left: -.5em;
	margin-top: -.1em;
	padding-left: .5em;
	border-radius: 0 0 .5em .5em;
}

}

@media only screen and (min-width: 50em) and (max-width: 69.99em){
	nav {
		height: 3em;
	}
	aside.zusatz img  {
		float: none;
		width: 50%;
	}
}

@media only screen and (min-width: 52em) {
	#logo {
		display: inline-block;
		margin: 10px 10px 0px;
		width: 360px;
		height:146px;
		object-fit: none;
		object-position: right bottom;
		transition: all .25s ease;
	}
	aside.zusatz img  {
		float: none;
		width: 50%;
	}
}

@media only screen and (min-width: 70em) {
	body {
		max-width: 80em;
		grid-template-columns: auto 1fr 1fr;
	}
/* für IE*/
	body { -ms-grid-columns: auto 1fr 1fr; -ms-grid-rows: auto auto auto;}
	header {-ms-grid-row: 1; -ms-grid-column: 1; -ms-grid-column-span: 3;}
	nav {-ms-grid-row: 2; -ms-grid-column: 1; -ms-grid-column-span: 1;}
	main {-ms-grid-row: 2; -ms-grid-column: 2; -ms-grid-column-span: 1;}
	aside {-ms-grid-row: 2; -ms-grid-column: 3; -ms-grid-column-span: 1;}
	footer {-ms-grid-row: 3; -ms-grid-column: 1; -ms-grid-column-span: 3;}
/* IE Ende*/

	nav { grid-column: 1; }
	aside{ grid-column: 3 / -1; }

	aside.zusatz img  {
		float: none;
		width: 50%;
	}

/* Navigation wieder schmaler */
#sitenav.large > details > ul,
#sitenav.large > details > ul > li {
	display: block;
}
#sitenav.large ul details:not([open]) summary::after {
	content: ' ►';
}
#sitenav.large ul details[open] summary::after {
	content: ' ◄';
}
}

header{
	grid-row: 1;
	grid-column: 1 / -1;
}

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


/* Style für Drucker */
@media only print {
body {
	display: grid;
	margin: 10px auto;
	font-family: serif;
	color: #000000;
}
nav {
	display: none;
}

/* IE */
body {display: -ms-grid; -ms-grid-columns: auto; -ms-grid-rows: auto auto auto auto;}
header {-ms-grid-row: 1;}
main {-ms-grid-row: 2; display:block;}
aside {-ms-grid-row: 3;}
footer {-ms-grid-row: 4;}
/* IE Ende */

header h1,
header h2,
header h3 {
	margin: 0em;
}

header,
aside.zusatz,
footer {
	border-radius: 0px 0.5em;
	border: 1px solid;
	padding: 10px;
}
footer {
	margin: 2px 0px 0px;
}

img,
#logo {
	float: right;
	margin: 0em 1em;
}
img {
	width: minmax(20em,100%);	
}
#logo {
	width: 15em;
}
#skip-link {
	display: none;
}
a[href]::after {
  content: " <" attr(href) ">";
  color: #888;
  background-color: inherit;
  font-style: italic;
  font-size: 80%;
}
/* Nebeninfos verteilen */
	aside.zusatz {display:grid;grid-template-columns: 1fr 1fr;}
	aside.zusatz section {grid-column: 1 / span 2;}
	aside.zusatz section.links {grid-column: 1;}
	aside.zusatz section.rechts {grid-column: 2;}
/* für IE */
	aside.zusatz {display: -ms-grid;-ms-grid-columns: 1fr 1fr;-ms-grid-rows: auto auto;}
	aside.zusatz section {-ms-grid-row: 2; -ms-grid-column: 1; -ms-grid-column-span: 2;}
	aside.zusatz section.links {-ms-grid-row: 1; -ms-grid-column: 1; -ms-grid-column-span: 1;}
	aside.zusatz section.rechts {-ms-grid-row: 1; -ms-grid-column: 2;  -ms-grid-column-span: 1;}

/* aside für den Druck ausblenden */
aside.zusatz {
	display: none;
}
/**/
footer:after {
  content: "\ Alle Rechte vorbehalten. www.sachsen.schule/~foerderzentrum-freiberg";
  color: #999 !important;
  font-size: 0.85em;
  border-top: 1px solid #999;
  }
}
.wichtig {
	color: red;
}
.rund {
	border-radius: 50%;
}
div.biwapp-meldungen-header img {
	width: 40px;
}
.erkennbar {
	width: 100%;
}
thead th {
	background-color: gold;
	text-align: left;
	padding: 0.2em 0.1em;
}
tbody tr:nth-child(even) {
	background-color: #ffeeaa;
}
main li,
aside li {
	margin-bottom: 0.5em;
}
main td {
	padding: 0.2em 0.1em;
}
/* Nach-oben-Pfeil */
/* NACH OBEN NEU
   QUELLCODE IN top.js*/
.obenkreis {
  width: 40px;
  height: 40px;
  border-radius: 50px;
  background-color: rgba(51,51,51,0.6);	/* Hintergrundfarbe (Kreis) */
  animation: anitop 1s;
}
@keyframes anitop {
  0%{opacity:0}
	100%{opacity:1}
  }
.obenpfeil-1, .obenpfeil-2 {
  border: solid #fff;						/* Farbe Pfeile */
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 5px;
    transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
	position:absolute;
   left:50%;
   margin-left:-6px;
	transition: all 0.2s ease;
	}
.obenpfeil-1 {
	top:15px;
	}
.obenpfeil-2 {
	top:22px;
	}
.obenkreis:hover .obenpfeil-2 {
	top:8px;
}
#back-top2 {
position: fixed;
bottom: 5%;
right:5%;
z-index: 1000;
}
#back-top2  span{
display: block;
}
@media (max-width: 1680px) {
#back-top2 {
bottom: 5px;
right:5px;
}}

/* Ende Nach-oben-Pfeil */