/*
Autor: Werbung 705, Marco Brüggemann, www.705gruppe.de
*/
/* ========================================================================================== */
/* ===   GLOBAL DEFINITION über 1024px   ==================================================== */
/* ========================================================================================== */

/* body ist in Zeilen unterteilt und jeweils benannt */
body.home, body.unterseite,  body.impressum {
	margin:0; /* alle Randabstände für Body auf 0 setzen */
	padding:0; /* alle Innenrandabstände für Body auf 0 setzen */
	display: grid; /* Body hat ein Grid */
	grid-template-rows: 800px auto auto 50px; /* das Grid besteht aus Zeilen mit jeweils diesen Abständen */
	grid-template-areas:
		"sliderTop"
		"contentArea"
		"footerArea"
		"footerMenuLine"; /* Jede Zeile im Grid bekommt einen Namen */
	padding-top: 55px; /* drückt den Inhalt nach unten, damit die festgesetze Menüleise den Inhalt nicht verdeckt */ }

body.unterseite {
	grid-template-rows: 800px auto auto 50px; /* das Grid besteht aus Zeilen mit jeweils diesen Abständen */ }

body.impressum {
	grid-template-rows: 500px 1fr 50px; /* das Grid besteht aus Zeilen mit jeweils diesen Abständen */
	grid-template-areas:
		"sliderTop"
		"contentArea"
		"footerMenuLine"; /* Jede Zeile im Grid bekommt einen Namen */ }

body.impressum {
	grid-template-rows: 500px auto 50px; /* das Grid besteht aus Zeilen mit jeweils diesen Abständen */ }

/* für jede Zeile im Body gibt es eine ZeilenBox; alle ZeilenBox haben ein gleiches Grid mit gleichen Breiten und Abständen zum Rand */
#sliderTop,
#sliderTop_1r,
#sliderTop_2r,
#sliderTop_d,
#pageHeader,
.contentThema,
#pageFooter,
#pageFooterMenuline {
	display: grid; /* Jede ZeilenBox ist auch ein Grid */
	grid-template-columns: 1fr 1000px 1fr; /* Das Grid besteht auch Spalten in der Mitte ist die Breite für das jeweilige Display definiert*/
}

/* für jede Zeile im Body gibt es eine ZeilenBox; alle ZeilenBox haben ein gleiches Grid mit gleichen Breiten und Abständen zum Rand */
.contentPictoBild {
	display: grid; /* Jede ZeilenBox ist auch ein Grid */
	grid-template-columns: 1fr 400px 100px 100px 400px 1fr; /* Das Grid besteht auch Spalten in der Mitte ist die Breite für das jeweilige Display definiert*/
}

.fullWidht {
	width: 100%; }



#sliderTop,
#sliderTop_1r,
#sliderTop_2r,
#sliderTop_d { /* ZeilenBox */
	grid-template-areas: ". pageHeaderContent .";/* der Name des mitleren Bereichs im Grid der ZeilenBox #pageHeader wird benannt in pageHeaderContent */}

	#sliderTextarea { /* ZeilenInhaltsBox */
		grid-area: pageHeaderContent;  /* Die Box #pageHeaderContent wird dem Grid-Bereich pageHeaderContent zugeordnet */ }



/* für jede Zeilenbox gibt es eine ZeilenInhaltsBox, jede Zeilenbox wird der Zeile im Body zugeordnet, in jeder Zeile wird die Mitte jeweils benannt  */
#pageHeader { /* ZeilenBox */
	grid-template-areas: ". pageHeaderContent .";/* der Name des mitleren Bereichs im Grid der ZeilenBox #pageHeader wird benannt in pageHeaderContent */
	position: fixed; /* festsetzen der Menüleiste */
	top:0; /* Menüleiste wird nicht nach unten gedrückt */
	height: 60px;}

	#pageHeaderContent { /* ZeilenInhaltsBox */
		grid-area: pageHeaderContent;  /* Die Box #pageHeaderContent wird dem Grid-Bereich pageHeaderContent zugeordnet */ }

		/* Bereich Menü für Desktop  */
		#pageHeaderContent { /* ZeilenInhaltsBox */
			display: grid; /* ist ein Grid */
			grid-template-columns: 1fr 5fr; /* in 6 gleichgroße Spalten */
			grid-template-areas: "menuLogoDisplay menuDisplay"; /* Jede Zeile im Grid bekommt einen Namen */ }

			#headerlogo { /* Logo im Menü Display */
				grid-area: menuLogoDisplay; } /* -------> MenüLogo wird in der style.css gestaltet */

			#mainMenu { /* Menü Display */
				grid-area: menuDisplay; } /* -------> Menü wird in der style.css gestaltet */




