@charset "utf-8";
/* CSS Document */


/* Hintergrundfarbe: #4d598f */
/* Hintergrund im Hauptdiv: #F0F0F0 */

/* Haupt-Überschrift: 'Arial Black', Gadget, sans-serif */
/* Schrift für h2: 'Trebuchet MS', Helvetica, Arial, sans-serif */
/* Schrift im Text: 'Trebuchet MS', Arial, Helvetica, sans-serif */

html {
	scroll-behavior: smooth;
}


body {
	margin: 0px;
	background-color: #FFF;

	background: -moz-linear-gradient(270deg, #4d598f 0%, #FFFFFF 100%);
	/* ff3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #4d598f), color-stop(100%, #FFFFFF));
	/* safari4+,chrome */
	background: -webkit-linear-gradient(270deg, #4d598f 0%, #FFFFFF 100%);
	/* safari5.1+,chrome10+ */
	background: -o-linear-gradient(270deg, #4d598f 0%, #FFFFFF 100%);
	/* opera 11.10+ */
	background: -ms-linear-gradient(270deg, #4d598f 0%, #FFFFFF 100%);
	/* ie10+ */
	background: linear-gradient(180deg, #4d598f 0%, #FFFFFF 100%);
	/* w3c */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4d598f', endColorstr='#FFFFFF', GradientType=0);
	/* ie6-9 */

	background-attachment: fixed;
	background-size: contain;
}


#hauptueberschrift {
	display: inline-block;
	padding-top: 0.3em;
	padding-bottom: 0.3em;
	padding-right: 2em;
	padding-left: 1.5em;
	margin-bottom: 1em;
	border-radius: 0px 0px 70px 0px;
	background-color: #4d598f;
	color: #FFF;
	font-family: 'Arial Black', Gadget, sans-serif;
	font-size: 4vw;
	text-shadow: 0px 0px 5px rgba(0, 0, 0, 1);
	border-bottom: 20px white solid;
	border-right: 20px white solid;
}

/* Innerhalb eines Textes, z. B. im Impressum */
.inlinelink,
.inlinelink:link,
.inlinelink:visited {
	color: inherit;
	border-bottom: 1px dashed #CCCCCC;
	text-decoration: none;
}

.inlinelink:hover,
.inlinelink:active,
.inlinelink:focus {
	border-bottom: 1px solid #999;
	transition: all 1s;
}


/* Code anzeigen */
em {
	font-style: normal;
	font-family: "Courier New", monospace;
	font-weight: bold;
}

#hauptdiv {
	background-color: #F0F0F0;
	width: 80%;
	border: 20px white solid;
	margin: auto;
	overflow: auto;
	margin-top: 4em;
	-webkit-box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.75);
	-moz-box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.75);
	box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.75);
}


.einheit {
	width: 95%;
	overflow: auto;
	margin: auto;
	border: 1px double #F0F0F0;
	border-radius: 30px;
	padding-top: 1em;
}

.einheit:hover {
	border: 1px dotted #E2E2E2;
	transition: 1s ease-out;
}


.lernen {
	width: 43%;
	margin-left: 5%;
	float: left;
	display: inline-block;
}

.ueben {
	width: 43%;
	margin-right: 5%;
	float: right;
	display: inline-block;
}

ol {
	font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif;
	margin-left: 0.3em;
}

ol>li {
	margin-bottom: 1.3em;
}

.ulliKlein {
	font-size: smaller;
	list-style: square;
}

.beschr {
	font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif;
	font-size: 1.2em;
	font-size: 1.3vw;
}

.uberdieID {
	border-left: #CCC thin dotted;
	overflow: hidden;
	max-height: 0px;
	transition: max-height 0.5s ease-out;
}



.ipdf::before {
	content: "PDF";
	border: 1px solid;
	margin-right: 10px;
	background-color: #900;
	color: #FFF;
	padding: 3px;
}

