﻿.startseite-gridaside-youtube {
	width: 100%;
}

	.startseite-gridaside-youtube .youtube {
		margin: auto auto;
		height: 183px;
		width: 325px;
		position: relative;
	}

		.startseite-gridaside-youtube .youtube img {
			margin: auto;
			height: 100%;
			width: 100%;
			max-width: 325px;
			max-height: 183px;
		}

		.startseite-gridaside-youtube .youtube .startseite-gridaside-youtube-logo {
			height: 80px;
			width: 90px;
			position: absolute;
			top: calc(50% - 40px);
			left: calc(50% - 45px);
		}

			.startseite-gridaside-youtube .youtube .startseite-gridaside-youtube-logo i {
				font-size: 80px;
				color: #282828;
				opacity: 0.8;
				transition: color 0.2s ease 0s;
			}

		.startseite-gridaside-youtube .youtube:hover .startseite-gridaside-youtube-logo i {
			color: #ff0000;
			opacity: 1;
		}

/* ======================================= Grundlegendes Grid Layout ======================================= */

.general-gridheader {
	grid-area: header;
}

.general-gridimpressum {
	grid-area: impressum;
}

/* ======================================= Startseite Grid Layout ======================================= */

.startseite-gridcontainer {
	display: grid;
	width: 100%;
	grid-gap: 12px;
}

.startseite-gridlogin {
	grid-area: login;
}

.startseite-gridplaceholder {
	grid-area: main;
}

.startseite-gridbildungsangebot {
	grid-area: bildungsangebot;
}

.startseite-gridaside {
	grid-area: aside;
}

.startseite-gridaside-tablet {
	grid-area: aside_T;
}

.startseite-gridaside-laptop {
	grid-area: aside_L;
}

.startseite-gridaside-desktop {
	grid-area: aside_D;
}

.startseite-gridDatenschutzerklaerung {
	grid-area: datenschutzerklaerung;
}

.startseite-gridaside-youtube {
	grid-area: youtube;
}

.startseite-informationsmeldung {
	grid-area: info;
}

/* ======================================= Anpassung des Gridcontainers der Startseite für Devices (Smartphones) bis maximal 535px Breite ======================================= */
/* Gridcontainer der Startseite für Smartphones*/
@media screen and (max-width: 535px) {
	.startseite-gridcontainer {
		grid-template-areas: "header" "info" "login" "bildungsangebot" "aside" "youtube" "main";
		width: calc(100% - 24px);
		margin: 12px;
	}

	.general-gridheader {
		padding: 10px 0;
	}

	.startseite-gridcontainer .krz-h4-for-legend {
		text-align: center;
		margin-bottom: 6px;
	}

	.ym-header {
		margin: 0;
	}

	.startseite-gridcontainer .ym-header h1.ym-logo strong {
		margin: 0 auto;
	}

	.startseite-gridcontainer .ym-userdata {
		margin: 0px;
		padding: 0px;
	}

	.startseite-gridbildungsangebot h4 {
		padding-top: 1em;
	}

	.startseite-gridbildungsangebot p {
		margin: 0;
	}

	div.ico-bildung {
		margin-right: 0px !important;
	}

	.startseite-gridplaceholder {
		padding-bottom: 1em;
	}

	.startseite-gridaside-youtube h4 {
		padding-top: 10px;
	}

	.startseite-gridaside-youtube .youtube {
		text-align: center;
		display: block;
		width: 325px;
		height: 182px;
	}

		.startseite-gridaside-youtube .youtube img {
			width: 100%;
			height: 100%;
			max-width: unset;
			max-height: unset;
		}

		.startseite-gridaside-youtube .youtube .startseite-gridaside-youtube-logo i {
			color: #ff0000;
			opacity: 1;
		}

	.startseite-gridaside-youtube .youtube-full-width {
		width: calc(100vw - 24px);
		height: calc(50vw + 6px);
	}

	.startseite-gridaside h4 {
		padding-top: 1em;
		text-align: center;
	}

	.startseite-gridplaceholder h4 {
		padding-top: 1em;
		text-align: center;
	}

	.startseite-gridplaceholder .button_S:hover {
		background: #000060;
		border-color: #000060;
		color: #fff;
	}

	.startseite-gridplaceholder .text:hover {
		background: #000060;
		border-color: #000060;
		color: #fff;
	}

	div.ico-bildung a {
		padding: 0px;
	}

		div.ico-bildung a:hover {
			padding: 0px;
		}

	.footer a {
		font-size: 13px !important;
	}

	div.ico-bildung a:hover,
	div.ico-bildung a:focus,
	div.ico-bildung a:active {
		background: #ffffff !important;
	}

	form.ym-form-login .ym-button-login {
		background: #000060 !important;
		border-color: #000060 !important;
		color: #ffffff !important;
	}

	.startseite-gridaside-youtube .youtube .startseite-gridaside-youtube-logo i {
		color: #ff0000;
	}

	/* Ausgeblendete Elemente*/
	.container3 {
		display: none;
	}

	.general-gridimpressum {
		display: none;
	}

	.grid_schulenbetriebe_laptop {
		display: none;
	}

	.startseite-gridDatenschutzerklaerung {
		display: none;
	}

	.startseite-gridaside-tablet {
		display: none;
	}

	.startseite-gridaside-laptop {
		display: none;
	}

	.startseite-gridaside-tablet-desktop {
		display: none;
	}
}