#pageContent {
	grid-area: contentArea }/* ZeilenBox */

	.pageContentContent { /* ZeilenInhaltsBox */
		grid-column: 2/3;
		display: grid; /* Jede ZeilenBox ist auch ein Grid */
		grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; /* Das Grid besteht auch Spalten in der Mitte ist die Breite für das jeweilige Display definiert*/}

	.pageContentContentPicto { /* ZeilenInhaltsBox */
		grid-column: 2/3;
		display: grid; /* Jede ZeilenBox ist auch ein Grid */
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 1fr 1fr;
		grid-template-areas:
			"zimmerbild zimmertext"
			"zimmerbild zimmertext";

	}
		
		/* Inhaltsbereiche beginnend mit der ersten Spalte */
		.content_1_1 { grid-column: 1/2}
		.content_1_2 { grid-column: 1/3}
		.content_1_3 { grid-column: 1/4}
		.content_1_4 { grid-column: 1/5}
		.content_1_5 { grid-column: 1/6}
		.content_1_6 { grid-column: 1/7}
		.content_1_7 { grid-column: 1/8}
		.content_1_8 { grid-column: 1/9}

		/* Inhaltsbereiche beginnend mit der zweiten Spalte */
		.content_2_2 { grid-column: 2/3}
		.content_2_3 { grid-column: 2/4}
		.content_2_4 { grid-column: 2/5}
		.content_2_5 { grid-column: 2/6}
		.content_2_6 { grid-column: 2/7}
		.content_2_7 { grid-column: 2/8}
		.content_2_8 { grid-column: 2/9}

		/* Inhaltsbereiche beginnend mit der dritten Spalte */
		.content_3_3 { grid-column: 3/4}
		.content_3_4 { grid-column: 3/5}
		.content_3_5 { grid-column: 3/6}
		.content_3_6 { grid-column: 3/7}
		.content_3_7 { grid-column: 3/8}
		.content_3_8 { grid-column: 3/9}

		/* Inhaltsbereiche beginnend mit der vierten Spalte */
		.content_4_4 { grid-column: 4/5}
		.content_4_5 { grid-column: 4/6}
		.content_4_6 { grid-column: 4/7}
		.content_4_7 { grid-column: 4/8}
		.content_4_8 { grid-column: 4/9}

		/* Inhaltsbereiche beginnend mit der fünften Spalte */
		.content_5_5 { grid-column: 5/6}
		.content_5_6 { grid-column: 5/7}
		.content_5_7 { grid-column: 5/8}
		.content_5_8 { grid-column: 5/9}

		/* Inhaltsbereiche beginnend mit der sechsten Spalte */
		.content_6_6 { grid-column: 6/7}
		.content_6_7 { grid-column: 6/8}
		.content_6_8 { grid-column: 6/9}

		/* Inhaltsbereiche beginnend mit der siebenten Spalte */
		.content_7_7 { grid-column: 7/8}
		.content_7_8 { grid-column: 7/9}

		/* Inhaltsbereiche beginnend mit der achten Spalte */
		.content_8_8 { grid-column: 8/9}


.imagearea, .imagearea_Slider {
	display: grid; /* Jede ZeilenBox ist auch ein Grid */
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; /* Das Grid für die Spalten für Bilder*/
	grid-template-rows: 150px 150px 150px 150px 150px;  /* Für das Grid fümf Zeilen je 200px */
}

