body {
	font-family: "Titillium Web", Helvetica, Arial, sans-serif;
	color: #000060;
}

.erklaerbereichBeschreibung {
	font-size: 12px;
	line-height: 15px;
	padding-bottom: 15px;
}

.ueberschriftKachelbereich {
	font-size: 14px;
	margin: 0 0 10px 0;
	font-weight: bold;
	text-decoration: underline;
}

.erklaertextKachelbereich {
	font-size: 12px;
	line-height: 15px;
	padding-bottom: 15px;
}

.trennlinie {
	font-size: 12px;
	line-height: 15px;
}

.erklaervideo {
	display: flex;
	padding: 30px 0 10px 0;
}

img {
	margin: 0 auto;
}

input[type="radio" i] {
	height: 12px;
}


.infobox-text {
	font-size: 12px;
}

a:link, a:visited {
	text-decoration: none;
	color: #000060;
}

li {
	margin: 10px 0;
}

h3 {
	margin: 20px 0;
}



/******************************************************* Smartphone *******************************************************/
@media screen and (max-width: 535px) {

	.schuelerhilfeGridcontainer {
		grid-template-areas: ". logo ." ". linie ." ". schuelerhilfeUeberschrift ." ". informationsbox ." ". radiobuttonbereichUeberschrift ." ". radiobuttonbereich ." ". kachelbereichUeberschrift ." ". kachelbereich ." ". kachelerklaerbereich .";
		grid-template-columns: auto 300px auto;
		grid-template-rows: 100px 10px 40px auto auto auto auto minmax(min-content, max-content)
	}

	/*Radiobuttonbereich 1. Linie*/
	.schuelerhilfeRadiobuttonGridcontainer {
		grid-template-columns: 40px auto;
		grid-template-rows: minmax(min-content, max-content) auto;
		padding: 10px 0;
	}

	/*Radiobuttonbereich 2. Linie*/
	.schuelerhilfeRadiobuttonGridcontainer_V2 {
		grid-template-columns: 40px minmax(min-content, max-content);
		grid-template-rows: minmax(min-content, max-content) auto;
		padding: 10px 0;
	}

	/*Radiobuttonbereich 2. Linie*/
	.radiobuttonerklaerbereich_V2 {
		padding: 10px 0px;
	}

	/*Kachelgridcontainer*/
	.schuelerhilfeKachelnGridcontainer {
		grid-template-areas: 
			". kachelEmail . kachelDrucken ." 
			". kachelBenachrichtigung . kachelDokumente ."
			". kachelAnmeldestatus . kachelFehlermeldungen ." 
			". kachelRangAendern . kachelWasWaereWenn .";
		grid-template-columns: auto 125px 5px 125px auto;
		grid-template-rows: auto auto auto auto;
		grid-row-gap: 20px;
	}

	.radiobuttonerklaerbereich {
		width: 225px;
	}

	.faq-bilder-smartphone {
		display: block;
	}

	.faq-bilder-T {
		display: none;
	}

	.faq-bilder-LD {
		display: none;
	}

	.faq-bilder-center {
		padding: 20px 0;
	}

	.footer a {
		font-size: 14px !important;
	}

	h2 {
		font-size: 14px;
	}

	h3 {
		font-size: 12px;
		text-align: center;
	}

	.infobox-text {
		font-size: 10px !important;
	}

	.informationsbox {
		padding: 0 !important;
	}

	.radiobuttonbeschreibung {
		font-size: 12px;
	}

	.radiobuttonerklaerbereich {
		padding: 10px 5px;
	}

	ul {
		padding-inline-start: 20px !important;
		padding: 0 10px 0 0;
	}
}

