body {
	background-color: black;
	color: white;
	font-size: 1em;
	font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    display: flex;
    flex-direction: column;
	min-height: 98vh;
}

footer, article, section {
	display: flex;
	flex-flow: row wrap;
}

section, .counter, button {
	margin: 0.5em;
	padding: 0.5em;
    width: fit-content;
    height: fit-content;
}

img, .feld1, .feld2, .inhalt, .counter, input, .abakus, .werkzeug {
	border: black 0.1em solid;
	border-radius: 0.3em;
}

.inhalt {
	box-shadow: 0em 0em 0.3em 0.1em gray;
}

header {
    display: flex;
    flex-direction: column;
	border-bottom: 0.1em solid lightgray;
}

main {
    display: flex;
	flex: 1 1 100%;
    flex-direction: column;
}

footer {
	background-color: black;
}

article {
	justify-content: center;
	align-items: center;
}

section {
	justify-content: center;
	align-items: center;
}

.feld1 {
	background-color: #eeeeee;
    color: black;
}

.feld2 {
	background-color: burlywood;
}

a {
	color: white;
	text-decoration: none;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

a.footer {
	padding-left: 0.8em;
	padding-right: 0.8em;
	border-radius: 0.2em;
	transition: all .5s ease-in;
	background-image: radial-gradient(#ff4848 10%, #3a0303);
	box-shadow: 0em 0em 0.2em #111111; 
}

a.footer:hover {
	background-color: #8B0000;
	transition: all .5s ease-in; 
}

a.inhalt {
	color: #222222;
	transition: all .5s ease-in;
	background-color: #dddddd;
    padding: 0.5em;
}

a.inhalt:hover {
    color: white;
	background-color: green;
	transition: all .5s ease-in;
	box-shadow: 0em 0em 0.2em 0.1em #111111; 
}

button {
	font-size: 1em;
}

button.nav_aktiv:hover {
	background-color: rgba(215, 215, 0, 0.6);
	color: #F5F5F5;
	transition: all .5s ease-in; 
}

button.auswahl {
	font-size: 1em;
	background-color: rgba(230, 230, 250, 0.6);
	margin: 1em;
	border-radius: 0.2em;
	transition: all .2s ease-in; 
}

button.auswahl:hover {
	background-color: rgba(215, 215, 0, 0.6);
	color: #111111;
	box-shadow: 0em 0em 0.3em #111111;
	transition: all .2s ease-in; 
}

button.werkzeug {
	font-size: 1.8em;
	background-color: #eeeeee;
	margin: 0.2em;
    height: 2em;
    width: 2em;
	transition: all .2s ease-in; 
}

button.werkzeug:hover {
	background-color: yellow;
	box-shadow: 0em 0em 0.2em #111111;
	transition: all .2s ease-in; 
}

button.abakus {
	font-size: 1em;
    color: black;
	background-color: #eeeeee;
	margin: 0.2em;
    height: 2em;
    width: 2em;
	transition: all .2s ease-in; 
}

button.abakus:hover {
	background-color: yellow;
	box-shadow: 0em 0em 0.1em #111111;
	transition: all .2s ease-in; 
}

button.musik {
	font-size: 1em;
	background-color: lightgray;
	margin: 1em;
	padding-left: 0.5em;
	padding-right: 0.5em;
	border-radius: 1em;
	border: black 0.2em;
	border-radius: 0.2em;
}

button.counter {
	font-size: 2em;
	background-color: rgba(176, 224, 230, 0.6);
	padding-left: 0.8em;
	padding-right: 0.8em;
	margin-top: 2em;
	border-radius: 1em;
	transition: all .5s ease-in;
	box-shadow: 0em 0em 0.7em #111111; 
}

button.counter:hover {
	background-color: rgba(215, 215, 0, 0.6);
	color: #F5F5F5;
	transition: all .5s ease-in; 
}

button.loesen {
	font-size: 3em;
	background-color: black;
	border: none;
	margin: 0em;
	padding: 0em;
}

ol {
	display: flex;
    flex-direction: column;
}

li {
	list-style:decimal;
}

input {
    font-size: 1.2em;
	text-align: right;
	background-color: yellow;
    padding: 0.1em;
	transition: all .5s ease-in;
    text-align: right; 
    box-shadow: 0.1em 0.1em 0.1em black inset;
}

input.einstellig {
    width: 2em;
}

input.vierstellig {
    width: 3em;
}

input.fuenfstellig {
    width: 4em;
}

input.sechsstellig {
    width: 5em;
}

input.siebenstellig {
    width: 6em;
}

input:focus {
    background-color: yellow; 
}

input.check {
	width: 0.7em;
	height: 0.7em;
	background-color: green;
	color: green;
	margin: 0.3em;
	margin-left: 0.8em;
}

figure {
    margin: 0em;
    padding: 0em;
}

figcaption {
    text-align: center;
}

img.logo {
    width: 100%;
    max-width: 60vmin;
}

img.app {
    width: 8em;
    height: 8em;
}

img.app_nav {
    width: 4.5em;
}

img.noten {
	width: 18em; 
}

img.noten2 {
	width: 36em;
    max-width: 99%;
}

img.logo_work {
	height: 10em;
	width: 10em;
	margin: 2em; 
}

img.musik {
	background-color: #eeeeee;
	height: 9em;
	width: 12em; 
}

img.uhr {
	background-color: #eeeeee;
	height: 15em;
	width: 15em; 
}

img.arbeitsblatt {
	background-color: #eeeeee;
	height: 20em;
	width: 14em; 
}

img.fach {
	background-color: #eeeeee;
	height: 15em;
	width: 15em; 
}

img.aufgabe {
	background-color: #eeeeee;
	height: 8em;
	width: 8em; 
}

progress {
    color: white;
	background-color: green;
	width: 10em;
	height: 1.5em;
	border: black solid 0.1em;
}

fieldset {
	font-size: 1.2em;
	margin: 1em;
}

legend {
	color: #222222;
	background-color: #E6E6FA;
	font-size: 1em;
	border-radius: 0.3em;
	padding: 0.2em;
}

h1 {
	font-size: 1.7em;
}

h2 {
	font-size: 1.6em; 
}

h3 {
	font-size: 1.5em; 
}

h4 {
	font-size: 1.4em; 
}

h5 {
	font-size: 1.3em;
}

h6 {
	font-size: 1.2em;
}

table {
	border-collapse: collapse;
	margin: 0.5em; 
}

th {
	font-size: 1.2em; 
}

td {
	font-size: 1em; 
}

td.input {
	font-size: 1.2em;
	text-align: right; 
}

td.level_green {
	width: 1em;
	height: 1em;
	border: black solid 0.1em;
	background-color: green;
}

td.level_yellow {
	width: 1em;
	height: 1em;
	border: black solid 0.1em;
	background-color: yellow;
}

td.border_right_thick {
	border-right: 0.3em black solid; 
}

td.border_bottom_thick {
	border-bottom: 0.3em black solid; 
}

td.border_bottom_right_thick {
	border-bottom: 0.3em black solid;
	border-right: 0.3em black solid; 
}

.counter {
	background-color: black;
    color: white;
}

.column {
    display: flex;
	flex-direction: column;
}

.row {
    display: flex;
	flex-flow: row wrap;
}

.text-size-normal {
	font-size: 1em; 
}

.text-size-large {
	font-size: large; 
}

.text-size-larger {
	font-size: larger; 
}

.text-size-xxlarge {
	font-size: xx-large; 
}

.text-white {
	color: #eeeeee; 
}

.text-black {
	color: #111111; 
}

.text-red {
	color: red; 
}

.text-blue {
	color: blue; 
}

.text-right {
	text-align: right; 
}

.text-left {
	text-align: left; 
}

.text-center {
	text-align: center; 
}

.background-white {
	background-color: #eeeeee; 
}

.background-yellow {
	background-color: yellow; 
}

.background-d2 {
	background-color: cornflowerblue; 
}

.margin-all {
	margin: 1em; 
}

.margin-bottom {
	margin-bottom: 1em; 
}

.padding-all {
	padding: 1em; 
}

.border-all {
	border: 0.2em #111111 solid; 
}

.border-bottom {
	border-bottom: 0.2em #111111 solid; 
}

.border-radius {
	border-radius: 0.2em; 
}

.shadow {
	box-shadow: 0em 0em 0.7em #111111; 
}

.zahl {
	font-size: 1.2em;
	text-align: right;
	padding-left: 0.2em;
	padding-right: 0.2em;
}

.animate-spin {
    animation:spin 2s infinite linear}
    @keyframes 
    spin{
        0%{transform:rotate(0deg)}
        100%{transform:rotate(359deg)
    }
}

.animate-fading {
	animation:fading 5s infinite}
	@keyframes fading{
		0%{opacity:0}
		50%{opacity:1}
		100%{opacity:0
	}
}

.animate-opacity {
    animation:opac 0.8s}
    @keyframes 
    opac {
        from{opacity:0} 
        to{opacity:1
    }
}

.animate-opacity-out {
    animation:opac 2s}
    @keyframes opac{
        from{opacity:1} 
        to{opacity:0
    }
}

.animate-top {
    position:relative;animation:animatetop 0.4s}
    @keyframes animatetop{
        from{top:-300px;opacity:0} 
        to{top:0;opacity:1
    }
}

.animate-left {
    position:relative;animation:animateleft 0.4s}
    @keyframes animateleft{
        from{left:-300px;opacity:0} 
        to{left:0;opacity:1
    }
}

.animate-right {
    position:relative;animation:animateright 0.4s}
    @keyframes animateright{
        from{right:-300px;opacity:0} 
        to{right:0;opacity:1
    }
}

.animate-bottom {
    position:relative;animation:animatebottom 0.4s}
    @keyframes animatebottom{
        from{bottom:-300px;opacity:0} 
        to{bottom:0;opacity:1
    }
}

.animate-zoom {
    animation:animatezoom 0.6s}
    @keyframes animatezoom{
        from{transform:scale(0)} 
        to{transform:scale(1)
    }
}

svg {
	--bgcolor: #ffffff;
	--primarycolor: black;
	--accent1color: #dfac20;
	--accent2color: #c32e04;
	--start-hours: 0;
	--start-minutes: 0;
	--start-seconds: 0;
	height: 13em;
}

#clockface {
	fill: var(--bgcolor);
	stroke: var(--primarycolor);
	stroke-width: 3.5;
}

#indizes > use,
.hand {
	stroke: var(--primarycolor);
	stroke-width: 1;
	stroke-linecap: round;
}

#indizes > use:nth-child(3n+3) {
	stroke-width: 3;
}