.imagearea_karte, .imagearea_EinBild, .imagearea_grundriss {
	display: grid; /* Jede ZeilenBox ist auch ein Grid */
	grid-template-columns: 1fr; /* Das Grid für die Spalten für Bilder*/
	grid-template-rows: 750px;  /* Für das Grid fümf Zeilen je 200px */
}

		/* BilderInhalte - Spaltenausdehnung 1 bis 8 */
		.img_col_1_1 { grid-column: 1/2}
		.img_col_1_2 { grid-column: 1/3}
		.img_col_1_3 { grid-column: 1/4}
		.img_col_1_4 { grid-column: 1/5}
		.img_col_1_5 { grid-column: 1/6}
		.img_col_1_6 { grid-column: 1/7}
		.img_col_1_7 { grid-column: 1/8}
		.img_col_1_8 { grid-column: 1/9}

		/* BilderInhalte - Spaltenausdehnung 2 bis 8 */
		.img_col_2_2 { grid-column: 2/3}
		.img_col_2_3 { grid-column: 2/4}
		.img_col_2_4 { grid-column: 2/5}
		.img_col_2_5 { grid-column: 2/6}
		.img_col_2_6 { grid-column: 2/7}
		.img_col_2_7 { grid-column: 2/8}
		.img_col_2_8 { grid-column: 2/9}

		/* BilderInhalte - Spaltenausdehnung 3 bis 8 */
		.img_col_3_3 { grid-column: 3/4}
		.img_col_3_4 { grid-column: 3/5}
		.img_col_3_5 { grid-column: 3/6}
		.img_col_3_6 { grid-column: 3/7}
		.img_col_3_7 { grid-column: 3/8}
		.img_col_3_8 { grid-column: 3/9}

		/* BilderInhalte - Spaltenausdehnung 4 bis 8 */
		.img_col_4_4 { grid-column: 4/5}
		.img_col_4_5 { grid-column: 4/6}
		.img_col_4_6 { grid-column: 4/7}
		.img_col_4_7 { grid-column: 4/8}
		.img_col_4_8 { grid-column: 4/9}

		/* BilderInhalte - Spaltenausdehnung 5 bis 8 */
		.img_col_5_5 { grid-column: 5/6}
		.img_col_5_6 { grid-column: 5/7}
		.img_col_5_7 { grid-column: 5/8}
		.img_col_5_8 { grid-column: 5/9}

		/* BilderInhalte - Spaltenausdehnung 6 bis 8 */
		.img_col_6_6 { grid-column: 6/7}
		.img_col_6_7 { grid-column: 6/8}
		.img_col_6_8 { grid-column: 6/9}

		/* BilderInhalte - Spaltenausdehnung 7 bis 8 */
		.img_col_7_7 { grid-column: 7/8}
		.img_col_7_8 { grid-column: 7/9}

		/* BilderInhalte - Spaltenausdehnung 8 bis 8 */
		.img_col_8_8 { grid-column: 8/9}


		/* BilderInhalte - Reihenausdehnung 1 bis 5 */
		.img_row_1_1 { grid-row: 1/2 }
		.img_row_1_2 { grid-row: 1/3}
		.img_row_1_3 { grid-row: 1/4}
		.img_row_1_4 { grid-row: 1/5}
		.img_row_1_5 { grid-row: 1/6}

		/* BilderInhalte - Reihenausdehnung 2 bis 5 */
		.img_row_2_2 { grid-row: 2/3}
		.img_row_2_3 { grid-row: 2/4}
		.img_row_2_4 { grid-row: 2/5}
		.img_row_2_5 { grid-row: 2/6}

		/* BilderInhalte - Reihenausdehnung 3 bis 5 */
		.img_row_3_3 { grid-row: 3/4}
		.img_row_3_4 { grid-row: 3/5}
		.img_row_3_5 { grid-row: 3/6}

		/* BilderInhalte - Reihenausdehnung 4 bis 5 */
		.img_row_4_4 { grid-row: 4/5}
		.img_row_4_5 { grid-row: 4/6}

		/* BilderInhalte - Reihenausdehnung 5 bis 5 */
		.img_row_5_5 { grid-row: 5/6}


/************************ SLIDER START ************************/
	.SliderLogo {
		grid-column: 2/5;
		grid-row: 2/5;
	}

	.SliderLogoUnterschrift {
		grid-column: 2/5;
		grid-row: 5/6
	}
/************************ SLIDER ENDE ************************/