/******************************************************* Tablet *******************************************************/
@media screen and (min-width: 536px) and (max-width: 1279px) {

	.schuelerhilfeGridcontainer {
		grid-template-areas: ". logo ." "linie linie linie" ". . ." ". schuelerhilfeUeberschrift ." ". . ." ". informationsbox ." ". radiobuttonbereichUeberschrift ." ". radiobuttonbereich ." ". kachelbereichUeberschrift ." ". kachelbereich ." ". kachelerklaerbereich .";
		grid-template-columns: minmax(10px, 30px) auto minmax(10px, 30px);
		grid-template-rows: 100px 10px 25px 50px 25px auto auto auto auto minmax(min-content, max-content);
	}

	/*Radiobuttonbereich 1. Linie*/
	.schuelerhilfeRadiobuttonGridcontainer {
		grid-template-columns: 40px auto;
		grid-template-rows: 40px auto;
		padding: 2px 0;
	}

	/*Radiobuttonbereich 2. Linie*/
	.schuelerhilfeRadiobuttonGridcontainer_V2 {
		grid-template-columns: 40px minmax(min-content, max-content);
		grid-template-rows: 40px auto;
		padding: 2px 0;
	}

	/*Kachelgridcontainer*/
	.schuelerhilfeKachelnGridcontainer {
		grid-template-areas: "kachelEmail kachelDrucken kachelBenachrichtigung kachelDokumente" "kachelAnmeldestatus kachelFehlermeldungen kachelRangAendern kachelWasWaereWenn";
		grid-template-columns: auto;
		grid-template-rows: auto auto;
		grid-row-gap: 20px;
	}

	/*Radiobuttonbereich 2. Linie*/
	.radiobuttonerklaerbereich_V2 {
		padding: 10px;
	}

	.radiobuttonerklaerbereich {
		padding: 20px 10px 10px 10px;
	}

	.faq-bilder-smartphone {
		display: none;
	}

	.faq-bilder-T {
		display: block;
	}

	.faq-bilder-LD {
		display: none;
	}

	.faq-bilder-center {
		padding: 20px 0;
	}

	h3 {
		text-align: center;
	}

	.kachelbereich {
		display: flex;
		flex-wrap: nowrap;
		justify-content: space-around;
	}

	.radiobuttonbeschreibung {
		font-size: 12px;
	}
}

/******************************************************* Laptop *******************************************************/
@media screen and (min-width: 1280px) and (max-width: 1800px) {

	.schuelerhilfeGridcontainer {
		grid-template-areas: ". logo ." "linie linie linie" ". . ." ". schuelerhilfeUeberschrift ." ". . ." ". informationsbox ." ". radiobuttonbereichUeberschrift ." ". radiobuttonbereich ." ". kachelbereichUeberschrift ." ". kachelbereich ." ". kachelerklaerbereich .";
		grid-template-columns: minmax(10px, 30px) auto minmax(10px, 30px);
		grid-template-rows: 100px 10px 25px 50px 25px auto auto auto auto minmax(min-content, max-content);
	}

	/*Radiobuttonbereich 1. Linie*/
	.schuelerhilfeRadiobuttonGridcontainer {
		grid-template-columns: 40px auto;
		grid-template-rows: 40px auto;
		padding: 2px 0;
	}

	/*Radiobuttonbereich 2. Linie*/
	.schuelerhilfeRadiobuttonGridcontainer_V2 {
		grid-template-columns: 40px minmax(min-content, max-content);
		grid-template-rows: 40px auto;
		padding: 2px 0;
	}

	/*Radiobuttonbereich 2. Linie*/
	.radiobuttonerklaerbereich_V2 {
		padding: 10px;
	}

	/*Kachelgridcontainer*/
	.schuelerhilfeKachelnGridcontainer {
		grid-template-areas: "kachelEmail kachelDrucken kachelBenachrichtigung kachelDokumente kachelAnmeldestatus kachelFehlermeldungen kachelRangAendern kachelWasWaereWenn";
		grid-template-columns: auto;
		grid-template-rows: auto;
		grid-row-gap: 20px;
	}

	.radiobuttonerklaerbereich {
		padding: 20px 10px 10px 10px;
	}

	.faq-bilder-smartphone {
		display: none;
	}

	.faq-bilder-T {
		display: none;
	}

	.faq-bilder-LD {
		display: block;
	}

	.faq-bilder-center {
		padding: 20px 0;
	}

	.kachelbereich {
		display: flex;
		flex-wrap: nowrap;
		justify-content: space-around;
	}

	.radiobuttonbeschreibung {
		font-size: 12px;
	}
}

