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

body {
	/* automatische Silbentrennung für schmale Spalten */
	hyphens: auto;
	font-family: FiraSans;
}

/* -------Einstellungen für screens größer 900px/56.3125em ----------*/

@media only screen and (min-width: 56.3125em) {

.textbereich {
	width: 100%;
	max-width: 87.5em;
	grid-template-columns: 30% auto;
	grid-template-rows: auto auto auto auto auto auto auto auto auto auto auto;
	display: grid;
	background-image: linear-gradient(#fff, #e4dcbc);
}

.haupttext {
	width: 93.877551%;
	max-width: 57.5em;
	grid-column-start: 2;
	grid-column-end: 3;
	grid-row-start: 1;
	grid-row-end: 4;
	line-height: 1.7;
}

h1 {
	font-size: 3rem;
	font-weight: 600;
	color: #4f0b8b;
	margin: 2rem 6% 1rem 0;
}

h2 {
	font-size: 2rem;
	font-weight: 400;
	color: #4f0b8b;
	line-height: 1.3;
	margin-right: 4,28571429%; 
}

.seitenbild{
	width: 40%;
	height: auto;
	margin-left: 30%;
}

.seitentext1 {
	grid-column-start: 1;
	grid-column-end: 2;
	grid-row-start: 2;
	grid-row-end: 3;
	line-height: 1.5;
	color: #6a727e;
	padding: 0 14%;
	margin-top: 20em;
}

.bildbereich {
	grid-column-start: 1;
	grid-column-end: 3;
	grid-row-start: 4;
	grid-row-end: 5;	
	align-content: center;
}
	
.bild {
	width: 92%;
	max-width: 80.5em;
	height: auto;
	margin-left: 4%;
}

.bild1 {
	display: none;
}

.haupttext2 {
	width: 93,87755102%;
	max-width: 57.5em;
	grid-column-start: 2;
	grid-column-end: 3;
	grid-row-start: 5;
	grid-row-end: 8;
	margin: 1em 6% 0 0;
	line-height: 1.7;
}

h3 {
	max-width: 57em;;
	font-size: 2rem;
	line-height: 1.4;
	font-weight: 600;
	color: #4f0b8b;
}

.seitentext2 {
	grid-column-start: 1;
	grid-column-end: 2;
	grid-row-start: 6;
	grid-row-end: 7;
	line-height: 1.5;
	color: #6a727e;
	padding: 0 14%;
}

.haupttext3 {
	width: 93,87755102%;
	max-width: 57.5em;
	grid-column-start: 2;
	grid-column-end: 3;
	grid-row-start: 8;
	grid-row-end: 11;
	margin: 0 6% 4em 0;
	line-height: 1.7;
}
	
.seitentext3 {
	grid-column-start: 1;
	grid-column-end: 2;
	grid-row-start: 9;
	grid-row-end: 10;
	line-height: 1.5;
	padding: 0 14%;
}

}

/* ----------- Einstellungen für screens zwischen 660px und 900px ----------- */

@media only screen and (min-width: 41.3125em) and (max-width: 56.25em) {

.textbereich {
	width: 100%;
	max-width: 56.25em;
	grid-template-columns: 30% auto;
	grid-template-rows: auto auto auto auto auto auto auto auto auto auto;
	display: grid;
	background-image: linear-gradient(#fff, #e4dcbc);
}

.haupttext {
	width: 94.444444%;
	max-width: 53.125em;
	grid-column-start: 2;
	grid-column-end: 3;
	grid-row-start: 1;
	grid-row-end: 4;
	line-height: 1.7;
}

h1 {
	font-size: 3rem;
	font-weight: 600;
	color: #4f0b8b;
	margin: 4rem 6% 1rem 0;
}

h2 {
	font-size: 2rem;
	font-weight: 400;
	color: #4f0b8b;
	line-height: 1.3;
	margin-right: 4,28571429%; 
}

.seitenbild{
	width: 60%;
	height: auto;
	margin-left: 20%;
}

.seitentext1 {
	grid-column-start: 1;
	grid-column-end: 2;
	grid-row-start: 2;
	grid-row-end: 3;
	line-height: 1.5;
	color: #6a727e;
	padding: 0 19.230769%;
	margin-top: 20em;
}

.bildbereich {
	grid-column-start: 1;
	grid-column-end: 3;
	grid-row-start: 4;
	grid-row-end: 5;
	}
	
.bild {
	width:90%;
	max-width: 50.625em;
	height: auto;
	margin-left: 5.555556%;
}

.bild1 {
	display: none;
}

.haupttext2 {
	width: 93,87755102%;
	max-width: 57.5em;
	grid-column-start: 2;
	grid-column-end: 3;
	grid-row-start: 5;
	grid-row-end: 8;
	margin: 2em 6% 0 0;
	line-height: 1.7;
}

h3 {
	max-width: 57em;;
	font-size: 2rem;
	line-height: 1.4;
	font-weight: 600;
	color: #4f0b8b;
}

.seitentext2 {
	grid-column-start: 1;
	grid-column-end: 2;
	grid-row-start: 6;
	grid-row-end: 7;
	line-height: 1.5;
	color: #6a727e;
	padding: 0 19.230769%;
}

.haupttext3 {
	width: 93,87755102%;
	max-width: 57.5em;
	grid-column-start: 2;
	grid-column-end: 3;
	grid-row-start: 8;
	grid-row-end: 10;
	margin: 0 6% 4em 0;
	line-height: 1.7;
}
	
.seitentext3 {
	grid-column-start: 1;
	grid-column-end: 2;
	grid-row-start: 8;
	grid-row-end: 9;
	height: auto;
	line-height: 1.5;
	color: #6a727e;
	padding: 0 19.230769%;
}

}

/* ------ Einstellungen für screens kleiner 660px/41.25em -------- */

@media only screen and (max-width: 41.25em) {

.textbereich {
	width: 100%;
	max-width: 41.25em;
	grid-template-columns: 100%;
	display: grid;
	background-image: linear-gradient(#fff, #e4dcbc);
}

.haupttext {
	grid-row-start: 1;
	grid-row-end: 2;
	line-height: 1.7;
	margin: 0 6.06060606%;
}

h1 {
	font-size: 3rem;
	font-weight: 600;
	color: #4f0b8b;
}

h2 {
	font-size: 2rem;
	font-weight: 400;
	color: #4f0b8b;
	line-height: 1.3;
}

.bildbereich {
	grid-row-start: 2;
	grid-row-end: 3;
	}

.bild {
	display: none;
}

.bild1 {
	width: 87.87878788%;
	max-width: 36.25em;
	height: auto;
	margin: 0 6.0606061%;
}

.seitenbild{
	width: 30%;
	height: auto;
	align-content: center;
}

.seitentext1 {
	grid-row-start: 3;
	grid-row-end: 4;
	line-height: 1.5;
	color: #6a727e;
	text-align: center;
	margin: 6em 6.06060606% 2em  6.06060606%;
}

.haupttext2 {
	width: 87.87878788%;
	max-width: 36.25em;
	grid-row-start: 4;
	grid-row-end: 5;
	line-height: 1.7;
	margin: 0 6.06060606% 2em 6.06060606%;
}

h3 {
	max-width: 36.25em;
	font-size: 1.5rem;
	line-height: 1.4;
	font-weight: 600;
	color: #4f0b8b;
}

.seitentext2 {
	grid-row-start: 5;
	grid-row-end: 6;
	line-height: 1.5;
	color: #6a727e;
	text-align: center;
	margin: 2em 6.06060606%;	
}

.haupttext3 {
	width: 87.87878788%;
	max-width: 57.5em;
	grid-row-start: 6;
	grid-row-end: 7;
	margin: 0 6.06060606% 2em 6.06060606%;
	line-height: 1.7;
}

.seitentext3 {
	grid-row-start: 7;
	grid-row-end: 8;
	height: auto;
	line-height: 1.5;
	color: #6a727e;
	text-align: center;
	margin: 2em 6.06060606% 5em 6.06060606%;
}

}