/*YYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYAnfang Angaben für beide IndexseitenYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYY*/



/*++++++++++++++++++++++++++++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:Tahoma, Arial, Helvetica, sans-serif; /* Schriftart für die indexseite (kein Google Font) */
	color: #444444; /* Schriftfarbe für die gesamte Seite */
	
	background-color: #FFFFFF; /* auf der Login und der Startseite wegen der Früchtebilder ein weißer Hintergrund */
}

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 */
}


/*++++++++++++++++++++++++++++Gebastel für ein Hintergrundbild, dass den gesamten Bildschirm überdeckt und beim Scrollen stehen bleibt++++++++++++++++++++++++++++*/
#index_hintergrundbild {
	z-index: -2; /* soll unter allen anderen Inhalten liegen */
	
	position: absolute;
	top: 0px;
	left: 0px;
	
	width: 100%;
	height: 100%; 
	
	background-image: url('index.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-size: cover;
    
    filter: blur(44px);
}

/*YYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYAnfang Login - IndexseiteYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYY*/



/*++++++++++++++++++++++++++++Anfang Logo++++++++++++++++++++++++++++*/
#index_logobereich {
    position: fixed; /* fixe Positionierung zum Browserfenster */
    width: 25%; /* 5%(Abstand des Logos nach links) +25%(Breite des Logos) + 65%(loginformularbox) +5%(Abstand von loginformularbox nach rechts) = 100% */
    height: 60%;
    top: 5%;
    left: 5%;

    background-image: url('indexkreis.svg'); /* weißer Kreis unter dem Logo */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    background-color: transparent;

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

#index_logo {
    display: block;
    width: 100%; 
    height: 100%;
}

/*++++++++++++++++++++++++++++Anfang Formularbox++++++++++++++++++++++++++++*/
#index_loginformularbox, #index_loginformularplatzhalterbox { 
    position: fixed;
    width: 65%;
    height: 90%;
    top: 5%;
    left: 30%;

    background-image: url('indexkreis.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    background-color: transparent;
    
    transition: all 2s; /* flüssiger Übergang, wenn sich die Eigenschaft des Elements ändert */
}

/*++++++++++++++++++++++++++++Anfang Formularbox++++++++++++++++++++++++++++*/
#index_loginformularplatzhalterbox { 
    background-image: url('indexillu.svg');
}

/*++++++++++++++++++++++++++++Anfang Formularelemente++++++++++++++++++++++++++++*/
#index_formular {
    position: relative;
    top:50%;
    left:50%;
    margin: -30px 0 0 -140px; /* Da die Box auf die halbe Höhe / Breite verschoben wird, muss sie um die Hälfte ihrer eigen Höhe / Breite nach oben / links verschoben werden */
    padding: 0;
}

#index_passwort { 
    float: left;
    height: 38px;
    width: 218px;
    margin: 0;
    padding: 10px;

	font-family:'Encode Sans', sans-serif; /* muss man hier komischerweise nochmal angeben */

    border: 1px solid #ffb600;
    
    box-shadow: 2px 2px 10px 0 rgba(0,0,0,0.1) inset; /* gibt der Box einen Schatten nach innen W3C */

    font-size: 21px;
    
    transition: all 0.5s; /* flüssiger Übergang, wenn sich die Eigenschaft des Elements ändert */
}

#index_passwort:focus {
    outline: none;
    background-color: rgba(0,0,0,0.01);
	color: #000000;
}

#index_submit { 
    float: left;
    height: 60px;
    width: 40px;
    margin: 0;
    padding: 10px;

    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px; /* runde Ecken W3C */

    border: none;
    
    background-image: url('index_submitbutton.svg');
    background-size: contain; /* bewirkt, dass das Bild immer voll sichtbar ist */
    background-repeat: no-repeat; /* verhindert eine Wiederholung des Bildes */
    background-position: center center; /* positioniert das Bild */
    background-color: transparent;
   
    cursor:pointer;
    
    transition: all 0.5s; /* flüssiger Übergang, wenn sich die Eigenschaft des Elements ändert */
}

#index_submit:hover { 
    box-shadow: 0px 0px 20px 0px rgba(255,255,255,0.5)  inset;    
}

/*++++++++++++++++++++++++++++Anfang impressumbox++++++++++++++++++++++++++++*/
#index_impressumbox { 
    position: fixed;
    width: 65%;
    height: 5%;
    top: 95%;
    left: 30%;
    
    font-size: 12px;
	text-align: center;
}

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







/*############################################# Anfang CSS-Definitionen für TABLET UND SMARTPHONE#############################################*/
 
@media screen and (max-width:1024px) {
    
/*++++++++++++++++++++++++++++Anfang Navigation++++++++++++++++++++++++++++*/
#index_logobereich {
    position: absolute; /* bugfixing für Firefox/Android */
    width: 90%;
}

/*++++++++++++++++++++++++++++Anfang Formularbox++++++++++++++++++++++++++++*/
#index_loginformularbox, #index_loginformularplatzhalterbox { 
    width: 90%;
    height: 30%;
    top: 65%;
    left: 5%;

    background-image: none;
}

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

}