/******************************************************* Desktop *******************************************************/
@media screen and (min-width: 1801px) {

	.schuelerhilfeGridcontainer {
		grid-template-areas: ". logo ." "linie linie linie" ". . ." ". schuelerhilfeUeberschrift ." ". . ." ". informationsbox ." ". radiobuttonbereichUeberschrift ." ". radiobuttonbereich ." ". kachelbereichUeberschrift ." ". kachelbereich ." ". kachelerklaerbereich .";
		grid-template-columns: minmax(10px, 30px) auto minmax(10px, 30px);
		grid-template-rows: 100px 10px 25px 50px 25px auto auto auto auto minmax(min-content, max-content);
	}

	/*Radiobuttonbereich 1. Linie*/
	.schuelerhilfeRadiobuttonGridcontainer {
		grid-template-columns: 40px auto;
		grid-template-rows: 40px auto;
		padding: 2px 0;
	}

	/*Radiobuttonbereich 2. Linie*/
	.schuelerhilfeRadiobuttonGridcontainer_V2 {
		grid-template-columns: 40px minmax(min-content, max-content);
		grid-template-rows: 40px auto;
		padding: 2px 0;
	}
	/*Kachelgridcontainer*/
	.schuelerhilfeKachelnGridcontainer {
		grid-template-areas: "kachelEmail kachelDrucken kachelBenachrichtigung kachelDokumente kachelAnmeldestatus kachelFehlermeldungen kachelRangAendern kachelWasWaereWenn";
		grid-template-columns: auto;
		grid-template-rows: auto;
		grid-row-gap: 20px;
	}
	/*Radiobuttonbereich 2. Linie*/
	.radiobuttonerklaerbereich_V2 {
		padding: 10px;
	}

	.radiobuttonerklaerbereich {
		padding: 20px 10px 10px 10px;
	}

	.faq-bilder-smartphone {
		display: none;
	}

	.faq-bilder-T {
		display: none;
	}

	.faq-bilder-LD {
		display: block;
	}

	.faq-bilder-center {
		padding: 20px 0;
	}

	.kachelbereich {
		display: flex;
		flex-wrap: nowrap;
		justify-content: space-around;
	}

	.radiobuttonbeschreibung {
		font-size: 12px;
	}
}

/************************************************* Allgemeine Elemente *************************************************/

.erklaerbereichBeschreibung a:link,
.erklaerbereichBeschreibung a:visited {
	text-decoration: underline;
	color: #000060;
}

.erklaertextFehlermeldungen a:link,
.erklaertextFehlermeldungen a:visited {
	text-decoration: underline;
	color: #000060;
}

.erklaertextKachelbereich a:link,
.erklaertextKachelbereich a:visited {
	text-decoration: underline;
	color: #000060;
}

h2 {
	text-align: center;
}

.videohinweis {
	font-size: 12px;
	color: firebrick;
	text-align: center;
}

.fa-sad-tear:before {
	font-size: 25px;
}
/***************************************************** Gridcontainer ***************************************************/
/*Ganzheitlicher Gridcontainer*/
.schuelerhilfeGridcontainer {
	display: grid;
}

/*Radiobuttonbereich 1. Linie*/
.schuelerhilfeRadiobuttonGridcontainer {
	grid-template-areas: "radiobutton radiobuttonbeschreibung" ". radiobuttonerklaerbereich";
	display: grid;
}

