/*++++++++++++++++++++++++++++Anfang Allgemeine Angaben++++++++++++++++++++++++++++*/
html, body {
	margin: 0;
	padding: 0;
		
	font-weight:300; /* light */
	font-size: 22px;
	line-height: 33px;
	letter-spacing: 0.25px;
	word-spacing: 0.5px;
	font-family:'Encode Sans', sans-serif; /* Schriftart für die gesamte Seite*/
	color: #444444; /* Schriftfarbe für die gesamte Seite*/
	
	background-color: rgba(235,235,235,1);
	hyphens: auto; /* automatische Silbentrennung */
}

a {
	outline: none; /* verhindert gepunktete Linien um Links herum, wenn Sie im Focus stehen */
	text-decoration: none; /* verhindert, dass Links unterstrichen werden */
	color: #444444; /* setzt die Linkfarbe auf die normale Fließtextfarbe */
}

a:hover { 
	transition: all 0.5s; /* flüssiger Übergang, wenn sich die Eigenschaft des Elements ändert */
}

h1 {
	width: 96%;
	margin: 0;
	padding: 53px 2% 64px 2%;

	text-align: center;

	font-weight:200; /* extra-light */
	font-size: 48px;
	line-height: 58px;
	color: #BF0260;
}

h2 {
	font-weight:300; /* light */
	font-size: 30px;
	line-height: 40px; /* diese Angabe wird erst auf dem Smartphone relevant - wenn die Überschrift umbricht */
}

h3 {
	font-weight:300; /* light */
	font-size: 38px;
	line-height: 48px;
}

.clearfix:after { /* Die Angaben der Klasse "clearfix" bewirkt, dass sich die Boxen gemäß ihres Inhalts ausdehnen auch wenn sie Elemente enthalten, die per "float" positioniert sind */
	content: ""; 
	display: table; 
	clear: both;
}

.positionierter_impressum_anker {
	display: block; /* bewirkt, dass der Anker später bei den Tablet und Smartphone-Angaben positioniert werden kann */
	position: relative;
	top: 0px;

	width: 0px;
	height: 0px;
	visibility: hidden;
	z-index: -1;
}

/*++++++++++++++++++++++++++++Anfang Navigation++++++++++++++++++++++++++++*/
#navigation {
	width: 23%;
	position: fixed; /* fixe Positionierung zum Browserfenster */
	top: 0px;
	left: 5%;
	z-index: 2; /* soll über allen anderen Inhalten liegen */

	background-color: rgba(255,255,255,0.9);
	
	box-shadow: 0px 0px 60px rgba(0, 0, 0, 0.2);
}

#navigation_logo {
	display: block; /* bewirkt, dass alles wie gewünscht dargestellt wird, obwohl es ein Link (inline-Element) ist */
	height: 240px;
	margin: 20px 0 20px 0;

	background-image: url('grafiken_layout/logo.svg'), url('grafiken_layout/kreis_deckend.svg');
	background-size: contain, contain;
	background-repeat: no-repeat, no-repeat;
	background-position: center, center;
}

.navigation_link { /* Das sind die allgemeinen Angaben UND DER ACTIVE-ZUSTAND, DER DANN ABER BEI ALLEN VERLINKTEN ELEMENTEN ERWEITERT/ÜBERSCHRIEBEN WIRD (siehe einige Zeilen weiter unten [a.xyz]) */
	display: block; /* bewirkt, dass alles wie gewünscht dargestellt wird, obwohl es ein Link (inline-Element) ist */
	width: 100%;
	height: 77px; /* 77px + 3px(padding-top) + 1px(margin) = 81px(Höhe des Buttons) */
	margin: 0 0 1px 0;
	padding-top: 3px; /* drückt den Text nach unten. Wert muss der Höhe abgezogen werden. */
	background-color: rgba(255,255,255,1); /* Farbwert der aktiven Seite */

	color: #BF0260;

	box-shadow: 5px 0px 0px 0px #BF0260 inset;

	background-image: url('grafiken_layout/navigation_hover_pfeil.svg');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: 120% center; /* wird zunächst nach rechts außerhalb des sichtabren Bereichs verschoben und bei Hover nach links reingeschoben */
}

