/*++++++++++++++++++++++++++++Anfang Allgemeine Angaben++++++++++++++++++++++++++++*/
html, body, #introbox, .ereignisbox {
	margin: 0; /* Abstand nach außen */
	padding: 0; /* Abstand nach innen */
		
	transition: all 0.5s; /* flüssiger Übergang, wenn sich die Eigenschaft des Elements ändert */
	
	font-family:'Ruluko', sans-serif; /* Schriftart für die gesamte Seite*/
	color: #3a4f61; /* Schriftfarbe für die gesamte Seite*/	
	font-size: 21px; /* Schriftgröße für die gesamte Seite*/
	line-height: 26px; /* Zeilenhöhe für die gesamte Seite*/
	text-shadow: 1px 1px 1px rgba(0,0,0,0.2); /* gibt der Schrift einen Schatten */
}

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

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

.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;
}

/*++++++++++++++++++++++++++++Gebastel für ein Hintergrundbild, dass den gesamten Bildschirm überdeckt und beim Scrollen stehen bleibt++++++++++++++++++++++++++++*/
html { /* wird erst auf Tablet und Smartphone sichtbar, wenn das Hintergrundbild nicht mehr über die volle Höhe geht */
	background: -webkit-linear-gradient(left, #b5db71 0%, #3e9484 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(left, #b5db71 0%, #3e9484 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(left, #b5db71 0%, #3e9484 100%); /* IE10+ */
	background: linear-gradient(to right, #b5db71 0%, #3e9484 100%); /* W3C */
}

#hintergrundbild {
	z-index: -5; /* soll unter allen anderen Inhalten liegen */
	
	position: fixed; /* Position soll beim Scrollen fix bleiben */
	top: 0px; /* Abstand nach oben */
	left: 0px; /* Abstand nach links */
	
	width: 100%; /* Breite */
	height: 100%; /* Höhe */
    
    background-image: url('wallpaper.svg'); /* Hintergrundbild */

    background-position: center; /* soll immer zentriert sein */
    background-repeat: no-repeat; /* soll sich nicht wiederholen */
    background-attachment: fixed; /* soll nicht mitscrollen */
    background-size: cover; /* füllt den gesamten Container aus */
}

/*++++++++++++++++++++++++++++Anfang Kopfzeilenbereich++++++++++++++++++++++++++++*/
#introbox { 
	width: 96%; /* soll fast so breit sein wie das Browserfenster */
	max-width: 1200px; /* Maximalbreite */
	min-height: 480px; /* Minimalhöhe */
	margin: 0 auto; /* horizontal zentriert */

	box-shadow: 0px -5px 5px rgba(0, 0, 0, 0.2); /* Schatten ist um 5px nach oben verschoben, damit er unten nicht zu sehen ist */

	background-image: url('walters_schwarzweiss_portrait.svg'); /* W3C */
	background-color: rgba(255,255,255,0.8);
	background-size: 40%;
	background-position: right center;
	background-repeat: no-repeat;
}

#introtextbereich { 
	width: 55%; /* Breite so gewählt, dass der Text nicht über das Portraitbild fließt */
    padding: 10px 0 30px 2%;
}

#introtext_big {
	display: block;
	
	font-size: 38px; /* Schriftgröße */
	line-height: 42px; /* Zeilenhöhe */
}

/*++++++++++++++++++++++++++++Anfang inhaltsverzeichnis++++++++++++++++++++++++++++*/
.inhaltsverzeichnis_container {
	width: 96%; /* soll fast so breit sein wie das Browserfenster */
	max-width: 1200px; /* Maximalbreite */
	margin: 0 auto; /* horizontal zentriert */
		
	background-color:rgba(255,255,255,0.9); /* Hintergrundfarbe */

	border-bottom-left-radius: 5px; /* runde Ecken */
	border-bottom-right-radius: 5px; /* runde Ecken */

	box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.2); /* Schatten */
}

.inhaltsverzeichnis_ueberschrift {
	padding: 22px 0 25px 2%;
	
	font-size: 38px; /* Schriftgröße */
	line-height: 42px; /* Zeilenhöhe */
}