/*Radiobuttonbereich 2. Linie*/
.schuelerhilfeRadiobuttonGridcontainer_V2 {
	grid-template-areas: "radiobutton radiobuttonbeschreibung" ". radiobuttonerklaerbereich_V2";
	display: grid;
}

/*Kachelbereich*/
.kachelGridcontainer {
	grid-template-areas: "kachel" "kachelbeschreibung";
	grid-template-columns: 120px;
	grid-template-rows: 100px 15px;
	grid-row-gap: 10px;
	display: grid;
}

/*Kachel - Anmeldestatus*/
.anmeldestatusGridcontainer {
	grid-template-areas: "anmeldestatus anmeldestatus" "symbole symbolerklaertext";
	grid-template-columns: 40px auto;
	grid-template-rows: minmax(min-content, max-content) grid-template-rows: minmax(min-content, max-content);
	display: grid;
	margin: 20px 0 0 0;
}

/*Kachelgridcontainer*/
.schuelerhilfeKachelnGridcontainer {
	display: grid;
}


/******************************************************* Gridareas *****************************************************/
/*Ganzheitlicher Gridcontainer*/
.logo {
	grid-area: logo;
	margin: auto;
}

.linie {
	grid-area: linie;
}

.schuelerhilfeUeberschrift {
	grid-area: schuelerhilfeUeberschrift;
}

.informationsbox {
	grid-area: informationsbox;
	padding-bottom: 20px;
}

.radiobuttonbereichUeberschrift {
	grid-area: radiobuttonbereichUeberschrift;
}

.radiobuttonbereich {
	grid-area: radiobuttonbereich;
}

.kachelbereichUeberschrift {
	grid-area: kachelbereichUeberschrift;
}

.kachelbereich {
	grid-area: kachelbereich;
}

.kachelerklaerbereich {
	grid-area: kachelerklaerbereich;
	border: 2px #d8d8d8 solid;
	border-radius: 5px;
	padding: 20px 10px 10px 10px;
	margin: 20px 0;
}

/*Radiobuttonbereich 1. Linie*/
.radiobutton {
	grid-area: radiobutton;
	margin: auto;
}

.radiobuttonbeschreibung {
	grid-area: radiobuttonbeschreibung;
	margin: auto 0;
}

.radiobuttonerklaerbereich {
	grid-area: radiobuttonerklaerbereich;
	border: 2px #d8d8d8 solid;
	border-radius: 5px;
}

/*Radiobuttonbereich 2. Linie*/
.radiobuttonerklaerbereich_V2 {
	grid-area: radiobuttonerklaerbereich_V2;
}

/*Kachelbereich*/
.kachel {
	grid-area: kachel;
	background-color: #f1f1f1;
	width: 100px;
	margin: 10px;
	text-align: center;
	line-height: 75px;
	font-size: 30px;
}

.kachelbeschreibung {
	grid-area: kachelbeschreibung;
	font-size: 13px;
	text-align: center;
	font-variant-caps: small-caps;
}

/*Kachel - Anmeldestatus*/
.anmeldestatus {
	grid-area: anmeldestatus;
	font-size: 12px;
	font-weight: bold;
	margin: 0 0 10px 0;
}

.symbole {
	grid-area: symbole;
	margin: auto 0;
}

.symbolerklaertext {
	grid-area: symbolerklaertext;
	font-size: 12px;
	margin: auto 0;
}

/*Kachelgridcontainer*/
.kachelEmail {
	grid-area: kachelEmail;
}

.kachelDrucken {
	grid-area: kachelDrucken;
}

.kachelBenachrichtigung {
	grid-area: kachelBenachrichtigung;
}

.kachelDokumente {
	grid-area: kachelDokumente;
}

.kachelAnmeldestatus {
	grid-area: kachelAnmeldestatus;
}

.kachelFehlermeldungen {
	grid-area: kachelFehlermeldungen;
}

.kachelRangAendern {
	grid-area: kachelRangAendern;
}

.kachelWasWaereWenn {
	grid-area: kachelWasWaereWenn;
}