/* Gridcontainer der Startseitenunterseite "FAQ" */
@media screen and (max-width: 535px) {

	.faq-gridcontainer {
		grid-template-areas: "header" "main" "aside";
		width: calc(100% - 24px);
		margin: 12px;
	}

	.unterseiten {
		padding-bottom: 20px;
	}

	.faq-gridcontainer .ym-col2 {
		width: 100%;
	}

	.faq-gridcontainer .ym-header h1.ym-logo a:hover, .ym-header h1.ym-logo a:focus, .ym-header h1.ym-logo a:active {
		background: url(../../img/logo_schueler-online.svg);
		outline: white;
	}

	.faq-gridcontainer .startseite-gridplaceholder h4 {
		padding: 0;
		text-align: center;
	}

	.faq-gridcontainer .ym-slide-link, a.ym-slide-link:focus {
		font-size: 15px;
		text-align: left;
	}

	.faq-gridcontainer .startseite-gridlogin {
		display: none;
	}

	.faq-gridcontainer div.ico-bildung {
		display: none;
	}

	.faq-gridcontainer .startseite-gridaside h4 {
		display: none;
	}

	.faq-gridcontainer .row {
		display: none;
	}

	.faq-gridcontainer .startseite-gridaside-youtube {
		display: none;
	}

		.faq-gridcontainer .startseite-gridaside-youtube h4 {
			display: none;
		}

		.faq-gridcontainer .startseite-gridaside-youtube p {
			display: none;
		}

	.faq-gridcontainer .ico-hilfe {
		display: none;
	}

	.faq-gridcontainer .startseite-informationsmeldung {
		display: none;
	}
}
/* Gridcontainer der Startseitenunterseite "UeberUns" */
@media screen and (max-width: 535px) {

	.ueber-gridcontainer {
		grid-template-areas: "header" "main" "aside";
		width: calc(100% - 24px);
		margin: 12px;
	}

		.ueber-gridcontainer .startseite-gridlogin {
			display: none;
		}

	.ueber-gridcontainer-gridcontainer div.ico-bildung {
		display: none;
	}

	.ueber-gridcontainer .startseite-gridaside h4 {
		display: none;
	}

	.ueber-gridcontainer .row {
		display: none;
	}

	.ueber-gridcontainer .startseite-gridaside-youtube {
		display: none;
	}

		.ueber-gridcontainer .startseite-gridaside-youtube h4 {
			display: none;
		}

		.ueber-gridcontainer .startseite-gridaside-youtube p {
			display: none;
		}

	.ueber-gridcontainer .ico-hilfe {
		display: none;
	}

	.ueber-gridcontainer .startseite-gridbildungsangebot {
		display: none;
	}

	.ueber-gridcontainer .startseite-informationsmeldung {
		display: none;
	}

	.unterseiten {
		padding-bottom: 20px;
	}
}