a.navigation_link { /* BEI ALLEN VERLINKEN LINKS WERDEN DIE OBEN ANGEGEBENEN CSS ANGABEN (für den active-Zustand) GEÄNDERT FÜR DEN DEN NICHT-ACTIVE-ZUSTAND */
	background-color: rgba(222,222,222,0.2);
	box-shadow: 5px 0px 0px 0px #EFC5DC inset;

	color: #444444;
}

a.navigation_link:hover {
	background-color: #FFFFFF;
	box-shadow: 5px 0px 0px 0px #BF0260 inset;

	color: #BF0260;

	background-position: 100% center; /* wird zunächst nach rechts außerhalb des sichtbaren Bereichs verschoben und bei Hover nach links reingeschoben */
}

.navigation_link_bild {
	width: 30px;
	height: 30px;
	margin: 22px 10px 28px 15px; /* 22px(navigation_link_bild margin top) + 28px(navigation_link_bild margin bottom) +30px(navigation_link_bild Höhe) = 80px(Höhe des Buttons) */

	vertical-align: -35px; /* bewirkt, dass der Linktext vertikal zentriert ist (Wert wurde durch try-and-error ermittelt) */
}

#navigation_zumseitenanfang_platzhalter_fuer_spaeter_erscheinenden_javasrcipt_button {
	width: 70px;
	height: 70px;
	margin: 53px 0 52px 10px;

	background-image: url('grafiken_layout/icon_zumseitenanfang_blass.svg');
	background-size: contain; /* bewirkt, dass das Bild immer voll zu sehen ist */
	background-position: center;
}

#zum-seitenanfang-button {
	display: none; /* wird per Javascript der HTML-Seite ab einer bestimmten Stelle auf "block" gesetzt */
	position: fixed;
	top: 575px;
	left: 5%;
	z-index: 3;
	margin-left: 10px;
	border: none;
	outline: none;
	background-color: #BF0260;

	width: 70px;
	height: 70px;
	background-image: url('grafiken_layout/icon_zumseitenanfang_hoverpfeil.svg'); /* der über dem Kreis liegende Pfeil wird bei Hover etwas nach oben geschoben */
	background-size: contain;
	background-position: center right;
	background-repeat: no-repeat;
	
	border-radius: 35px;
}

#zum-seitenanfang-button:hover {
	background-position: center -10px, center right; /* der über dem Kreis liegende Pfeil wird bei Hover etwas nach oben geschoben */
	
	transition: all 0.5s;
}

/*++++++++++++++++++++++++++++Anfang Introbox-Bereich++++++++++++++++++++++++++++*/
#introbox_verlauf {
	background-image: url('grafiken_layout/pinsel.png'), linear-gradient(to bottom, rgba(250,250,250,1) 25%,rgba(199,199,199,1) 100%);

	background-size: 50% auto, 100% 100%;
	background-position: 90% center, center center; /* mit 90% schließt das Bild rechts bündig mit den Boxen ab */
	background-repeat: no-repeat, no-repeat;
}

#flex-container-introtextbereich { 
    display: flex; /* The flex container becomes flexible by setting the display property to flex */
	align-items: center; /* The align-items property is used to align the flex items vertically */

	width: 35%;
	min-height: 522px;
	
    padding: 0 0 0 33%;
}

#flex-item-introtext, #flex-item-introtext-tabletvariante, #flex-item-introtext-mobilvariante {
   	font-family:'Caveat', sans-serif; /* Schriftart für die Begrüßung*/
	font-size: 35px; /* etwas größer als normal */
	line-height: 45px; /* höherer ZAB als normal */
	color: #666666; /* Schriftfarbe */
}

#flex-item-introtext-tabletvariante {
	display: none; /* wird erst auf Tablet gezeigt */
}