.inhaltsverzeichnis_link {
	display: block; /* bewirkt, dass alles wie gewünscht dargestellt wird, obwohl es ein Link (inline-Element) ist */
	float: left; /* Alles soll sich linksbündig nebeneinander anordnen */

	margin: 0 1px 10px 10px; /* Abstand zwischen den Links */
	padding: 7px; /* Abstand innerhalb eines Links = größe der Farbfläche */
	border-left: 5px solid #e36012; /* Umrandung */
	border-radius: 5px; /* runde Ecken */

	color: #ffffff; /* Schriftfarbe */
	background-color: #366f99; /* Farbfläche */
}
.inhaltsverzeichnis_link:hover {
	background-color: #e36012; /* Farbfläche ändert sich bei Hover */
}

.inhaltsverzeichnis_link_2_BR_davor {
	<p>Nach diesem <span class="after">Wort</span> soll ein Zeilenumbruch erfolgen.</p>
  <p>Vor diesem <span class="before">Wort</span> soll ein Zeilenumbruch erfolgen.</p>
	display: block; /* bewirkt, dass alles wie gewünscht dargestellt wird, obwohl es ein Link (inline-Element) ist */
	float: left; /* Alles soll sich linksbündig nebeneinander anordnen */

	margin: 0 1px 10px 10px; /* Abstand zwischen den Links */
	padding: 7px; /* Abstand innerhalb eines Links = größe der Farbfläche */
	border-left: 5px solid #e36012; /* Umrandung */
	border-radius: 5px; /* runde Ecken */

	color: #ffffff; /* Schriftfarbe */
	background-color: #366f99; /* Farbfläche */
}
.inhaltsverzeichnis_link:hover {
	background-color: #e36012; /* Farbfläche ändert sich bei Hover */
}


/* ---- Jahre, für die noch keine Poskarten archiviert wurden */
.inhaltsverzeichnis_link_NN {
	display: block; /* bewirkt, dass alles wie gewünscht dargestellt wird, obwohl es ein Link (inline-Element) ist */
	float: left; /* Alles soll sich linksbündig nebeneinander anordnen */

	margin: 0 1px 10px 10px; /* Abstand zwischen den Links */
	padding: 7px; /* Abstand innerhalb eines Links = größe der Farbfläche */
	border-left: 5px solid #E3C912; /* Umrandung */
	border-radius: 5px; /* runde Ecken */

	color: #ffffff; /* Schriftfarbe */
	background-color: #366f99; /* Farbfläche */
}
.inhaltsverzeichnis_link_NN:hover {
	background-color: #E3C912; /* Farbfläche ändert sich bei Hover */
}

/*++++++++++++++++++++++++++++Anfang Zwischenüberschrift SCHMAL ++++++++++++++++++++++++++++*/

.zwischenueberschrift_container_schmal {
	width: 96%; /* soll fast so breit sein wie das Browserfenster */
	max-width: 1200px; /* Maximalbreite */
	min-height: 44px;
	margin: 0 auto; /* horizontal zentriert */

	box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.2); /* Schatten */
	border-radius: 5px; /* runde Ecken */

	background-image: -webkit-linear-gradient(top,  rgba(255,255,255,0.7) 0%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
	background-image: -ms-linear-gradient(top,  rgba(255,255,255,0.7) 0%,rgba(255,255,255,0) 100%); /* IE10+ */
	background-image: linear-gradient(to bottom,  rgba(255,255,255,0.7) 0%,rgba(255,255,255,0) 100%); /* W3C */
}

.zwischenueberschrift_text_schmal {
    width: 77%; /* nur 77%, damit der permanente nach-oben-Pfeil rechts noch Platz hat */
	margin: 22px 1% 22px 2%; 
	
	float: left; /* damit sich der Pfeil rechts daneben anordnet */
	font-size:   20px; /* Schriftgröße */
	line-height: 20px; /* Zeilenhöhe */
}


/*++++++++++++++++++++++++++++Anfang Zwischenüberschrift++++++++++++++++++++++++++++*/
.zwischenueberschrift_container {
	width: 96%; /* soll fast so breit sein wie das Browserfenster */
	max-width: 1200px; /* Maximalbreite */
	min-height: 88px;
	margin: 0 auto; /* horizontal zentriert */

	box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.2); /* Schatten */
	border-radius: 5px; /* runde Ecken */

	background-image: -webkit-linear-gradient(top,  rgba(255,255,255,0.7) 0%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
	background-image: -ms-linear-gradient(top,  rgba(255,255,255,0.7) 0%,rgba(255,255,255,0) 100%); /* IE10+ */
	background-image: linear-gradient(to bottom,  rgba(255,255,255,0.7) 0%,rgba(255,255,255,0) 100%); /* W3C */
}

