/*
###########################################################################################################################
####################################################  Pseudo Klassen  #####################################################
###########################################################################################################################

####### CSS der Startseite/Artikel/News #######

Überschrift der Webseite 
*/
h1{
	text-align: center;
	margin: 0rem 0rem 2rem 0rem;
}

/*Überschrift der einzelnen Artikel/News*/
h3{
	margin: 1rem 0rem 0rem 1rem;
}

/*
###########################################################################################################################
########################################################    IDs    ########################################################
###########################################################################################################################

IDs der einzelnen Artikel jeweils Gesamt
*/
#artikelblock1{
    height: auto;
    margin: 0rem 0rem 1rem;
    padding: 0;
    width: 57.5rem;
}

#artikelblock2{
    height: auto;
    margin: 0rem 0rem 1rem;
    padding: 0;
    width: 57.5rem;
}

#artikelblock3{
    height: auto;
    margin: 0rem 0rem 1rem;
    padding: 0;
    width: 57.5rem;
}

#artikelblock4{
    height: auto;
    margin: 0rem 0rem 1rem;
    padding: 0;
    width: 57.5rem;
}

/*IDs der jeweiligen Texte der Artikel*/
#artikelText1{
    border-left: 0.5rem solid rgb(0, 160, 227);
	width: 57rem;
	height: auto;
	margin: 1rem 0rem 2rem 1.5rem;
	padding: 1rem 0rem;
}

#artikelText2{
    border-right: 0.5rem solid rgb(0, 160, 227);
	width: 57rem;
	height: auto;
	margin: 1rem 0rem 2rem 1.5rem;
	padding: 1rem 0rem;
}

#artikelText3{
    border-left: 0.5rem solid rgb(0, 160, 227);
	width: 57rem;
	height: auto;
	padding: 1rem 0rem;
	margin: 1rem 0rem 2rem 1.5rem;
}

#artikelText4{
    border-right: 0.5rem solid rgb(0, 160, 227);
	width: 57rem;
	height: auto;
	padding: 1rem 0rem;
	margin: 1rem 0rem 2rem 1.5rem;
}

/*IDs der jeweiligen Bilder der Artikel*/
#newsBild1{
    float: right;
    height: auto;
    margin: 1rem 2rem 0rem 1rem;
    padding: 0;
    width: 16rem;
}

#newsBild2{
    float: left;
    height: auto;
    margin: 2rem 2rem 1rem 2rem;
    padding: 0;
    width: 16rem;
}

#newsBild3{
    float: right;
    height: auto;
    margin: 1rem 2rem 0rem 1rem;
    padding: 0;
    width: 16rem;
}

#newsBild4{
    float: left;
    height: auto;
    margin: 2rem 2rem 1rem 2rem;
    padding: 0;
    width: 16rem;
}

/*IDs des versteckten Bildes für den Artikel 1, wenn auf das Bild von Artikel 1 geklickt wird*/
#bild1GrossB{
    height: auto;
    margin: 1rem;
    width: 31rem;	
}

#bild1Gross:target {
	display: block;
}

#bild1Gross{
    background-color: white;
    border: 0.3rem solid rgb(0, 160, 227);
    height: auto;
	left: 44rem;
    margin: 0;
    padding: 0rem;
    position: absolute;
    top: 23rem;
    width: 33rem;
    z-index: 3;
	display: none;
}

#bild1Gross div{
    padding: 0rem;
    text-align: right;
}

/*IDs des versteckten Bildes für den Artikel 2, wenn auf das Bild von Artikel 2 geklickt wird*/
#bild2GrossB{
    height: auto;
    margin: 1rem;
    width: 31rem;	
}

#bild2Gross:target {
	display: block;
}

#bild2Gross{
    background-color: white;
    border: 0.3rem solid rgb(0, 160, 227);
    height: auto;
    left: 10rem;
    margin: 0;
    padding: 0rem;
    position: absolute;
    top: 52rem;
    width: 33rem;
    z-index: 3;
	display: none;
}

#bild2Gross div{
    padding: 0rem;
    text-align: right;
}

/*IDs des versteckten Bildes für den Artikel 3, wenn auf das Bild von Artikel 3 geklickt wird*/
#bild3GrossB{
    height: auto;
    margin: 1rem;
    width: 20rem;	
}

#bild3Gross:target {
	display: block;
}

#bild3Gross{
    background-color: white;
    border: 0.3rem solid rgb(0, 160, 227);
    height: auto;
    left: 45rem;
    margin: 0;
    padding: 0rem;
    position: absolute;
    top: 72rem;
    width: 22rem;
    z-index: 3;
	display: none;
}

#bild3Gross div{
    padding: 0rem;
    text-align: right;
}

/*IDs des versteckten Bildes für den Artikel 4, wenn auf das Bild von Artikel 4 geklickt wird*/
#bild4GrossB{
    height: auto;
    margin: 1rem;
    width: 31rem;	
}

#bild4Gross:target {
	display: block;
}

#bild4Gross{
    background-color: white;
    border: 0.3rem solid rgb(0, 160, 227);
    height: auto;
    left: 10rem;
    margin: 0;
    padding: 0rem;
    position: absolute;
    top: 90rem;
    width: 33rem;
    z-index: 3;
	display: none;
}

#bild4Gross div{
    padding: 0rem;
    text-align: right;
}

/*
###########################################################################################################################
########################################################  Klassen  ########################################################
###########################################################################################################################

Klasse für das Schließenkreuz für die versteckten Bilder, der einzelnen Artikel
*/
.close{
    background-color: #e32029;
    color: white;
    font-size: 2rem;
    margin: 0rem;
    padding: 0.1rem 1.5rem 0rem;
    text-decoration: none;
}

/*Entfernt den unerwünschten Abstand, der bei Firefox entsteht*/
@-moz-document url-prefix(){
	.close{
	background-color: #e32029;
    color: white;
    font-size: 2rem;
    margin: 0rem;
    padding: 0rem 1.5rem 0rem;
    text-decoration: none;
	}
}

/*Klasse für den Text der Gesamten Artikel*/
.text{
	margin: 2rem;
	text-align: justify;
}

/*Klasse für den Hintergrund der Gesamten Artikel*/
.backgroundColor{
	background-color: white;
}

/*Klasse für das Erstelldatum der einzelnen Artikel*/
.erstellDatum{
    font-size: 0.6rem;
    margin-left: 2rem;
}