#flex-item-introtext-mobilvariante {
	display: none; /* wird erst auf Smartphone gezeigt */
}

/*++++++++++++++++++++++++++++Anfang Contentbereich++++++++++++++++++++++++++++*/
.contentcontainer {
	width: 62%;
	margin: 0 0 30px 33%;

	background-color: rgba(255,255,255,1);

	transition: all 2s; /* flüssiger Übergang, wenn sich die Eigenschaft des Elements ändert */
}

/*++++++++++++++++++++++++++++Anfang Projektboxen++++++++++++++++++++++++++++*/
.contentcontainer_projekte {
	display: block; /* bewirkt, dass die Höhen- und Breitenangaben angezeigt werden (ein a-tag ist ein inline Element, das normalerweise height und width ignoriert) */
}

.contentcontainer_projekte:hover {
	box-shadow: 0px 0px 60px rgba(0, 0, 0, 0.2);
}

.projekt_bild {
	display: block; /* bewirkt, dass die Höhen- und Breitenangaben angezeigt werden (ein a-tag ist ein inline Element, das normalerweise height und width ignoriert) */
	width: 47%; /* 47%(Breite) + 2%(margin nach links) = 49% */
	height: 283px; /* Bei diesem Wert ist gewähleistet, dass bei einem 768er-Screen die Hintergrundbilder sich nicht vertikal wiederholen. */
	margin: 40px 0 40px 2%; /* 47%(Breite) + 2%(margin nach links) = 49% */
	float: left;

	background-size: cover; /* Größe des Hintergrundbilds und Skalierungsverhalten */
	background-repeat: no-repeat;
	background-position: center top;
	
	box-shadow: inset 0px 0px 0px 20px rgba(240,240,240,0.4);
}

.projekt_bild:after {
	content:"";
	
	display: block; /* bewirkt, dass die Höhen- und Breitenangaben angezeigt werden (ein a-tag ist ein inline Element, das normalerweise height und width ignoriert) */

	width: 100%; /* 100% des Eltern-Elements */
	height: 283px;

	background-image: url('grafiken_layout/teaserbild_hover_pfeil.svg');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: 250% center; /* wird zunächst nach rechts außerhalb des sichtabren Bereichs verschoben und bei Hover nach links reingeschoben */
}

.projekt_bild:hover:after {
	background-position: 90% center; /* wird zunächst nach rechts außerhalb des sichtabren Bereichs verschoben und bei Hover nach links reingeschoben */
	transition: background-position 0.8s; /* flüssiger Übergang, wenn sich die Eigenschaft des Elements ändert */
}

.h3_projekt_headline {
	display: block; /* bewirkt, dass die Höhen- und Breitenangaben angezeigt werden (ein a-tag ist ein inline Element, das normalerweise height und width ignoriert) */
	margin: 0 0 0 51%; /* 51%: 1% rechts von der Mitte (Bild ist insges. 49% breit, also 1% links von der Mitte) = Lücke zwischen Bild und Text: 2% */
	padding: 30px 20px 7px 0;
	
	hyphens: auto; /* automatische Silbentrennung */
}

.projekt_beschreibung {
	display: block; /* bewirkt, dass die Höhen- und Breitenangaben angezeigt werden (ein a-tag ist ein inline Element, das normalerweise height und width ignoriert) */
	margin: 0 0 0 51%; /* 51%: 1% rechts von der Mitte (Bild ist insges. 49% breit, also 1% links von der Mitte) = Lücke zwischen Bild und Text: 2% */
	padding: 20px 20px 0 0;
	max-width: 600px;
}

.projekt_daten {
	display: block; /* bewirkt, dass die Höhen- und Breitenangaben angezeigt werden (ein a-tag ist ein inline Element, das normalerweise height und width ignoriert) */
	margin: 0 0 4px 51%; /* 51%: 1% rechts von der Mitte (Bild ist insges. 49% breit, also 1% links von der Mitte) = Lücke zwischen Bild und Text: 2% */
	padding: 18px 10px 25px 0;
	
	font-size: 13px;
	word-spacing: 3px;
	line-height: 20px;
}

