/*++++++++++++++++++++++++++++Anfang Allgemeine Angaben++++++++++++++++++++++++++++*/
html, body {
	background-color: #FFFFFF; /* auf der Login und der Startseite wegen der Früchtebiler ein weißer Hintergrund */
}

/*++++++++++++++++++++++++++++Gebastel für ein Hintergrundbild, dass den gesamten Bildschirm überdeckt und beim Scrollen stehen bleibt++++++++++++++++++++++++++++*/
#hintergrundbild {
	z-index: -2; /* soll unter allen anderen Inhalten liegen */
	
	position: absolute;
	top: 0px;
	left: 0px;
	
	width: 100%;
	height: 100%; 
	
    /* Der Dateipfad wird direkt in der HTML-Datei per style-Attribut beim HTML-Element angegeben. Das habe ich gemacht, damit der PHP-Befehl zum stündlichen Wechsel des Bildes (der sich ebenso in der HTML-Datei befindet) funktioniert. */
    
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-size: cover;
}

/*++++++++++++++++++++++++++++Anfang Statementbox-Bereich++++++++++++++++++++++++++++*/
#statementbox {
	position: absolute;
	top: 35%;

	width: 72%; /* 5%(Abstand der Navigation nach links) +23%(Breite der Navigation) + 72%(Contentcontainer) = 100%*/
	margin: 0 0 0 28%; /* 5%(Abstand der Navigation nach links) +23%(Breite der Navigation) */
}

.statementext_big { 
	text-align:center;
	font-size: 60px;
	color: #FFFFFF;
    text-shadow: 0px 0px 20px rgba(98,100,104,0.2), 0px 0px 80px rgba(98,100,104,0.9);
}

#statementweiterbutton { 
	position: relative;
	display: block;
	top: 72px;
	margin: 0 auto;

	width: 200px;
	height: 200px;
	border-radius: 100px;
	
	background-color: rgba(255,255,255,0.9);
	background-image: url('grafiken_layout/pfeil_nach_rechts.svg'); /* der über dem Kreis liegende Pfeil wird bei Hover etwas nach oben geschoben */
	background-size: contain; /* bewirkt, dass das Bild immer voll zu sehen ist */
	background-position: 5px center;
	box-shadow: 0px 0px 60px rgba(0, 0, 0, 0.2);
}

#statementweiterbutton::after{  /* damit unter dem Weiterbutton noch etwas Luft ist bei niedrigen Bildschirmen */
    content: " ";
	position: relative;
	display: block;
	top: 0px;
	margin: 0 auto;
	height: 233px;
}

#statementweiterbutton:hover {
	background-color: rgba(255,255,255,1);
	background-position: 30px center; /* der über dem Kreis liegende Pfeil wird bei Hover etwas verschoben */
}

/*++++++++++++++++++++++++++++Anfang impressumbox++++++++++++++++++++++++++++*/
#index_impressumbox { 
    position: fixed;
    
    width: 72%;
    height: 5%;
    top: 95%;
    left: 28%;
        
    font-size: 12px;
	text-align: center;
    transition: all 2s; /* flüssiger Übergang, wenn sich die Eigenschaft des Elements ändert */
}

#index_impressumbox a:hover { 
	text-decoration: underline;
}







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

/*++++++++++++++++++++++++++++Anfang Statementbox-Bereich++++++++++++++++++++++++++++*/
#statementbox { 
	top: 25%;

	width: 100%; /* auf dem Tablet&Smartphone soll der Bereich breiter sein */
	margin: 100px 0 0 0; /* etwas tiefer wegen Kopfzeile */
}

.statementext_big { 
	font-size: 50px;
	color: #BF0260;
    text-shadow: 0px 0px 40px rgba(255,255,255,1), 0px 0px 60px rgba(255,255,255,1);
}

#statementweiterbutton {
	top: 42px;
}

#statementweiterbutton:hover { /* kein Hover auf Tablet&Smartphone */
	background-color: rgba(255,255,255,0.9);
	background-position: 10px center;
}

/*++++++++++++++++++++++++++++Anfang Impressumbox++++++++++++++++++++++++++++*/
#index_impressumbox { 
    width: 90%;
    left: 5%;
}

}










/*############################################# Anfang CSS-Definitionen für SMARTPHONE #############################################*/
 
@media screen and (max-width:600px) {
	
/*++++++++++++++++++++++++++++Anfang Statementbox-Bereich SMARTPHONE++++++++++++++++++++++++++++*/
#statementbox { 
	top: 20%;

	width: 100%; /* auf dem Tablet&Smartphone soll der Bereich breiter sein */
	margin: 97px 0 0 0; /* Höhe der darüber liegenden Kopfzeile incl. Navigation */
}

.statementext_big { 
	font-size: 45px;
	color: #BF0260;
    text-shadow: 0px 0px 20px rgba(255,255,255,1), 0px 0px 30px rgba(255,255,255,1);
}

#statementweiterbutton { 
	top: 50px;

	width: 150px;
	height: 150px;
	border-radius: 75px;
}

#statementweiterbutton:hover { /* kein Hover auf Tablet&Smartphone */
	background-color: rgba(255,255,255,0.9);
	background-position: 10px center;
}

/*++++++++++++++++++++++++++++Anfang Impressumbox++++++++++++++++++++++++++++*/
#index_impressumbox { 
    width: 90%;
    left: 5%;
}

}