.zwischenueberschrift_text {
    width: 77%; /* nur 77%, damit der permanente nach-oben-Pfeil rechts noch Platz hat */
	margin: 22px 1% 22px 2%; 
	
	float: left; /* damit sich der Pfeil rechts daneben anordnet */
	font-size: 38px; /* Schriftgröße */
	line-height: 42px; /* Zeilenhöhe */
}

/*++++++++++++++++++++++++++++Anfang Ereignisse++++++++++++++++++++++++++++*/
.ereignisbox {
	width: 96%; /* soll fast so breit sein wie das Browserfenster */
	max-width: 1200px; /* Maximalbreite */
	min-height: 180px; /* mindestens so hoch wie das Foto */
	margin: 14px auto; /* horizontal zentriert */

	background-color:rgba(255,255,255,0.7); /* Farbfläche */
	
	border-radius: 5px; /* runde Ecken */
	box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.2); /* Schatten */
}

.ereignisbox:hover {
	background-color: rgba(255,255,255,0.9); /* Farbfläche */
}

.ereignisbox_foto {
	float: left;
		
	width: 180px; /* Breite */
	height: 180px; /* Höhe */
	margin: 3px; /* Abstand rundrum */
	box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5); /* Schatten */
}

.ereignisbox_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) */
	padding: 20px 20px 0 200px;

	font-size: 32px; /* Schriftgröße */
	line-height: 36px; /* Zeilenabstand */
	color: #e36012; /* Schriftfarbe */
}

.ereignisbox_headline:hover {
	text-decoration: underline; /* wird unterstrichen bei Hover */
	color: #e61300; /* Schriftfarbe */
}

.ereignisbox_beschreibung {
	margin: 0 0 0 200px; /* Verschiebt den Text von links um die Breite des Bilds + 20 px */
	padding: 14px 20px 0 0;
}

.ereignisbox_details {
	margin: 0 0 0 200px; /* Verschiebt den Text von links um die Breite des Bilds + 20 px */
	padding: 12px 10px 16px 0;
	
	font-size: 14px; /* Schriftgröße */
	word-spacing: 3px; /* Wortabstand */
	line-height: 17px; /* Zeilenabstand */
}

/*++++++++++++++++++++++++++++Anfang Fußzeile++++++++++++++++++++++++++++*/
.fusszeilenbox {
	width: 96%; /* soll fast so breit sein wie das Browserfenster */
	max-width: 1200px; /* Maximalbreite */
	margin: 20px auto; /* horizontal zentriert */

	background-color:rgba(51,97,143,0.7); /* Farbfläche */
	
	border-radius: 5px; /* runde Ecken */
	box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.2), 0px 0px 0px 5px #ffffff inset; /* Schatten nach innen UND außen */
}

.fusszeilenbox_foto {
	float: left; /* soll links vom danach folgenden Text stehen */
	
	width: 250px; /* Breite */
	height: 250px; /* Höhe */
	margin: 20px; /* Abstand nach außen */

	border-radius: 125px; /* runde Ecken */
}

.fusszeilenbox_headline {
	margin: 0 0 0 290px; /* Verschiebt den Text von links um die Breite des Bilds + 2xmargin des Bildes */
	padding: 35px 20px 0 0;

	font-size: 38px; /* Schriftgröße */
	line-height: 40px; /* Zeilenabstand */
	color: #ffffff; /* Schriftfarbe */
}

.fusszeilenbox_beschreibung {
	margin: 0 0 0 290px; /* Verschiebt den Text von links um die Breite des Bilds + 2xmargin des Bildes */
	padding: 20px 20px 0 0;
	color: #ffffff; /* Schriftfarbe */
}

.fusszeilenbox_unterschrift {
	margin: 0 0 0 290px; /* Verschiebt den Text von links um die Breite des Bilds + 2xmargin des Bildes */
	padding: 20px 10px 25px 0;
	
	font-family: 'La Belle Aurore', cursive; /* Schriftart */
	font-size: 30px; /* Schriftgröße */
	line-height: 35px; /* Zeilenabstand */
	color: #ffffff; /* Schriftfarbe */
}

/*++++++++++++++++++++++++++++Anfang Impressum++++++++++++++++++++++++++++*/
#versionshinweise {
	display: block; /* bewirkt, dass alles wie gewünscht dargestellt wird, obwohl es ein Link (inline-Element) ist */
	margin: 40px auto; /* horizontal zentriert */
	
	text-align: center;
	font-size: 17px;
	color: white;
}