/* Gridcontainer der Startseite für Tablet*/
@media screen and (min-width: 536px) and (max-width: 995px) {

	.startseite-gridcontainer {
		grid-template-areas: "header" "info" "login" "bildungsangebot" "main" "aside" "youtube";
		width: calc(100% - 40px);
		margin: 20px;
	}

		.startseite-gridcontainer .ym-header h1.ym-logo strong {
			margin: 0 auto 12px auto;
		}

		.startseite-gridcontainer .krz-h4-for-legend {
			text-align: center;
			font-size: 30px;
			margin-bottom: 6px;
		}

	.ym-header {
		padding: 20px 0;
	}

	form .ym-form-login input {
		font-size: 25px;
	}

	form.ym-form-login label {
		font-size: 25px;
	}

	form.ym-form-login .ym-forgot-password {
		font-size: 25px;
	}

	form.ym-form-login .ym-button-login {
		font-size: 30px;
	}

	.startseite-gridlogin {
		margin: 0px 70px;
	}

	.general-gridheader {
		padding-top: 10px 0px 30px 0px;
	}

	.startseite-gridbildungsangebot {
		padding-bottom: 10px;
	}

		.startseite-gridbildungsangebot h4 {
			font-size: 30px;
			padding-top: 20px;
		}

	.startseite-gridplaceholder h4 {
		text-align: center;
		font-size: 30px;
		padding-top: 1em;
	}

	.startseite-gridplaceholder .navigationsboxentext {
		font-size: 24px;
		text-align: center;
	}

	.startseite-gridaside-youtube h4 {
		font-size: 30px;
		padding-top: 1em;
	}

	.startseite-gridaside-youtube p {
		font-size: 24px;
	}

	.startseite-gridaside-youtube {
		padding-bottom: 1em;
	}

		.startseite-gridaside-youtube .youtube {
			text-align: center;
			display: block;
			width: 500px;
			height: 280px;
		}

			.startseite-gridaside-youtube .youtube img {
				width: 100%;
				height: 100%;
				max-width: unset;
				max-height: unset;
			}

			.startseite-gridaside-youtube .youtube .startseite-gridaside-youtube-logo i {
				color: #ff0000;
				opacity: 1;
			}

		.startseite-gridaside-youtube .youtube-full-width {
			width: calc(100vw - 24px);
			height: calc(50vw + 6px);
		}

	.startseite-gridaside h4 {
		text-align: center;
		font-size: 30px;
		padding-top: 1em;
	}

	.startseite-gridplaceholder h4 {
		padding-top: 1em;
		text-align: center;
	}

	div.ico-bildung {
		margin-right: 0px;
	}

		div.ico-bildung a {
			padding: 0px;
		}

		div.ico-bildung p {
			font-size: 21px;
		}

		div.ico-bildung a:hover {
			padding: 0px;
		}


	/* Footerbereich */

	.demo {
		margin: 0 auto;
		padding-top: 64px;
		max-width: 640px;
		width: 94%;
	}

	.footer {
		right: 0;
		left: 0;
		vertical-align: bottom;
		padding: 1rem 0;
		background-color: #000060;
		width: 100%;
	}

		.footer ul {
			display: block;
			list-style-type: none;
			text-align: center;
			margin: 0;
		}

		.footer li {
			display: inline-block;
			margin: 0 2em 0 2em;
		}

		.footer a {
			font-size: 20px;
			color: white;
			font-size: 20px;
			text-decoration: none;
			text-transform: uppercase;
		}

	.container3 {
		display: none;
	}

	.general-gridimpressum {
		display: none;
	}

	.grid_schulenbetriebe_laptop {
		display: none;
	}

	.startseite-gridDatenschutzerklaerung {
		display: none;
	}

	.startseite-gridaside-laptop {
		display: none;
	}

	.startseite-gridaside-tablet {
		display: none;
	}

	.startseite-gridaside-tablet-desktop {
		display: none;
	}
}
/* Gridcontainer der Startseitenunterseite "FAQ" */
@media screen and (min-width: 536px) and (max-width: 995px) {

	.faq-gridcontainer {
		grid-template-areas: ". . header . ." ". main main main ." ". . aside . .";
		grid-template-columns: minmax(5px, 15px) auto 250px auto minmax(5px, 15px);
		width: calc(100% - 24px);
		margin: 12px;
	}

	.general-gridheader {
		margin: auto auto;
	}

	.unterseiten {
		padding-bottom: 15px;
	}

	article, aside, details, figcaption, figure, footer, header, main, nav, section, summary .unterseiten {
		width: 100%;
	}

	.faq-gridcontainer .startseite-gridplaceholder h4 {
		padding: 0;
		text-align: center;
	}

	.faq-gridcontainer .ym-slide-link, a.ym-slide-link:focus {
		font-size: 15px;
		text-align: left;
	}

	.faq-gridcontainer .startseite-gridlogin {
		display: none;
	}

	.faq-gridcontainer div.ico-bildung {
		display: none;
	}

	.faq-gridcontainer .startseite-gridaside h4 {
		display: none;
	}

	.faq-gridcontainer .row {
		display: none;
	}

	.faq-gridcontainer .startseite-gridaside-youtube {
		display: none;
	}

		.faq-gridcontainer .startseite-gridaside-youtube h4 {
			display: none;
		}

		.faq-gridcontainer .startseite-gridaside-youtube p {
			display: none;
		}

	.faq-gridcontainer .ico-hilfe {
		display: none;
	}

	.faq-gridcontainer .startseite-informationsmeldung {
		display: none;
	}
}
/* Gridcontainer der Startseitenunterseite "UeberUns" */
@media screen and (min-width: 536px) and (max-width: 995px) {

	.ueber-gridcontainer {
		grid-template-areas: ". . header . ." ". main main main ." ". . aside . .";
		grid-template-columns: minmax(5px, 15px) auto 250px auto minmax(5px, 15px);
		width: calc(100% - 24px);
		margin: 12px;
	}

		.ueber-gridcontainer .startseite-gridlogin {
			display: none;
		}

	.ueber-gridcontainer-gridcontainer div.ico-bildung {
		display: none;
	}

	.ueber-gridcontainer .startseite-gridaside h4 {
		display: none;
	}

	.ueber-gridcontainer .row {
		display: none;
	}

	.ueber-gridcontainer .startseite-gridaside-youtube {
		display: none;
	}

		.ueber-gridcontainer .startseite-gridaside-youtube h4 {
			display: none;
		}

		.ueber-gridcontainer .startseite-gridaside-youtube p {
			display: none;
		}

	.ueber-gridcontainer .ico-hilfe {
		display: none;
	}

	.ueber-gridcontainer .startseite-gridbildungsangebot {
		display: none;
	}

	.ueber-gridcontainer .startseite-informationsmeldung {
		display: none;
	}
}