.ilink::before {
	content: "Link";
	border: 1px solid;
	margin-right: 10px;
	background-color: #00F;
	color: #FFF;
	padding: 3px;
}

.ifile::before {
	content: "Datei";
	border: 1px solid;
	margin-right: 10px;
	background-color: #666;
	color: #FFF;
	padding: 3px;
}

.tech {
	float: right;
	font-size: 0.7em;
	font-size: 0.7vw;
	border: thin #999 solid;
	border-radius: 3px;
	background-color: #F0F0F0;
	margin-top: 5px;
	padding: 2px;
	color: #000;
}

.pdfauf,
.pdfauf:link,
.pdfauf:visited,
.pdfauf:active {
	border-radius: 5px;
	text-decoration: none;
	padding: 0.3em;
	font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif;
	padding-left: 0.5em;
	padding-right: 1em;
	border: #CCC solid;
	background-color: #FFF;
	color: black;
	transition: all 1s ease;
}

.pdfauf:focus,
.pdfauf:hover {
	border: #999 solid;
	background-color: #4d598f;
	transition: all 1s ease;
}


h2 {
	font-size: 2em;
	font-size: 2vw;
	position: relative;
	z-index: 2;
	border-top: #CCC thin dotted;
	border-bottom: #CCC thin dotted;
	margin-top: 0.3em;
	cursor: pointer;
	font-family: 'Trebuchet MS', Helvetica, Arial, sans-serif;
	padding: 0.2em;
	padding-right: 0.2em;
}

h2:before {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	bottom: 0;
	left: 0;
	background-color: #4d598f;
	visibility: hidden;
	animation-name: meineAniEnde;
	animation-duration: 1s;
	z-index: -1;
}

h2:hover {
	animation-name: farbeanders;
	animation-duration: 2s;
	animation-fill-mode: forwards;
}

h2:hover:before {
	visibility: visible;
	animation-name: meineAniStart;
	animation-duration: 1s;
}


@keyframes farbeanders {
	from {
		color: black;
	}

	to {
		color: white;
	}
}

@keyframes meineAniStart {
	0% {
		height: 4px;
		transform: scaleX(0);
	}

	50% {
		height: 4px;
		transform: scaleX(1);
	}

	100% {
		height: 100%;
	}
}

@keyframes meineAniEnde {
	0% {
		height: 100%;
		visibility: visible;
	}

	50% {
		height: 4px;
		transform: scaleX(1);
	}

	100% {
		height: 4px;
		transform: scaleX(0);
	}
}



.leereZeile {
	animation: none;
}

.leereZeile:before {
	animation: none;
}

.leereZeile:hover {
	animation: none;
	background-color: transparent;
	cursor: auto;
}

.leereZeile:hover:before {
	animation: none;
	background-color: transparent;
	cursor: auto;
}


/*IMPRESSUM*/
#imressdiv {
	width: 100%;
	text-align: left;
	bottom: 0;
	position: fixed;
	z-index: 6;
}

#impresstextdiv {
	background-color: gray;
	color: #FFF;
	padding: 0.5em;
	font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif;
	font-size: 1.2em;
	font-size: 1.2vw;
	padding-right: 2em;
	padding-left: 2em;
	text-align: left;
}

.bildlinkklasse,
.bildlinkklasse:link,
.bildlinkklasse:visited,
.bildlinkklasse:active,
.bildlinkklasse:focus,
.bildlinkklasse:hover {
	border: none !important;
}

#LogoImp {
	position: fixed;
	bottom: 0px;
	right: 0px;
	z-index: 12;
	width: 20%;
	max-width: 75px;
	filter: drop-shadow(1px 1px 2px gray);
}

.impSteuerButton {
	font-size: small;
}

.impSteuerButton:hover {
	cursor: pointer;
}