/************************ ZIMMER-BOXEN START ************************/
	.zimmerBox_l             { grid-column: 1/5}
	.zimmerBox_r             { grid-column: 5/9}

	.pictureTextBox {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr 1fr;
	}
	.pictureTextBox_hl       { grid-column: 1/5 }
	.pictureTextBox_p        { grid-column: 1/3 }
	.pictureTextBox_preis    { grid-column: 3/5 }
	.pictureTextBox_b_mehr   { grid-column: 1/3 }
	.pictureTextBox_b_buchen { grid-column: 4/5 }
/************************ ZIMMER-BOXEN ENDE ************************/

/************************ ZIMMERMIETLISTE START ************************/
	.zimmerMietePictogramm { grid-column: 1/2 }
	.zimmerMiete_hl { grid-column: 2/9 }
	.zimmerMieteliste { grid-column: 2/5 }
	.infobox { grid-column: 5/9 }
/************************ ZIMMERMIETLISTE ENDE ************************/

/************************ ERSTER BILDKONTENBEREICH START ************************/
	.bildcontent_01 {grid-column: 1/6; grid-row: 1/6 }
	.bildcontent_02 {grid-column: 6/9; grid-row: 1/3 }
	.bildcontent_03 {grid-column: 6/9; grid-row: 3/6 }
/************************ ERSTER BILDKONTENBEREICH ENDE ************************/

/************************ VORTEILE PICTOGRAMME START ************************/
	.picto_Lage { grid-column: 1/3 }
	.picto_Kalender { grid-column: 3/5 }
	.picto_Umwelt { grid-column: 5/7 }
	.picto_Wohn { grid-column: 7/9 }
/************************ VORTEILE PICTOGRAMME ENDE ************************/

/************************ VORTEILE PICTOGRAMME START ************************/
	.pictolinks { grid-column: 1/3 }
	.pictolinksmitte { grid-column: 3/5 }
	.pictorechtsmitte { grid-column: 5/7 }
	.pictorechts { grid-column: 7/9 }
/************************ VORTEILE PICTOGRAMME ENDE ************************/

/************************ LANDKARTE START ************************/
	.bildcontent_04 {grid-column: 1/2; grid-row: 1/2 }
/************************ LANDKARTE ENDE ************************/

/************************ KARTE-LEGENDE START ************************/
	.bahn, .park, .sport, .shop {
		display: grid; /* Jede ZeilenBox ist auch ein Grid */
		grid-template-columns: 1fr 2fr; /* Das Grid für die Spalten für Bilder*/
	}

	.bahn, .park { grid-column: 2/5 }
	.sport, .shop  { grid-column: 5/8 }
/************************ KARTE-LEGENDE ENDE ************************/

/************************ KONTAKT-BOX START ************************/
	.kontaktbox {
		grid-column: 2/8;
		display: grid;
		grid-template-columns: 1fr 1fr;
	}
	.kontaktText { grid-column: 1/3 }
/************************ KONTAKT-BOX ENDE ************************/
	
/************************ ZWEITER BILDKONTENBEREICH START ************************/
	.bildcontent_05 {grid-column: 1/9; grid-row: 1/6 }
/************************ ZWEITER BILDKONTENBEREICH ENDE ************************/

/************************ FOOTER-BEREICH START ************************/
	#pageFooter { /* ZeilenBox */
		grid-area: footerArea;
		grid-template-areas: ". pageFooterContent ."; }

		#pageFooterContent { /* ZeilenInhaltsBox */
			grid-area: pageFooterContent; }



	#pageFooterMenuline { /* ZeilenBox */
		grid-area: footerMenuLine;
		grid-template-areas: ". pageFooterMenulineContent ."; }

		#pageFooterMenulineContent { /* ZeilenInhaltsBox */
			grid-area: pageFooterMenulineContent; }


	.footer-Standort { grid-column: 1/4 }
	.footer-Ansprechpartner  { grid-column: 4/7 }
	.footer-Kontakt { grid-column: 7/9 }
/************************ FOOTER-BEREICH ENDE ************************/