/*++++++++++++++++++++++++++++Anfang Fußzeile++++++++++++++++++++++++++++*/
#fusszeilenbox_verlauf {
	margin: 62px 0 0 0; 
	min-height: 522px;

	background-image: linear-gradient(to top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.06) 100%); /* W3C */
    background-size: auto;
	background-position: center;
	background-repeat: no-repeat;
}

.contentcontainer_fusszeile {
	background-color: rgba(255,255,255,0); /* soll nicht weiß gefüllt sein */
}

.fusszeile_box {
	display: block; /* bewirkt, dass die Höhen- und Breitenangaben angezeigt werden (ein a-tag ist ein inline Element, das normalerweise height und width ignoriert) */
	width: 50%;
	float: left;
}

.fusszeile_box:hover {
	background-color: rgba(255,255,255,1);
	box-shadow: 0px 0px 60px rgba(0, 0, 0, 0.2);
}

.fusszeile_box_bild {
	display: block; /* bewirkt, dass die Höhen- und Breitenangaben angezeigt werden (ein a-tag ist ein inline Element, das normalerweise height und width ignoriert) */
	width: 20%;
	height: 60px;
	margin: 64px 0 0 0; 
	float: left;

	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
}

.fusszeile_box_headline {
	display: block; /* bewirkt, dass die Höhen- und Breitenangaben angezeigt werden (ein a-tag ist ein inline Element, das normalerweise height und width ignoriert) */
	margin: 0 0 0 20%;
	padding: 57px 20px 0 0;

	font-size: 60px;
	line-height: 70px;
}

.fusszeile_box_beschreibung {
	display: block; /* bewirkt, dass die Höhen- und Breitenangaben angezeigt werden (ein a-tag ist ein inline Element, das normalerweise height und width ignoriert) */
	margin: 0 0 0 20.5%; /* 0.5% mehr eingerückt, damit der Text optisch bündig mit der größeren Überschrift ist */
	padding: 20px 0 75px 0;
}

#impressum {
	float: left;
	display: block; /* bewirkt, dass alles wie gewünscht dargestellt wird, obwohl es ein Link (inline-Element) ist */
	width: 100%;
	margin: 56px 0 0 0;
	padding: 20px 0 20px 0;

 	text-align: center;
	font-size: 14px;
	line-height: 20px;
}

#impressum:hover {
	text-decoration: underline;
}









/*############################################# Anfang CSS-Definitionen für TABLET #############################################*/
 
@media screen and (min-width:601px) and (max-width:1024px) {

/*++++++++++++++++++++++++++++Anfang Allgemeine Angaben++++++++++++++++++++++++++++*/
h2 {
	font-size: 27px; /* Auf dem Tablet sollen die Zwischenüberschriften etwas kleiner sein */
}

/*++++++++++++++++++++++++++++Anfang Zum Seitenanfang w3schools Javascript Button TABLET++++++++++++++++++++++++++++*/

#zum-seitenanfang-button {
	top: auto;
	bottom: 20px;
	left: 50%;
	margin-left: -35px; /* um die Hälfte seiner Breite (70px) nach links verschoben */
	
	box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.3);
}

#zum-seitenanfang-button:hover {
	background-position: center right; /* kein HOVER auf Smartphone&Tablet */
}

/*++++++++++++++++++++++++++++Anfang unsichtbare Anker, die je nach Gerät positioniert werden TABLET++++++++++++++++++++++++++++*/
.positionierter_impressum_anker {
	top: -130px;
}

/*++++++++++++++++++++++++++++Anfang Navigation TABLET++++++++++++++++++++++++++++*/
#navigation { /* auf dem Tablet&Smartphone soll die Navigation über die volle Breite gehen und oben links am Browser anstoßen */
	width: 100%;
	top: 0;
	left: 0;
	padding: 0 3% 0 0;
	
	background: linear-gradient(to bottom, rgba(191,2,96,1) 0%, rgba(191,2,96,0.5) 100%); /* W3C */
	border-bottom: 1px solid rgba(255,255,255,1); /* Balken, der sich optisch mit dem aktiven Reiter verbindet */
}