/*++++++++++++++++++++++++++++Anfang Nach-oben-Link am Seitenende++++++++++++++++++++++++++++*/
#pfeil_zumseitenanfang_amseitenende {
	display: block; /* bewirkt, dass alles wie gewünscht dargestellt wird, obwohl es ein Link (inline-Element) ist */
	
	width: 80px; /* Breite */
	height: 80px; /* Höhe */
	margin: 0 auto; /* horizontal zentriert */
	
	border-radius: 40px; /* runde Ecken */

	background-color: #e36012; /* Farbfläche */

	background-image: url('pfeil_nach_oben_weiss.svg'); /* der über dem Kreis liegende Pfeil */
	background-size: contain; /* bewirkt, dass das Bild immer voll zu sehen ist */
	background-repeat: no-repeat; /* soll nicht wiederholt werden */
	background-position: center; /* wird zentriert positioniert */
}

#pfeil_zumseitenanfang_amseitenende:hover {
	background-color: #e53a00; /* Farbfläche */
}

/*++++++++++++++++++++++++++++Anfang Nach-oben-Link, der immer sichtbar ist++++++++++++++++++++++++++++*/
#pfeil_zumseitenanfang_der_immer_sichtbar_ist {
	display: block; /* bewirkt, dass alles wie gewünscht dargestellt wird, obwohl es ein Link (inline-Element) ist */
	position: fixed;
	top: 0px;
	left: 82%;
	
	width: 18%; /* Breite */
	height: 88px; /* Höhe */
	
	border-bottom-left-radius: 5px; /* runde Ecken */
	box-shadow: 1px 1px 2px 2px rgba(0, 0, 0, 0.2);

	background-image: url('pfeil_nach_oben.svg'), -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,96255255,0.5) 100%); /* Chrome10+,Safari5.1+ */
	background-image: url('pfeil_nach_oben.svg'), -ms-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,0.5) 100%); /* IE10+ */
	background-image: url('pfeil_nach_oben.svg'), linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(255,255,255,0.5) 100%); /* W3C */

	background-size: contain; /* bewirkt, dass das Bild immer voll zu sehen ist */
	background-repeat: no-repeat; /* soll nicht wiederholt werden */
	background-position: center; /* wird zentriert positioniert */
}

#pfeil_zumseitenanfang_der_immer_sichtbar_ist:hover {
	background-color: #ffffff; /* Farbfläche */
}

/*++++++++++++++++++++++++++++Anfang Zwischenüberschrift++++++++++++++++++++++++++++*/
.zwischenueberschrift_container-2 {
	width: 96%; /* soll fast so breit sein wie das Browserfenster */
	max-width: 1200px; /* Maximalbreite */
	min-height: 88px;
	margin: 0 auto; /* horizontal zentriert */

	box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.2); /* Schatten */
	border-radius: 5px; /* runde Ecken */

	background-image: -webkit-linear-gradient(top,  rgba(255,255,255,0.7) 0%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
	background-image: -ms-linear-gradient(top,  rgba(255,255,255,0.7) 0%,rgba(255,255,255,0) 100%); /* IE10+ */
	background-image: linear-gradient(to bottom,  rgba(255,255,255,0.7) 0%,rgba(255,255,255,0) 100%); /* W3C */
}

.ereignisbox-2 {
	width: 96%; /* soll fast so breit sein wie das Browserfenster */
	max-width: 1200px; /* Maximalbreite */
	min-height: 30px; /* mindestens so hoch wie das Foto */
	margin: 14px auto; /* horizontal zentriert */

	background-color:rgba(255,255,255,0.7); /* Farbfläche */
	
	border-radius: 5px; /* runde Ecken */
	box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.2); /* Schatten */
}

.ereignisbox-2:hover {
	background-color: rgba(255,255,255,0.9); /* Farbfläche */
}


.ereignisbox-2_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) */
	padding: 20px 20px 0 200px;

	font-size: 32px; /* Schriftgröße */
	line-height: 36px; /* Zeilenabstand */
	color: #e36012; /* Schriftfarbe */
}

.ereignisbox-2_headline:hover {
	text-decoration: underline; /* wird unterstrichen bei Hover */
	color: #e61300; /* Schriftfarbe */
}