/************************ UNTERSEITE ZIMMER START ************************/

	/************************ THEMA "KeyFacts" START ************************/
		.keyFacts_grundriss { grid-area: zimmerbild }
		.keyFacts_text { grid-area: zimmertext }
	/************************ THEMA "KeyFacts" ENDE ************************/

		.pageContentContentflexVorteile, .pageContentContentflexComfortPlus, .pageContentContentflexUmgebung  {
			grid-column: 2/3;
			display: flex;
			justify-content: flex-start;
			flex-direction: row;
			flex-wrap: wrap;
			gap: 10px 20px
		}

		.vorteileBild { grid-column: 4/7 }
		.umgebungBild { grid-column: 1/4 }
		.comfortPlusBild { grid-column: 4/7 }

		.pageContentContentflexVorteile { grid-column: 2/4 }
		.pageContentContentflexComfortPlus { grid-column: 2/4 }
		.pageContentContentflexUmgebung { grid-column: 4/6 }

		.pictoklein { width: 100px }
		.pictoklein_comfort { width: 100% }

/************************ UNTERSEITE ZIMMER ENDE ************************/

/*********************** UNTERSEITE LL Impressum und Datenachutz START ************************/

	/************************ SLIDER START ************************/
		.LL_Datenschutz_TitelTextBox { grid-column: 2/8; grid-row: 4/5 }
		.LL_Impressum_TitelTextBox { grid-column: 2/8; grid-row: 4/5 }
	/************************ SLIDER ENDE ************************/

	/************************ SLIDER START ************************/
		.titelarea {
			display: grid; /* Jede ZeilenBox ist auch ein Grid */
			grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; /* Das Grid für die Spalten für Bilder*/
			grid-template-rows: 100px 100px 100px 100px 100px;
		}
	/************************ SLIDER ENDE ************************/

/************************ UNTERSEITE LL Impressum und Datenachutz ENDE ************************/


/* ---  ENDE - GLOBAL DEFINITION über 1024px - ENDE   --------------------------------------- */