#navigation_logo {
	width: 28%; /* 28%(Logo) + 2x[1.5%](logo-margin links/rechts) + 3x[22%](navigation-Link) + 3%("#navigation" margin nach rechts) = 100% */
	height: 126px; /* Insgesamte Höhe der Kopfzeile: 126px(Logo) + 2x(3px Logo margins) + 1px(unterer weißer Strich) = 133px */
	margin: 3px 1.5% 3px 1.5%;

	float: left; /* auf dem Tablet soll das Logo links von den Buttons stehen */
	background-image: url('grafiken_layout/logo_weiss.svg');
}

.navigation_link { /* auf dem Tablet sollen die drei Buttons nebeneinander stehen */
	width: 22%; /* 28%(Logo) + 2x[1.5%](logo-margin links/rechts) + 3x[22%](navigation-Link) + 3%("#navigation" margin nach rechts) = 100% */
	height: 45px; /* 45px + 58px(margin) + 20px(padding-top) + 9px(border-bottom) + 1px(unterer weißer Strich) = 133px */
	margin: 58px 0 0 0;
	padding-top: 20px; /* drückt die Schrift und den Button nach unten */
	float: left;

	box-shadow: none; /* auf dem Tablet&Smartphone kein orangener Rand */

	background-color: rgba(255,255,255,0);
	background-image: none;

	color: white;
	
	border-bottom: 9px solid rgba(255,255,255,1); /* Balken, der sich optisch mit dem aktiven Reiter verbindet */
}

a.navigation_link { /* auf dem Tablet&Smartphone sollen nur die verlinken Buttons (also zwei) nebeneinander stehen */
	background-color: rgba(255,255,255,0);
	box-shadow: none; /* auf dem Tablet&Smartphone kein orangener Rand */

	color: #FFFFFF;

	border-bottom: 9px solid rgba(255,255,255,0.4); /* Balken, der sich optisch mit dem aktiven Reiter verbindet */
}

a.navigation_link:hover {
	background-color: rgba(255,255,255,0);
	box-shadow: none; /* auf dem Tablet&Smartphone kein orangener Rand */

	color: #FFFFFF;

	border-bottom: 9px solid rgba(255,255,255,1); /* Balken, der sich optisch mit dem aktiven Reiter verbindet */
}

.navigation_link_bild {
	display: none; /* auf dem Tablet&Smartphone sollen die Icons aus Platzgründen nicht erscheinen */
}

#navigation_zumseitenanfang_platzhalter_fuer_spaeter_erscheinenden_javasrcipt_button {
	display: none; /* auf dem Tablet&Smartphone soll der Platzhalter nicht erscheinen */
}

/*++++++++++++++++++++++++++++Anfang Introboxbereich TABLET++++++++++++++++++++++++++++*/
#introbox_verlauf {
	background-image: url('grafiken_layout/pinsel.png'), linear-gradient(to bottom, rgba(240,240,240,1) 50%,rgba(240,240,240,0) 100%);

	background-size: 90% auto, 100% 100%;
	background-position: 80% center, center center; /* mit 90% schließt das Bild rechts bündig mit den Boxen ab */

	margin: 133px 0 0 0; /* Höhe der Kopfzeile Abstand nach oben */
}

#flex-container-introtextbereich {
	min-height: 369px;
	width: 50%;
    padding: 0 0 0 3%;
}

#flex-item-introtext {
	display: none; /* Desktop-Version des Introtextes wird auf Tablet ausgeblendet */
}

#flex-item-introtext-tabletvariante {
	display: inherit; /* wird erst auf Tablet gezeigt */
	
	font-size: 26px; 
	line-height: 36px; 
}

/*++++++++++++++++++++++++++++Anfang Contentbereich TABLET++++++++++++++++++++++++++++*/
.contentcontainer {
	width: 94%; /* auf dem Tablet soll der Bereich breiter sein */
	margin: 0 3% 30px 3%; /* auf dem Tablet zentriert  */
}