.ereignisbox-2_beschreibung {
	margin: 0 0 0 200px; /* Verschiebt den Text von links um die Breite des Bilds + 20 px */
	padding: 14px 20px 0 0;
}

.ereignisbox-2_details {
	margin: 0 0 0 200px; /* Verschiebt den Text von links um die Breite des Bilds + 20 px */
	padding: 12px 10px 16px 0;
	
	font-size: 14px; /* Schriftgröße */
	word-spacing: 3px; /* Wortabstand */
	line-height: 17px; /* Zeilenabstand */
}

/*++++++++++++++++++++++++++++Anfang Fußzeile++++++++++++++++++++++++++++*/










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

/*++++++++++++++++++++++++++++Gebastel für ein Hintergrundbild, dass den gesamten Bildschirm überdeckt und beim Scrollen stehen bleibt++++++++++++++++++++++++++++*/
#hintergrundbild {
	position: absolute; /* soll nicht mehr fix sein, sondern mitscrollen */
	height: 635px; /* so hoch wie Kopfzeile, Introbox und Reiter */
    background-attachment: scroll; /* soll nicht mehr stehen bleiben */
}

/*++++++++++++++++++++++++++++Anfang Kopfzeilenbereich++++++++++++++++++++++++++++*/
#introbox { 
    background-size: auto 300px, contain; /* Das Portraitbild soll oberhalb des Textes stehen */
	background-position: center top; /* Das Portraitbild soll oberhalb des Textes stehen */
}

#introtextbereich { 
	width: 94%; /* auf dem Tablet soll der Textbereich breiter sein, da das Portraitbild oben steht */
    padding: 280px 3% 20px 3%; /* Abstand nach oben: Höhe des Portraitbilds */
}

/*++++++++++++++++++++++++++++Anfang Ereignisse++++++++++++++++++++++++++++*/
.ereignisbox {
	background-color: rgba(255,255,255,0.9); /* auf dem Tablet kein Hover-Effekt. Hintergrund Soll von vornherein hell sein */
}

}









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

/*++++++++++++++++++++++++++++Gebastel für ein Hintergrundbild, dass den gesamten Bildschirm überdeckt und beim Scrollen stehen bleibt++++++++++++++++++++++++++++*/
#hintergrundbild {
	position: absolute; /* soll nicht mehr fix sein, sondern mitscrollen */
	height: 635px;
    background-attachment: scroll; /* soll nicht mehr stehen bleiben */
}

/*++++++++++++++++++++++++++++Anfang Kopfzeilenbereich++++++++++++++++++++++++++++*/
#introbox { 
    background-size: auto 300px, contain; /* Das Portraitbild soll oberhalb des Textes stehen */
	background-position: center top; /* Das Portraitbild soll oberhalb des Textes stehen */
}

#introtextbereich { 
	width: 94%; /* auf dem Smartphone soll der Textbereich breiter sein, da das Portraitbild oben steht */
    padding: 300px 3% 20px 3%; /* Abstand nach oben: Höhe des Portraitbilds */
}

#introtext_big {
	font-size: 27px; /* Auf dem Smartphone sollen die Projektüberschriften etwas kleiner sein */
	line-height: 33px; /* Zeilenabstand */
}

/*++++++++++++++++++++++++++++Anfang inhaltsverzeichnis++++++++++++++++++++++++++++*/
.inhaltsverzeichnis_ueberschrift {
	font-size: 27px; /* Auf dem Smartphone sollen die Projektüberschriften etwas kleiner sein */
	line-height: 33px; /* Zeilenabstand */
}

/*++++++++++++++++++++++++++++Anfang Zwischenüberschrift++++++++++++++++++++++++++++*/
.zwischenueberschrift_container {
	width: 100%; /* soll auf dem Smartphone ganz duchgehen */
	min-height: 78px; /* soll auf dem Smartphone weniger hoch sein, weil der Text auch kleiner ist */
	border-radius: 0px; /* soll auf dem Smartphone keine runde Ecken haben */
}

.zwischenueberschrift_text {
	font-size: 27px; /* Auf dem Smartphone sollen die Projektüberschriften etwas kleiner sein */
	line-height: 33px; /* Zeilenabstand */
}

/*++++++++++++++++++++++++++++Anfang Ereignisse++++++++++++++++++++++++++++*/
.ereignisbox {
	background-color: rgba(255,255,255,0.9); /* auf dem Smartphone kein Hover-Effekt. Hintergrund Soll von vornherein hell sein */

	box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.2), 0px 186px 0px 0px rgba(0, 0, 0, 0.2) inset; /* Schatten wird ergänzt mit einem Schatten nach innen, der so hoch ist wie das Foto */
}