/* ========================================================================================== */
/* ===   DEFINITION unter 500px   =========================================================== */
/* ========================================================================================== */
/* CSS-Überschreibung kleine Handys START --------------- */
@media screen and (max-width: 499px) {
	body.home, body.unterseite { grid-template-rows: 500px auto auto 50px }
	body.impressum { grid-template-rows: 500px auto 50px }
	#sliderTop, #sliderTop_1r, #sliderTop_2r, #sliderTop_d, #pageHeader, .contentThema, #pageFooter, #pageFooterMenuline {
		grid-template-columns: 1fr 380px 1fr }
	
	.imagearea, .imagearea_Slider, .imagearea_EinBild {
		grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
		grid-template-rows: 100px 100px 100px 100px 100px
	}
	
	/************************ SLIDER START ************************/
		.SliderLogo { grid-column: 2/6; grid-row: 2/5 }
		.SliderLogoUnterschrift { grid-column: 2/6; grid-row: 5/6 }
	/************************ SLIDER ENDE ************************/
	
	/************************ ZIMMER-BOXEN START ************************/
		.zimmerBox_l             { grid-column: 1/9 }
		.zimmerBox_r             { grid-column: 1/9 }
	/************************ ZIMMER-BOXEN ENDE ************************/

	/************************ ZIMMERMIETLISTE START ************************/
		.zimmerMietePictogramm { grid-column: 1/3 }
		.zimmerMiete_hl { grid-column: 4/9 }
		.zimmerMieteliste { grid-column: 2/9 }
		.infobox { grid-column: 1/9 }
	/************************ ZIMMERMIETLISTE ENDE ************************/
	
	/************************ ERSTER BILDKONTENBEREICH START ************************/
		.imagearea {
			grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
			grid-template-rows: 400px 400px 400px }
	
		.bildcontent_01 {grid-column: 1/9; grid-row: 1/2 }
		.bildcontent_02 {grid-column: 1/9; grid-row: 2/3 }
		.bildcontent_03 {grid-column: 1/9; grid-row: 3/4 }
	/************************ ERSTER BILDKONTENBEREICH ENDE ************************/

	/************************ VORTEILE PICTOGRAMME START ************************/
		.picto_Lage, .picto_Umwelt { grid-column: 1/4 }
		.picto_Kalender, .picto_Wohn { grid-column: 6/9 }
	/************************ VORTEILE PICTOGRAMME ENDE ************************/

	/************************ LANDKARTE START ************************/
		.imagearea_grundriss { 
			grid-template-columns: 1fr;
			grid-template-rows: 400px }
	
		.imagearea_karte, .imagearea_EinBild { 
			grid-template-columns: 1fr;
			grid-template-rows: 550px }
	/************************ LANDKARTE ENDE ************************/

	/************************ KARTE-LEGENDE START ************************/
		.bahn, .park, .sport, .shop {
			display: grid;
			grid-template-columns: 1fr 3fr }

		.bahn, .park, .sport, .shop { grid-column: 1/9 }
	
		.pictogramm_Bahn, .pictogramm_Sport, .pictogramm_Park, .pictogramm_Shop, .text_Bahn, .text_Sport, .text_Park, .text_Shop,
		{ grid-column: 1/2 } 
	/************************ KARTE-LEGENDE ENDE ************************/

	/************************ KONTAKT-BOX START ************************/
		.kontaktbox {
			grid-column: 1/9;
			display: grid;
			grid-template-columns: 1fr }
		.kontaktText { grid-column: 1/2 }
		.buttonEmail { grid-column: 1/2 }
		.buttonTelefon  { grid-column: 1/2 }
	/************************ KONTAKT-BOX ENDE ************************/
	
	/************************ ZWEITER BILDKONTENBEREICH START ************************/
		.bildcontent_05 {grid-column: 1/9; grid-row: 1/6 }
	/************************ ZWEITER BILDKONTENBEREICH ENDE ************************/

	/************************ FOOTER-BEREICH START ************************/
		.footer-Standort { grid-column: 1/9 }
		.footer-Ansprechpartner  { grid-column: 1/9 }
		.footer-Kontakt { grid-column: 1/9 }
	/************************ FOOTER-BEREICH ENDE ************************/
	

	
	/************************ UNTERSEITE ZIMMER START ************************/

		/************************ SLIDER START ************************/
			.zimmerTitelTextBox { grid-column: 2/8; grid-row: 3/5 }
		/************************ SLIDER ENDE ************************/

		/************************ THEMA "MODERNES WOHNEN" START ************************/
			.modernesWohnen_hl, .modernesWohnen_p { grid-column: 2/8 }
		/************************ THEMA "MODERNES WOHNEN" ENDE ************************/
	
		/************************ THEMA "KeyFacts" START ************************/
			.pageContentContentPicto {
				grid-template-areas:
					"zimmertext zimmertext"
					"zimmerbild zimmerbild";
			}
		/************************ THEMA "KeyFacts" ENDE ************************/

		.vorteileBild, .umgebungBild, .comfortPlusBild { grid-column: 1/4; height: 600px }
		.pageContentContentflexVorteile, .pageContentContentflexComfortPlus, .pageContentContentflexUmgebung { grid-column: 2/2; }
		.contentPictoBild { display: grid; grid-template-columns: 1fr 420px 1fr }
	
	/************************ UNTERSEITE ZIMMER ENDE ************************/

	
	
	/******************* UNTERSEITE LL Impressum und Datenachutz START ************************/

		/************************ SLIDER START ************************/
			.LL_Datenschutz_TitelTextBox { grid-column: 1/9; grid-row: 4/5 }
			.LL_Impressum_TitelTextBox { grid-column: 2/8; grid-row: 4/5 }
		/************************ SLIDER ENDE ************************/

	/******************** UNTERSEITE LL Impressum und Datenachutz ENDE ************************/

}
/* ---  ENDE - DEFINITION unter 500px - ENDE   ---------------------------------------------- */



/* ========================================================================================== */
/* ===   DEFINITION 500px bis 767px   ======================================================= */
/* ========================================================================================== */