/*++++++++++++++++++++++++++++Anfang Projektboxen TABLET++++++++++++++++++++++++++++*/
.contentcontainer_projektboxen {
	margin: 0 3% 30px 3%; /* auf dem Tablet zentriert  */
}

.projekt_bild:after {
	background-image: none; /* auf dem Tablet soll der Klickpfeil nicht übers Bild rutschen */
}

/*++++++++++++++++++++++++++++Anfang Zwischenüberschriften mit Blätterpfeilen TABLET++++++++++++++++++++++++++++*/
.h2_zwischenueberschrift {
	width: 76%;
	height: 57px; /* 93px + 57px = 150px (Gesamthöhe Zw.Ü.-Container). Auf dem Tablet soll der Überschriftsbereich so hoch sein wie der Zw.Ü.-Container */
	padding: 93px 0 0 2%;
}

/*++++++++++++++++++++++++++++Anfang Fußzeile TABLET++++++++++++++++++++++++++++*/
.fusszeile_box_headline {
	padding: 61px 20px 0 0;

	font-size: 50px;
	line-height: 60px;
}

}









/*############################################# Anfang CSS-Definitionen für SMARTPHONE #############################################*/
 
@media screen and (max-width:600px) {
	
/*++++++++++++++++++++++++++++Anfang Allgemeine Angaben++++++++++++++++++++++++++++*/
html, body{
	font-size: 20px; /* Schriftgröße etwas kleiner wegen Umbrüchen*/
}

h1 {
	font-size: 38px;
	line-height: 48px;
}

h2 {
	font-size: 27px;
}

h3 {
	font-size: 32px;
	line-height: 42px;
}

/*++++++++++++++++++++++++++++Anfang Zum Seitenanfang w3schools Javascript Button SMARTPHONE++++++++++++++++++++++++++++*/
#zum-seitenanfang-button {
	top: auto;
	bottom: 55px;
	left: 50%;
	width: 60px;
	height: 60px;

	margin-left: -30px; /* um die Hälfte seiner Breite (70px) nach links verschoben */
	
	border-radius: 30px;
	box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.3);
}

#zum-seitenanfang-button:hover {
	background-position: center right; /* kein HOVER auf Smartphone&Tablet */
}

/*++++++++++++++++++++++++++++Anfang unsichtbare Anker, die je nach Gerät positioniert werden SMARTPHONE++++++++++++++++++++++++++++*/
.positionierter_impressum_anker {
	top: -97px;
}

/*++++++++++++++++++++++++++++Anfang Navigation SMARTPHONE++++++++++++++++++++++++++++*/
#navigation { /* auf dem Tablet&Smartphone soll die Navigation über die volle Breite gehen und oben links am Browser anstoßen */
	width: 100%;
	top: 0;
	left: 0;
	
	background: linear-gradient(to bottom, rgba(191,2,96,1) 0%, rgba(191,2,96,0.6) 100%); /* W3C */
	border-bottom: 1px solid rgba(255,255,255,1); /* Balken, der sich optisch mit dem aktiven Reiter verbindet */
}

#navigation_logo {
	height: 44px;
	margin: 12px 0 4px 0;
	
	background-image: url('grafiken_layout/logo_weiss_horizontal.svg');
}

.navigation_link { /* auf dem Smartphone sollen drei Buttons nebeneinander stehen */
	width: 33.3333333%;
	height: 34px; /* 34 + 2(padding) = 36px */
	margin: 0;
	padding-top: 2px; /* drückt den Text nach unten. Wert muss der Höhe abgezogen werden. */
	float: left;

	box-shadow: none; /* auf dem Tablet&Smartphone kein orangener Rand */

	background-color: rgba(255,255,255,1);
	line-height: 32px;
	text-align: center;
	
	color: #BF0260;

	background-image: none;
}