/******************************************************* Zwischengröße *******************************************************/
@media screen and (min-width: 996px) and (max-width: 1092px) {

	.startseite-gridcontainer {
		grid-template-areas: "header . aside_T" "info info info" "login main main" "youtube bildungsangebot bildungsangebot";
		grid-template-columns: 2fr 1fr 2fr;
		grid-template-rows: 130px minmax(min-content, max-content) 595px 330px;
		grid-column-gap: 30px;
		grid-row-gap: 30px;
		width: calc(100vw - 40px);
		margin: 10px 20px 0px 20px;
	}

	.startseite-gridaside-youtube {
		padding-top: 15px;
	}

	.startseite-gridplaceholder {
		padding-top: 60px;
	}

	div.ico-bildung {
		padding-top: 15px;
	}

	.ym-form button, .ym-form input[type="submit"] {
		margin: 0;
	}

	.general-gridheader {
		padding: 10px 0px 10px 0px;
	}

	.startseite-gridcontainer .ym-header h1.ym-logo strong {
		margin: 0 auto 0 auto;
	}

	.startseite-gridbildungsangebot {
		margin: 0;
	}

	.youtube-full-width {
		margin: 5px 0;
	}

	.card_B {
		height: 259px;
	}

	.card-icon_B {
		padding-top: 20px;
	}

	/*Loginbereich*/
	.hinweistext_login {
		text-align: center;
		font-size: 14px;
		padding: 10px 20px;
	}

	.container_login {
		padding: 0 20px 20px 20px;
	}

	.ym-form button, .ym-form input[type="submit"] {
		margin: .5em 0 10px 0 !important;
	}

	/*Footer*/
	.footer li {
		margin: 0 2em 0 2em;
	}

	.startseite-gridaside-youtube .youtube-full-width {
		width: calc(45vw - 4px);
		height: calc(25vw + 3px);
	}

	div.ico-bildung {
		margin: 0;
		text-align: center;
	}

		div.ico-bildung a {
			padding: 0;
			margin: 0;
		}

	.krz-h4-for-legend {
		text-align: center;
	}


	.js form.ym-form-login .ym-userdata {
		margin: 0px;
	}

	.startseite-gridlogin {
		height: 615px;
		padding: 0;
		box-shadow: 3px 3px 8px gainsboro;
	}

	.ym-form .ym-fbox {
		margin-bottom: 3px;
	}

	.startseite-footer {
		height: 70px;
	}

	.startseite-gridaside-tablet {
		float: right;
	}

	.container1 {
		display: none;
	}

	.container3 {
		display: none;
	}

	.card-main_N {
		display: none;
	}

	.card_N {
		display: none;
	}

	header_N {
		display: none;
	}

	.grid_schulenbetriebe_laptop {
		display: none;
	}

	.general-gridimpressum {
		display: none;
	}

	.startseite-gridaside-laptop {
		display: none;
	}

	.startseite-gridaside-tablet-desktop {
		display: none;
	}

	.startseite-gridplaceholder h4 {
		display: none;
	}

	.startseite-gridplaceholder p {
		display: none;
	}

	.startseite-gridaside {
		display: none;
	}

	.startseite-gridDatenschutzerklaerung {
		display: none;
	}

	.general-gridimpressum {
		display: none;
	}
}