.ereignisbox_headline {
	margin: 0; /* soll auf dem Smartphone nicht nach rechtes verschoben sein, da das Bild oberhalb statt links stehen soll */
	padding: 195px 0 0 10px; /* soll auf dem Smartphone nach unten verschoben sein, da das Bild oberhalb statt links stehen soll */

	font-size: 27px; /* Auf dem Smartphone sollen die Überschriften etwas kleiner sein */
	line-height: 33px; /* Auf dem Smartphone sollen die Überschriften-Zeilenabstönde etwas kleiner sein */
}

.ereignisbox_beschreibung {
	margin: 0; /* soll auf dem Smartphone nicht nach rechtes verschoben sein, da das Bild oberhalb statt links stehen soll */
	padding: 12px 20px 0 10px;
}

.ereignisbox_details {
	margin: 0 auto; /* soll auf dem Smartphone nicht nach rechtes verschoben sein, da das Bild oberhalb statt links stehen soll */
	padding: 16px 10px 20px 0;
	
	text-align: center;
}

/*++++++++++++++++++++++++++++Anfang Fußzeile++++++++++++++++++++++++++++*/
.fusszeilenbox_foto {
	float: none; /* soll auf dem Smartphone nicht mehr links vom danach folgenden Text stehen */
	position: relative;
	top: 30px;
	
	display: block;
	margin: 0 auto; 
}

.fusszeilenbox_headline {
	margin: 0; /* soll auf dem Smartphone nicht nach rechtes verschoben sein, da das Bild oberhalb statt links stehen soll */
	padding: 35px 10px 0 10px;
}

.fusszeilenbox_beschreibung {
	margin: 0; /* soll auf dem Smartphone nicht nach rechtes verschoben sein, da das Bild oberhalb statt links stehen soll */
	padding: 20px 10px 0 10px;
}

.fusszeilenbox_unterschrift {
	margin: 0; /* soll auf dem Smartphone nicht nach rechtes verschoben sein, da das Bild oberhalb statt links stehen soll */
	padding: 20px 10px 25px 10px;
}
/*++++++++++++++++++++++++++++Anfang Zwischenüberschrift++++++++++++++++++++++++++++*/
.zwischenueberschrift_container-2 {
	width: 100%; /* soll auf dem Smartphone ganz duchgehen */
	min-height: 78px; /* soll auf dem Smartphone weniger hoch sein, weil der Text auch kleiner ist */
	border-radius: 0px; /* soll auf dem Smartphone keine runde Ecken haben */
}
<!--
.zwischenueberschrift_container-2 {
	width: 96%; /* soll fast so breit sein wie das Browserfenster */
	max-width: 1200px; /* Maximalbreite */
	min-height: 88px;
	margin: 0 auto; /* horizontal zentriert */

	box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.2); /* Schatten */
	border-radius: 5px; /* runde Ecken */

	background-image: -webkit-linear-gradient(top,  rgba(255,255,255,0.7) 0%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
	background-image: -ms-linear-gradient(top,  rgba(255,255,255,0.7) 0%,rgba(255,255,255,0) 100%); /* IE10+ */
	background-image: linear-gradient(to bottom,  rgba(255,255,255,0.7) 0%,rgba(255,255,255,0) 100%); /* W3C */
}
-->

.zwischenueberschrift_text-2 {
	font-size: 27px; /* Auf dem Smartphone sollen die Projektüberschriften etwas kleiner sein */
	line-height: 33px; /* Zeilenabstand */
}

.zwischenueberschrift_text-2-X {
    width: 77%; /* nur 77%, damit der permanente nach-oben-Pfeil rechts noch Platz hat */
	margin: 22px 1% 22px 2%; 
	
	float: left; /* damit sich der Pfeil rechts daneben anordnet */
	font-size: 38px; /* Schriftgröße */
	line-height: 42px; /* Zeilenhöhe */
}

/*++++++++++++++++++++++++++++Anfang Nach-oben-Link, der immer sichtbar ist++++++++++++++++++++++++++++*/
#pfeil_zumseitenanfang_der_immer_sichtbar_ist {
	height: 78px; /* soll auf dem Smartphone so hoch sein wie der schmaler werdende Zwischenüberschrifts-Balken */
}

}