a.navigation_link {
	background-color: rgba(255,255,255,0.3);
	box-shadow: none; /* auf dem Tablet&Smartphone kein orangener Rand */

	color: white;

	box-shadow: inset 0px 0px 1px rgba(191,2,96,1); /* Schatten wird als Trennstrich benutzt */
}

a.navigation_link:hover {
	box-shadow: none; /* auf dem Tablet&Smartphone kein orangener Rand */
	color: #BF0260;
}

.navigation_link_bild {
	display: none; /* auf dem Tablet&Smartphone sollen die Icons aus Platzgründen nicht erscheinen */
}

#navigation_zumseitenanfang_platzhalter_fuer_spaeter_erscheinenden_javasrcipt_button {
	display: none; /* auf dem Tablet&Smartphone soll der Platzhalter nicht erscheinen */
}

/*++++++++++++++++++++++++++++Anfang Introboxbereich SMARTPHONE++++++++++++++++++++++++++++*/
#introbox_verlauf {
	background-size: 110% auto, 100% 100%;
	background-position: -85% 52%, center center;

	margin: 97px 0 0 0; /* Höhe der Kopfzeile Abstand nach oben */
}
	
#flex-container-introtextbereich { 
	min-height: 285px;
	width: 60%; /* auf dem Smartphone soll der Bereich breiter sein */

    padding: 0 0 0 3%;
}

#flex-item-introtext {
	display: none;
}

#flex-item-introtext-mobilvariante {
	display: inherit; /* wird erst auf dem Smartphone gezeigt */
	
	font-size: 25px; 
	line-height: 33px; 
}

/*++++++++++++++++++++++++++++Anfang Contentbereich SMARTPHONE++++++++++++++++++++++++++++*/
.contentcontainer {
	width: 100%; /* auf dem Smartphone soll der Bereich breiter sein */
	margin: 0 0 30px 0; /* auf dem Smartphone zentriert  */
}

/*++++++++++++++++++++++++++++Anfang Projektboxen SMARTPHONE++++++++++++++++++++++++++++*/
.projekt_bild {
	width: 100%; /* auf dem Smartphone soll das Bild über die ganze Breite gehen */
	margin: 0;
	height: 230px; /* auf dem Smartphone soll das Bild nicht so hoch sein */

	float: none; /* auf dem Smartphone soll alles untereinander stehen */
}

.projekt_bild:after {
	background-image: none; /* auf dem Smartphone soll der Klickpfeil nicht übers Bild rutschen */
}

.h3_projekt_headline {
	margin: 3px 2% 3px 2%; /* auf dem Smartphone liegt der Text nicht rechts vom Bild, daher kein 51% margin nach links */
	padding: 24px 0 0 0; /* Auf dem Smartphone liegt der Text nicht rechts vom Bild, daher kein 51% margin nach links */
}

.projekt_beschreibung {
	margin: 0 2% 0 2%; /* auf dem Smartphone liegt der Text nicht rechts vom Bild, daher kein 51% margin nach links */
	padding: 19px 3px 0 0; /* auf dem Smartphone soll der Abstand vom Text zum rechten Rand kleiner sein */
}

.projekt_daten {
	margin: 9px 2% 13px 2%; /* auf dem Smartphone liegt der Text nicht rechts vom Bild, daher kein 51% margin nach links */
}

/*++++++++++++++++++++++++++++Anfang Fußzeile SMARTPHONE++++++++++++++++++++++++++++*/
.fusszeile_box {
	width: 100%; /* Die beiden Boxen sind weiterhin per "float:left" positioniert, damit die Fußzeile durchscheint. Da sie aber 100% breit sind, rutschen sie dennoch untereinander */
}

.fusszeile_box_bild {
	margin: 27px 0 0 0; 
}

.fusszeile_box_headline {
	padding: 31px 20px 0 0;

	font-size: 40px;
	line-height: 50px;
}

.fusszeile_box_beschreibung {
	padding: 27px 10px 41px 0;
}

#impressum {
	max-width: 96%;
	margin: 22px 2% 138px 2%;
}

}