/******************************************************* Tablet 2 (IPad Pro) *******************************************************/
@media screen and (min-width: 1093px) and (max-width: 1279px) {

	.startseite-gridcontainer {
		grid-template-areas: "header . aside_T" "info info info" "login main main" "youtube bildungsangebot bildungsangebot";
		grid-template-columns: 2fr 1fr 2fr;
		grid-template-rows: 130px minmax(min-content, max-content) 595px 330px;
		grid-column-gap: 40px;
		grid-row-gap: 30px;
		width: calc(100vw - 100px);
		margin: 10px 50px 0px 50px;
	}

	.startseite-gridaside-youtube {
		padding-top: 15px;
	}

	.startseite-gridplaceholder {
		padding-top: 60px;
	}

	div.ico-bildung {
		padding-top: 15px;
	}

	.ym-form button, .ym-form input[type="submit"] {
		margin: 0;
	}

	.general-gridheader {
		padding: 10px 0px 10px 0px;
	}

	.startseite-gridcontainer .ym-header h1.ym-logo strong {
		margin: 0 auto 0 auto;
	}

	.startseite-gridbildungsangebot {
		margin: 0;
	}

	.youtube-full-width {
		margin: 5px 0;
	}

	.card_B {
		height: 259px;
	}

	.card-icon_B {
		padding-top: 20px;
	}

	/*Loginbereich*/
	.hinweistext_login {
		text-align: center;
		font-size: 14px;
		padding: 10px 20px;
	}

	.container_login {
		padding: 0 20px 20px 20px;
	}

	.ym-form button, .ym-form input[type="submit"] {
		margin: .5em 0 10px 0 !important;
	}

	/*Footer*/
	.footer li {
		margin: 0 2em 0 2em;
	}

	.startseite-gridaside-youtube .youtube-full-width {
		width: calc(45vw - 4px);
		height: calc(25vw + 3px);
	}

	div.ico-bildung {
		margin: 0;
		text-align: center;
	}

		div.ico-bildung a {
			padding: 0;
			margin: 0;
		}

	.krz-h4-for-legend {
		text-align: center;
	}


	.js form.ym-form-login .ym-userdata {
		margin: 0px;
	}

	.startseite-gridlogin {
		height: 615px;
		padding: 0;
		box-shadow: 3px 3px 8px gainsboro;
	}

	.ym-form .ym-fbox {
		margin-bottom: 3px;
	}

	.startseite-footer {
		height: 70px;
	}

	.startseite-gridaside-tablet {
		float: right;
	}

	.container1 {
		display: none;
	}

	.container3 {
		display: none;
	}

	.card-main_N {
		display: none;
	}

	.card_N {
		display: none;
	}

	header_N {
		display: none;
	}

	.grid_schulenbetriebe_laptop {
		display: none;
	}

	.general-gridimpressum {
		display: none;
	}

	.startseite-gridaside-laptop {
		display: none;
	}

	.startseite-gridaside-tablet-desktop {
		display: none;
	}

	.startseite-gridplaceholder h4 {
		display: none;
	}

	.startseite-gridplaceholder p {
		display: none;
	}

	.startseite-gridaside {
		display: none;
	}

	.startseite-gridDatenschutzerklaerung {
		display: none;
	}

	.general-gridimpressum {
		display: none;
	}
}
/* Gridcontainer der Startseitenunterseite "FAQ" */
@media screen and (min-width: 996px) and (max-width: 1279px) {

	.faq-gridcontainer {
		grid-template-areas: ". . header . ." ". main main main ." ". . aside . .";
		grid-template-columns: minmax(5px, 15px) auto 250px auto minmax(5px, 15px);
		width: calc(100% - 24px);
		margin: 12px;
	}

	.general-gridheader {
		margin: 0;
	}

	.unterseiten {
		padding-bottom: 15px;
	}

	article, aside, details, figcaption, figure, footer, header, main, nav, section, summary .unterseiten {
		width: 100%;
	}

	.faq-gridcontainer .startseite-gridplaceholder h4 {
		padding: 0;
		text-align: center;
	}

	.faq-gridcontainer .ym-slide-link, a.ym-slide-link:focus {
		font-size: 15px;
		text-align: left;
	}

	.faq-gridcontainer .startseite-gridlogin {
		display: none;
	}

	.faq-gridcontainer div.ico-bildung {
		display: none;
	}

	.faq-gridcontainer .startseite-gridaside h4 {
		display: none;
	}

	.faq-gridcontainer .row {
		display: none;
	}

	.faq-gridcontainer .startseite-gridaside-youtube {
		display: none;
	}

		.faq-gridcontainer .startseite-gridaside-youtube h4 {
			display: none;
		}

		.faq-gridcontainer .startseite-gridaside-youtube p {
			display: none;
		}

	.faq-gridcontainer .ico-hilfe {
		display: none;
	}

	.faq-gridcontainer .startseite-gridaside-tablet {
		display: none;
	}

	.faq-gridcontainer .startseite-informationsmeldung {
		display: none;
	}
}
/* Gridcontainer der Startseitenunterseite "UeberUns" */
@media screen and (min-width: 996px) and (max-width: 1279px) {

	.ueber-gridcontainer {
		grid-template-areas: ". . header . ." ". main main main ." ". . aside . .";
		grid-template-columns: minmax(25px, 45px) auto 250px auto minmax(25px, 45px);
		width: calc(100% - 24px);
		margin: 12px;
	}

		.ueber-gridcontainer .startseite-gridlogin {
			display: none;
		}

	.ueber-gridcontainer-gridcontainer div.ico-bildung {
		display: none;
	}

	.ueber-gridcontainer .startseite-gridaside h4 {
		display: none;
	}

	.ueber-gridcontainer .row {
		display: none;
	}

	.ueber-gridcontainer .startseite-gridaside-youtube {
		display: none;
	}

		.ueber-gridcontainer .startseite-gridaside-youtube h4 {
			display: none;
		}

		.ueber-gridcontainer .startseite-gridaside-youtube p {
			display: none;
		}

	.ueber-gridcontainer .ico-hilfe {
		display: none;
	}

	.ueber-gridcontainer .startseite-gridbildungsangebot {
		display: none;
	}

	.ueber-gridcontainer .startseite-gridaside-tablet {
		display: none;
	}

	.ueber-gridcontainer .startseite-gridaside {
		display: block;
	}

	.ueber-gridcontainer .startseite-gridplaceholder p {
		display: block;
	}

	.ueber-gridcontainer .startseite-informationsmeldung {
		display: none;
	}

	.unterseiten {
		margin: 0 0 30px 0;
	}

	.ym-form button, .ym-form input[type="submit"] {
		margin: .9em 0 0 0;
	}
}