@media screen and (min-width: 500px) and (max-width: 767px) {
	body.home, body.unterseite { grid-template-rows: 500px auto auto 50px }
	body.impressum { grid-template-rows: 500px auto 50px }
	#sliderTop, #sliderTop_1r, #sliderTop_2r, #sliderTop_d, #pageHeader, .contentThema, #pageFooter, #pageFooterMenuline {
		grid-template-columns: 1fr 420px 1fr }
	
	.imagearea, .imagearea_Slider {
		grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
		grid-template-rows: 100px 100px 100px 100px 100px
	}
	
	/************************ SLIDER START ************************/
		.SliderLogo { grid-column: 2/6; grid-row: 2/5 }
		.SliderLogoUnterschrift { grid-column: 2/6; grid-row: 5/6 }
	/************************ SLIDER ENDE ************************/
	
	/************************ ZIMMER-BOXEN START ************************/
		.zimmerBox_l             { grid-column: 1/9 }
		.zimmerBox_r             { grid-column: 1/9 }
	/************************ ZIMMER-BOXEN ENDE ************************/

	/************************ ZIMMERMIETLISTE START ************************/
		.zimmerMietePictogramm { grid-column: 1/3 }
		.zimmerMiete_hl { grid-column: 4/9 }
		.zimmerMieteliste { grid-column: 2/9 }
		.infobox { grid-column: 1/9 }
	/************************ ZIMMERMIETLISTE ENDE ************************/
	
	/************************ ERSTER BILDKONTENBEREICH START ************************/
		.imagearea {
			grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
			grid-template-rows: 400px 400px 400px }
	
		.bildcontent_01 {grid-column: 1/9; grid-row: 1/2 }
		.bildcontent_02 {grid-column: 1/9; grid-row: 2/3 }
		.bildcontent_03 {grid-column: 1/9; grid-row: 3/4 }
	/************************ ERSTER BILDKONTENBEREICH ENDE ************************/

	/************************ VORTEILE PICTOGRAMME START ************************/
		.picto_Lage, .picto_Umwelt { grid-column: 1/4 }
		.picto_Kalender, .picto_Wohn { grid-column: 6/9 }
	/************************ VORTEILE PICTOGRAMME ENDE ************************/

	/************************ LANDKARTE START ************************/
		.imagearea_grundriss { 
			grid-template-columns: 1fr;
			grid-template-rows: 550px }
	
		.imagearea_karte, .imagearea_EinBild { 
			grid-template-columns: 1fr;
			grid-template-rows: 600px }

	/************************ KARTE-LEGENDE START ************************/
		.bahn, .park, .sport, .shop {
			display: grid;
			grid-template-columns: 1fr 3fr }

		.bahn, .park, .sport, .shop { grid-column: 1/9 }
	
		.pictogramm_Bahn, .pictogramm_Sport, .pictogramm_Park, .pictogramm_Shop, .text_Bahn, .text_Sport, .text_Park, .text_Shop,
		{ grid-column: 1/2 } 
	/************************ KARTE-LEGENDE ENDE ************************/

	/************************ KONTAKT-BOX START ************************/
		.kontaktbox {
			grid-column: 1/9;
			display: grid;
			grid-template-columns: 1fr }
		.kontaktText { grid-column: 1/2 }
		.buttonEmail { grid-column: 1/2 }
		.buttonTelefon  { grid-column: 1/2 }
	/************************ KONTAKT-BOX ENDE ************************/
	
	/************************ ZWEITER BILDKONTENBEREICH START ************************/
		.bildcontent_05 {grid-column: 1/9; grid-row: 1/6 }
	/************************ ZWEITER BILDKONTENBEREICH ENDE ************************/

	/************************ FOOTER-BEREICH START ************************/
		.footer-Standort { grid-column: 1/9 }
		.footer-Ansprechpartner  { grid-column: 1/6 }
		.footer-Kontakt { grid-column: 6/9 }
	/************************ FOOTER-BEREICH ENDE ************************/
	
	/************************ UNTERSEITE ZIMMER START ************************/

		/************************ SLIDER START ************************/
			.zimmerTitelTextBox { grid-column: 2/8; grid-row: 3/5 }
		/************************ SLIDER ENDE ************************/

		/************************ THEMA "MODERNES WOHNEN" START ************************/
			.modernesWohnen_hl, .modernesWohnen_p { grid-column: 2/8 }
		/************************ THEMA "MODERNES WOHNEN" ENDE ************************/
	
		/************************ THEMA "KeyFacts" START ************************/
			.pageContentContentPicto {
				grid-template-areas:
					"zimmertext zimmertext"
					"zimmerbild zimmerbild";
			}
		/************************ THEMA "KeyFacts" ENDE ************************/

		.vorteileBild, .umgebungBild, .comfortPlusBild { grid-column: 1/4; height: 600px }
		.pageContentContentflexVorteile, .pageContentContentflexComfortPlus, .pageContentContentflexUmgebung { grid-column: 2/2; }
		.contentPictoBild { display: grid; grid-template-columns: 1fr 420px 1fr }
	
	/************************ UNTERSEITE ZIMMER ENDE ************************/

	/******************* UNTERSEITE LL Impressum und Datenachutz START ************************/

		/************************ SLIDER START ************************/
			.LL_Datenschutz_TitelTextBox { grid-column: 1/9; grid-row: 4/5 }
			.LL_Impressum_TitelTextBox { grid-column: 2/8; grid-row: 4/5 }
		/************************ SLIDER ENDE ************************/

	/******************** UNTERSEITE LL Impressum und Datenachutz ENDE ************************/
	
}
/* ---  ENDE - DEFINITION 500px bis 767px - ENDE   ------------------------------------------ */