@media screen and (max-width: 1100px) {


	body {
		margin: 0px;
		background: none;
		background-color: #F0F0F0;
	}

	#hauptueberschrift {
		display: inline-block;
		font-size: 3em;
		font-size: 6vw;
		text-shadow: 0px 0px 5px rgba(0, 0, 0, 1);
	}

	#hauptdiv {
		background-color: #F0F0F0;
		width: 100%;
		border: none;
		padding-top: 0px;
		overflow: auto;
		margin-top: 0px;
		box-shadow: none;
		-webkit-box-shadow: none;
		-moz-box-shadow: none;
		box-shadow: none;
	}

	.lernen {
		width: 43%;
		margin-left: 5%;
		float: left;
		display: inline-block;
		font-size: 1.2em;
		font-size: 1.3vw;
	}

	.ueben {
		width: 43%;
		margin-right: 5%;
		float: right;
		display: inline-block;
		font-size: 1.2em;
		font-size: 1.3vw;
	}

	ol {
		font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif;
		margin-left: 0.3em;
	}

	ol>li {
		margin-bottom: 1.3em;
	}

	.beschr {
		font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif;
		font-size: 1.4em;
		font-size: 2.2vw;
	}

	h2 {
		font-size: 2em;
		font-size: 2.5vw;
	}


	#aebut {
		font-size: inherit;
	}

}

@media screen and (max-width: 790px) {

	#hauptdiv {
		width: 100%;
		border: none;
		border-radius: 0px;
		box-shadow: none;
	}

	#hauptueberschrift {
		font-size: 2.3em;
		font-size: 6.5vw;
	}


	.lernen {
		width: 95%;
		display: block;
		margin: auto;
		float: none;
	}

	.ueben {
		width: 95%;
		display: block;
		margin: auto;
		float: none;
	}

	h2 {
		font-size: 4em;
		font-size: 4.5vw;
	}

	#hauptdiv {
		margin-top: 0px;
	}

	.beschr {
		font-size: 2.5em;
		font-size: 3.2vw;
	}

	ol {
		margin-left: 0.3em;
		font-size: 2em;
		font-size: 2.7vw
	}

	ol>li {
		margin-bottom: 1.3em;
	}

	.leereZeile {
		display: none;
	}

}

@media screen and (max-width: 550px) {
	h2 {
		font-size: 4em;
		font-size: 5.3vw;
	}

	#hauptueberschrift {
		font-size: 2.5em;
		border: none;
		border-radius: 0px 0px 0px 0px;
		width: 100%;
		padding: 0px;
		padding-top: 1em;
		padding-bottom: 1em;
		text-align: center;
	}

	.tech {
		display: none;
	}

	.beschr {
		font-size: 3.5em;
		font-size: 4.5vw;
	}

	#imressdiv {
		width: 100%;
		text-align: right;
		bottom: 0;
		position: fixed;
		z-index: 6;
	}

	#impresstextdiv {
		text-align: center;
		display: block;
	}

	.pdfauf,
	.pdfauf:link,
	.pdfauf:visited,
	.pdfauf:active {
		border-radius: 5px;
		text-decoration: none;
		padding: 0.3em;
		font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif;
		padding-left: 0.5em;
		padding-right: 1em;
		border: #CCC solid;
		background-color: #FFF;
		color: black;
		transition: all 1s ease;
	}


	.pdfauf,
	.pdfauf:link,
	.pdfauf:visited,
	.pdfauf:active {
		font-size: 1.4em;
		font-size: 4vw;
	}

	ol {
		margin-left: 0.3em;
	}

	ol>li {
		margin-bottom: 2.4em;
	}


}



@media screen and (min-width: 1400px) {

	h2 {
		font-size: 2.2em;
	}

	.beschr {
		font-size: 1.4em;
	}

	.pdfauf {
		font-size: larger;
	}

	#hauptueberschrift {
		font-size: 4em;
	}

	#impresstextdiv {
		font-size: 1em;
		font-size: 0.8vw;
	}
}