/* Gridcontainer der Startseite für Laptop*/
@media screen and (min-width: 1280px) and (max-width: 1800px) {

	.startseite-gridcontainer {
		grid-template-areas: ". header aside_L ." ". info info ." ". login main ." ". login youtube .";
		grid-template-columns: minmax(100px, 120px) 350px 2fr minmax(100px, 120px);
		grid-template-rows: 100px minmax(min-content, max-content) 210px auto;
		grid-column-gap: 30px;
		grid-row-gap: 45px;
	}

	.general-gridheader {
		padding: 15px 0px 10px 55px;
		margin: 0px;
	}

	.startseite-gridaside-youtube {
		margin: 0 auto;
	}

		.startseite-gridaside-youtube .youtube {
			width: 50vw;
			height: 35vh;
		}

		.startseite-gridaside-youtube .youtube-full-width {
			width: 100%;
			height: 100%;
			border-radius: 5px;
		}

		.startseite-gridaside-youtube h4 {
			display: none;
		}

		.startseite-gridaside-youtube p {
			display: none;
		}

		.startseite-gridaside-youtube .youtube {
			margin: auto auto;
			height: 393px;
			width: 700px;
			position: relative;
		}

			.startseite-gridaside-youtube .youtube img {
				position: relative;
				height: 100%;
				width: 100%;
				max-height: 300px;
				max-width: 533px;
				left: calc(50% - 266px);
				top: calc(50% - 150px);
			}

	.startseite-gridplaceholder {
	}

	div.ico-bildung {
		display: none;
	}

		div.ico-bildung a {
			padding: 0;
		}

	.startseite-gridlogin {
		box-shadow: 3px 3px 8px gainsboro;
	}

	.ym-form .ym-fbox {
		margin-bottom: 17px;
	}

	.ym-form button, .ym-form input[type="submit"] {
		margin: .9em 0 0 0;
	}

	.footer li {
		margin: 0 4em 0 4em;
	}

	.startseite-gridplaceholder h4 {
		display: none;
	}

	.startseite-gridplaceholder p {
		display: none;
	}

	.ym-form textarea, .ym-form input, .ym-form select, .ym-form input [type="submit"] {
		width: 100%;
	}

	.navigationselemente-laptop-schrift h4 {
		font-size: 20px;
		display: table;
		padding: 10px 0;
		margin: auto;
	}

	.navigationselemente-laptop-schrift p {
		display: table;
		margin: auto;
	}

	.krz-h4-for-legend {
		text-align: center;
	}

	.startseite-gridDatenschutzerklaerung {
		display: none;
	}

	.container1 {
		display: none;
	}

	.card-main_N {
		display: none;
	}

	.card_N {
		display: none;
	}

	header_N {
		display: none;
	}

	.general-gridimpressum {
		display: none;
	}

	div.ico-bildung a:before, div.ico-bildung strong:before {
		display: none;
	}

	.startseite-gridaside {
		display: none;
	}

	.startseite-gridaside-tablet {
		display: none;
	}

	.startseite-gridbildungsangebot {
		display: none;
	}
}
/* Gridcontainer der Startseitenunterseite "FAQ" */
@media screen and (min-width: 1280px) and (max-width: 1800px) {

	.faq-gridcontainer {
		grid-template-areas: ". . header . ." ". main main main ." ". . aside . .";
		grid-template-columns: minmax(5px, 15px) auto 250px auto minmax(5px, 15px);
		grid-template-rows: 100px auto 100px;
		width: calc(100% - 24px);
		margin: 12px;
	}

	.general-gridheader {
		margin: 0;
	}

	.unterseiten {
		padding-bottom: 15px;
	}

	article, aside, details, figcaption, figure, footer, header, main, nav, section, summary .unterseiten {
		width: 100%;
	}

	.faq-gridcontainer .startseite-gridplaceholder h4 {
		padding: 0;
		text-align: center;
	}

	.faq-gridcontainer .ym-slide-link, a.ym-slide-link:focus {
		font-size: 15px;
		text-align: left;
	}

	.faq-gridcontainer .startseite-gridlogin {
		display: none;
	}

	.faq-gridcontainer div.ico-bildung {
		display: none;
	}

	.faq-gridcontainer .startseite-gridaside h4 {
		display: none;
	}

	.faq-gridcontainer .row {
		display: none;
	}

	.faq-gridcontainer .startseite-gridaside-youtube {
		display: none;
	}

		.faq-gridcontainer .startseite-gridaside-youtube h4 {
			display: none;
		}

		.faq-gridcontainer .startseite-gridaside-youtube p {
			display: none;
		}

	.faq-gridcontainer .ico-hilfe {
		display: none;
	}

	.faq-gridcontainer .startseite-gridaside-laptop {
		display: none;
	}

	.faq-gridcontainer .startseite-informationsmeldung {
		display: none;
	}
}