/* ========================================================================================== */
/* ===   DEFINITION 768px bis 1024px   ====================================================== */
/* ========================================================================================== */

@media screen and (min-width: 768px) and (max-width: 1096px) {
	body.home, body.unterseite { grid-template-rows: 600px auto auto 50px }
	body.impressum { grid-template-rows: 600px auto 50px }
	#sliderTop, #sliderTop_1r, #sliderTop_2r, #sliderTop_d, #pageHeader, .contentThema, #pageFooter, #pageFooterMenuline {
		grid-template-columns: 1fr 710px 1fr }
	
	.imagearea, .imagearea_Slider {
			grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
			grid-template-rows: 110px 110px 110px 110px 110px }
	
	/************************ ZIMMER-BOXEN START ************************/
		.pictureTextBox_b_mehr   { grid-column: 1/4 }
	/************************ ZIMMER-BOXEN ENDE ************************/
	
	/************************ ZIMMERMIETLISTE START ************************/
		.zimmerMieteliste { grid-column: 2/4 }
		.infobox { grid-column: 5/9 }
	/************************ ZIMMERMIETLISTE ENDE ************************/
	
	/************************ LANDKARTE START ************************/
		.imagearea_karte, .imagearea_EinBild, .imagearea_grundriss { 
			grid-template-columns: 1fr;
			grid-template-rows: 600px }
	/************************ LANDKARTE ENDE ************************/

	/************************ KARTE-LEGENDE START ************************/
		.bahn, .park { grid-column: 1/5 }
		.sport, .shop  { grid-column: 5/9 }
	/************************ KARTE-LEGENDE ENDE ************************/

	/************************ KONTAKT-BOX START ************************/
		.kontaktbox {
			grid-column: 1/9;
			display: grid;
			grid-template-columns: 1fr 1fr;
		}
		.kontaktText { grid-column: 1/3 }
	/************************ KONTAKT-BOX ENDE ************************/

	/************************ FOOTER-BEREICH START ************************/
		.footer-Standort { grid-column: 1/4 }
		.footer-Ansprechpartner  { grid-column: 4/7 }
		.footer-Kontakt { grid-column: 7/9 }
	/************************ FOOTER-BEREICH ENDE ************************/

	/************************ UNTERSEITE ZIMMER START ************************/

		/************************ SLIDER START ************************/
			.zimmerTitelTextBox { grid-column: 2/8; grid-row: 3/5 }
		/************************ SLIDER ENDE ************************/

		/************************ Piktogramme START ************************/
			.contentPictoBild { grid-template-columns: 1fr 255px 100px 100px 255px 1fr }
		/************************ Piktogramme ENDE ************************/

		/************************ THEMA "MODERNES WOHNEN" START ************************/
			.modernesWohnen_hl, .modernesWohnen_p { grid-column: 2/8 }
		/************************ THEMA "MODERNES WOHNEN" ENDE ************************/

			.pageContentContentflexVorteile, .pageContentContentflexComfortPlus, .pageContentContentflexUmgebung { gap: 5px 5px }

	/************************ UNTERSEITE ZIMMER ENDE ************************/

	/******************* UNTERSEITE LL Impressum und Datenachutz START ************************/

		/************************ SLIDER START ************************/
			.LL_Datenschutz_TitelTextBox { grid-column: 1/9; grid-row: 5/6 }
			.LL_Impressum_TitelTextBox { grid-column: 2/8; grid-row: 5/6 }
		/************************ SLIDER ENDE ************************/

	/******************** UNTERSEITE LL Impressum und Datenachutz ENDE ************************/
}
/* ---  ENDE - DEFINITION 768px bis 1024px - ENDE   ----------------------------------------- */