#indizes2 > use,
.hand {
	stroke: var(--primarycolor);
	stroke-width: 1;
	stroke-linecap: round;
}

#hours {
	stroke: blue;
	stroke-width: 8;
	transform: rotate(calc(var(--start-hours) * 30deg));
	animation: rotateHourHand calc(12 * 60 * 60s) linear infinite;
	animation-delay: calc(calc(var(--start-minutes) * -60 * 1s) + calc(var(--start-seconds) * -1 * 1s));
}

@keyframes rotateHourHand {
	from {
		transform: rotate(calc(var(--start-hours) * 30deg));
	}
	to {
		transform: rotate(calc(var(--start-hours) * 30deg + 360deg));
	}
}

#minutes {
	stroke: red;
	stroke-width: 4;
	transform: rotate(calc(var(--start-minutes) * 6deg));
	animation: rotateMinuteHand 3600s steps(60) infinite;
	animation-delay: calc(var(--start-seconds) * -1 * 1s);
}

#seconds {
	stroke: var(--accent2color);
	transform: rotate(calc(var(--start-seconds) * 6deg));
	animation: rotateSecondsHand 60s steps(60) infinite;
}

/* Smartphone */
@media (max-width:37.4em){
    body{
        font-size: 0.8em;
    }
}

/* großes Smartphone, Tablet */
@media (min-width: 37.41em) and (max-width: 47.99em){
    body{
        font-size: 0.8em;
    }
}

/* großes Tablet */
@media (min-width: 48em) and (max-width: 61.9em){
    body{
        font-size: 0.9em;
    }
}

/* Laptop/PC */
@media (min-width: 62em) and (max-width:75em){
    body{
        font-size: 0.95em;
    }
}

/* gro0er Laptop/PC */
@media (min-width: 74.9em) and (max-width:99.9em){
    body{
        font-size: 1em;
    }
}

/* gro0er Laptop/PC */
@media (min-width:100em) {
    body{
        font-size: 1.2em;
    }
}