/* Gridcontainer der Startseitenunterseite "UeberUns" */
@media screen and (min-width: 1280px) and (max-width: 1800px) {

	.ueber-gridcontainer {
		grid-template-areas: ". . header . ." ". main main main ." ". . aside . .";
		grid-template-columns: minmax(25px, 45px) auto 250px auto minmax(25px, 45px);
		grid-template-rows: 100px auto 100px;
		width: calc(100% - 24px);
		margin: 12px;
	}

		.ueber-gridcontainer .startseite-gridlogin {
			display: none;
		}

	.ueber-gridcontainer-gridcontainer div.ico-bildung {
		display: none;
	}

	.ueber-gridcontainer .startseite-gridaside h4 {
		display: none;
	}

	.ueber-gridcontainer .row {
		display: none;
	}

	.ueber-gridcontainer .startseite-gridaside-youtube {
		display: none;
	}

		.ueber-gridcontainer .startseite-gridaside-youtube h4 {
			display: none;
		}

		.ueber-gridcontainer .startseite-gridaside-youtube p {
			display: none;
		}

	.ueber-gridcontainer .ico-hilfe {
		display: none;
	}

	.ueber-gridcontainer .startseite-gridbildungsangebot {
		display: none;
	}

	.ueber-gridcontainer .startseite-gridaside-tablet {
		display: none;
	}

	.ueber-gridcontainer .startseite-gridaside {
		display: block;
	}

	.ueber-gridcontainer .startseite-gridplaceholder p {
		display: block;
	}

	.ueber-gridcontainer .startseite-gridaside-laptop {
		display: none;
	}

	.ueber-gridcontainer .startseite-informationsmeldung {
		display: none;
	}

	.unterseiten {
		margin: 0 0 30px 0;
	}
}

/* Gridcontainer der Startseite für Desktop*/
@media screen and (min-width: 1801px) {

	.startseite-gridcontainer {
		grid-template-areas: ". . header .  . " ". info info info ." ". login main bildungsangebot ." ". login main aside ." ". login main youtube .";
		grid-template-columns: 8% 1fr 2fr 1fr 8%;
		grid-template-rows: 150px minmax(min-content, max-content) 160px 160px 1fr;
		grid-column-gap: 65px;
		grid-row-gap: 35px;
	}

	a {
		font-size: 25px;
	}

	.card-main {
		height: 120px;
	}

	.card-icon {
		font-size: 70px;
	}

	.ym-header {
		padding: 10px;
		margin-right: 0;
	}

	.startseite-gridcontainer .krz-h4-for-legend {
		text-align: center;
		font-size: 24px;
		margin-bottom: 50px;
	}

	.startseite-gridlogin {
		height: 100%;
		padding: 0px;
		box-shadow: 3px 3px 8px gainsboro;
	}

	.ym-form .ym-fbox-check label {
		font-size: 18px;
	}

	form.ym-form-login input {
		font-size: 18px;
	}

	form.ym-form-login label {
		font-size: 18px;
	}

	form.ym-form-login .ym-forgot-password {
		font-size: 18px;
	}

	form.ym-form-login .ym-button-login {
		font-size: 30px;
	}

	div.ico-bildung {
		margin: 0;
	}

		div.ico-bildung h4 {
			display: none;
		}

		div.ico-bildung p {
			display: none;
		}

	.startseite-gridplaceholder {
		padding-top: 0;
	}

		.startseite-gridplaceholder h4 {
			display: none;
		}

		.startseite-gridplaceholder p {
			display: none;
		}

	.startseite-gridaside {
		margin-top: 0px;
	}

	.startseite-gridaside-youtube h4 {
		font-size: 27px;
	}

	.startseite-gridaside-youtube p {
		font-size: 17px;
		margin-bottom: 5px;
	}

	.startseite-gridaside-youtube .youtube-full-width {
		width: 100%;
		height: 100%;
		border-radius: 5px;
	}

	.ym-form input[type="submit"] {
		font-size: 18px;
	}

	div.ico-bildung a:before, div.ico-bildung strong:before {
		display: none;
	}

	.card-main_N {
		display: none;
	}

	.card_N {
		display: none;
	}

	.general-gridimpressum {
		display: none;
	}

	.grid_schulenbetriebe_laptop {
		display: none;
	}

	.startseite-gridaside h4 {
		display: none;
	}

	.startseite-gridaside-laptop {
		display: none;
	}

	.startseite-gridaside-tablet {
		display: none;
	}

	.startseite-gridDatenschutzerklaerung {
		display: none;
	}

	.startseite-gridaside-youtube h4 {
		display: none;
	}

	.startseite-gridaside-youtube p {
		display: none;
	}
}

/* Gridcontainer der Startseitenunterseite "FAQ" */
@media screen and (min-width: 1801px) {

	.faq-gridcontainer {
		grid-template-areas: ". . header . ." ". main main main ." ". . aside . .";
		grid-template-columns: minmax(50px, 70px) auto 250px auto minmax(50px, 70px);
		grid-template-rows: 150px auto 100px;
		width: calc(100% - 24px);
		margin: 12px;
	}

	.general-gridheader {
		margin: auto 0;
	}

	.unterseiten {
		padding-bottom: 15px;
	}

	article, aside, details, figcaption, figure, footer, header, main, nav, section, summary .unterseiten {
		width: 100%;
	}

	.ym-nav-main a, .ym-nav-main strong {
		line-height: 0;
	}

	.faq-gridcontainer .startseite-gridplaceholder h4 {
		padding: 0;
		text-align: center;
	}

	.faq-gridcontainer .ym-slide-link, a.ym-slide-link:focus {
		font-size: 15px;
		text-align: left;
	}

	.faq-gridcontainer .startseite-gridlogin {
		display: none;
	}

	.faq-gridcontainer div.ico-bildung {
		display: none;
	}

	.faq-gridcontainer .startseite-gridaside h4 {
		display: none;
	}

	.faq-gridcontainer .row {
		display: none;
	}

	.faq-gridcontainer .startseite-gridaside-youtube {
		display: none;
	}

		.faq-gridcontainer .startseite-gridaside-youtube h4 {
			display: none;
		}

		.faq-gridcontainer .startseite-gridaside-youtube p {
			display: none;
		}

	.faq-gridcontainer .ico-hilfe {
		display: none;
	}

	.faq-gridcontainer .startseite-gridaside-tablet {
		display: none;
	}

	.faq-gridcontainer .startseite-informationsmeldung {
		display: none;
	}
}

/* Gridcontainer der Startseitenunterseite "UeberUns" */
@media screen and (min-width: 1801px) {
	.ueber-gridcontainer {
		grid-template-areas: ". . header . ." ". main main main ." ". . aside . .";
		grid-template-columns: minmax(50px, 70px) auto 250px auto minmax(50px, 70px);
		grid-template-rows: 100px auto 100px;
		width: calc(100% - 24px);
		margin: 12px;
	}

	.ym-nav-main a, .ym-nav-main strong {
		border-color: white;
	}

	.ueber-gridcontainer .startseite-gridlogin {
		display: none;
	}

	.ueber-gridcontainer-gridcontainer div.ico-bildung {
		display: none;
	}

	.ueber-gridcontainer .startseite-gridaside h4 {
		display: none;
	}

	.ueber-gridcontainer .row {
		display: none;
	}

	.ueber-gridcontainer .startseite-gridaside-youtube {
		display: none;
	}

		.ueber-gridcontainer .startseite-gridaside-youtube h4 {
			display: none;
		}

		.ueber-gridcontainer .startseite-gridaside-youtube p {
			display: none;
		}

	.ueber-gridcontainer .ico-hilfe {
		display: none;
	}

	.ueber-gridcontainer .startseite-gridbildungsangebot {
		display: none;
	}

	.ueber-gridcontainer .startseite-gridaside-tablet {
		display: none;
	}

	.ueber-gridcontainer .startseite-gridaside {
		display: block;
	}

	.ueber-gridcontainer .startseite-gridplaceholder p {
		display: block;
	}

	.ueber-gridcontainer .startseite-gridaside-laptop {
		display: none;
	}

	.ueber-gridcontainer .startseite-informationsmeldung {
		display: none;
	}

	.unterseiten {
		margin: 0 0 80px 0;
	}
}


/* ====== Allgemeingültige Einstellungen für alle Devicegrößen ======== */
/* Die Unterüberschrift der Gridarea "Gridaside-Youtube" wird zentriert */
.startseite-gridaside-youtube p {
	text-align: center;
}

/* Die Überschrift der Gridarea "Gridaside-Youtube" wird zentriert */
.startseite-gridaside-youtube h4 {
	text-align: center;
}

/* Die Überschrift der Gridarea "Bildungsangebotes" wird zentriert */
.startseite-gridbildungsangebot h4 {
	text-align: center;
}

/* Die Unterüberschrift der Gridarea "Bildungsangebotes" wird zentriert */
.startseite-gridbildungsangebot p {
	text-align: center;
}

.startseite-gridplaceholder p {
	text-align: center;
}


/* EDGE Fixes */
@supports (-ms-ime-align:auto) {
	@media screen and (min-width: 1280px) {
		.startseite-gridcontainer {
			grid-template-rows: 150px 33% 33% 33%;
		}

		.startseite-gridlogin {
			height: 800px;
		}

		.startseite-gridaside-youtube .youtube {
			height: 300px;
		}
	}
}
