@charset "ISO-8859-1";
@font-face {font-family: 'BankGothicMdBT';src: url('webfonts/36E953_0_0.eot');src: url('webfonts/36E953_0_0.eot?#iefix') format('embedded-opentype'),url('webfonts/36E953_0_0.woff2') format('woff2'),url('webfonts/36E953_0_0.woff') format('woff'),url('webfonts/36E953_0_0.ttf') format('truetype');}

/** für alle Monitorgrößen **/

body{
	font-family: "arial";
}


	
/** Bildschirmbreiten bis 319Pixel **/
@media only screen and (max-width: 319px) {
	
body {
	font-size: 0.7em;
    background-image: url("HLogo320.jpg");
    background-repeat: no-repeat;
    background-position: center  top:40px;
	background-size: contain; 
	height: 100vh;
    background-attachment:fixed;
}
#header{
	top: 0px;
	text-align: center;
	background:#BBB;
	width:100%;
	font-family: 'BankGothicMdBT','Arial';
	font-weight: bold; 
	font-style: italic;
	font-size: 150%;
	position : fixed;
	z-index: 4;
	}
#article{
	top:25px;
	bootom:25px;
	margin-left:2px;
	margin-right:2px;
	position : relative;
	z-index: 1;
	}
a.meldung{
 display:block;
 padding:0.3em 0.3em;
 width: 100%;
 border:  1px solid black;
 border-radius:0.3em;
 margin:0 0.3em 0.5em 0;
 box-sizing: border-box;
 text-decoration:none;
 font-family:'Roboto',sans-serif;
 text-align:center;
 transition: all 0.2s;
}
a.meldung:link{
	font-family:'Roboto',sans-serif;
	font-size: 100%;
	color:grey;
	}
a.meldung:visited{
	font-family:'Roboto',sans-serif;
	font-size: 100%;
	color:green;
	}
a.button{
 display:block;
 padding:0.3em 0.3em;
 width: 90px;
 border:  1px solid black;
 border-radius:0.3em;
 margin:0 0.3em 0.3em 0;
 box-sizing: border-box;
 text-decoration:none;
 font-family:'Roboto',sans-serif;
 text-align:center;
 transition: all 0.2s;
}

.bild{
	height: 25px;
	width: 25px;
}

a:link{
	font-size: 130%;
	color:grey;
	font-weight: bold; 
	}
a:visited{
	font-size: 130%;
	color:red;
	font-weight: bold; 
	}
#footer{
	position : fixed;
	bottom: 0px;
	width:100%;
	height:25px;
	background:#CCC;
	text-align: center;
	z-index: 5;
	}
	.footer_symbole{
	height: 21px;
	width: 21px;
	}
}
/** Bildschirmbreiten nur für Apfelbrei **/
@media only screen and (min-width: 320px ) {
	
body {font-size: 1em;
	top: 40px;
    background-image: url("HLogo320.jpg");
    background-repeat: no-repeat;
    background-position: center  top;
	background-size: contain; 
	height: 100vh;
    background-attachment:fixed;
}

#header{
	top: 0px;
	text-align: center;
	width:100%;
	background:#CCC;
	font-family: 'BankGothicMdBT','Arial';
	font-weight: bold; 
	font-style: italic;
	font-size: 140%;

	position : fixed;
	z-index: 4;
	}
#article{
	top: 20px;
	bottom: 25px;
	margin-left:4px;
	margin-right:4px;
	position : relative;
	z-index: 1;
	}
a.meldung{
 display:block;
 padding:0.3em 0.3em;
 width: 100%;
 border:  1px solid black;
 border-radius:0.3em;
 margin:0 0.3em 0.5em 0;
 box-sizing: border-box;
 text-decoration:none;
 font-family:'Roboto',sans-serif;
 text-align:center;
 transition: all 0.2s;
}
a.meldung:link{
	font-family:'Roboto',sans-serif;
	font-size: 100%;
	color:grey;
	}
a.meldung:visited{
	font-family:'Roboto',sans-serif;
	font-size: 100%;
	color:green;
	}
a.button{
 display:block;
 padding:0.5em 0.5em;
 width: 130px;
 border:  1px solid black;
 border-radius:0.3em;
 margin:0 0.3em 0.3em 0;
 box-sizing: border-box;
 text-decoration:none;
 font-family:'Roboto',sans-serif;
 text-align:center;
 transition: all 0.2s;
}
.bild{
	height: 25px;
	width: 25px;
}
a:link{
	font-size: 120%;
	color:grey;
	font-weight: bold; 
	}
a:visited{
	font-size: 120%;
	color:red;
	font-weight: bold; 
	}
 #footer{
	 position : fixed;
	bottom: 0px;
	 width: 100%;
	 height: 25px;
	background:#CCC;
	text-align: center;
	 z-index: 5;
	 }
	 .footer_symbole{
	height: 21px;
	width: 21px;
}
}
/** Bildschirmbreiten ab 321Pixel bis 360Pixel**/
@media only screen and (min-width: 321px) {
	
body {
	font-size: 1.0em;
    background-image: url("HLogo320.jpg");
    background-repeat: no-repeat;
    background-position: center  top:40px;
	background-size: contain; 
	height: 100vh;
    background-attachment:fixed;
}
#header{
	top: 0px;
	text-align: center;
	background:#BBB;
	width:100%;
	font-family: 'BankGothicMdBT','Arial';
	font-weight: bold; 
	font-style: italic;
	font-size: 150%;
	position : fixed;
	z-index: 4;
	}
#article{
	top:30px;
	bootom: 30px;
	margin-left:2px;
	margin-right:2px;
	position : relative;
	z-index: 1;
	}
a.meldung{
 display:block;
 padding:0.3em 0.3em;
 width: 100%;
 border:  1px solid black;
 border-radius:0.3em;
 margin:0 0.3em 0.5em 0;
 box-sizing: border-box;
 text-decoration:none;
 font-family:'Roboto',sans-serif;
 text-align:center;
 transition: all 0.2s;
}
a.meldung:link{
	font-family:'Roboto',sans-serif;
	font-size: 100%;
	color:grey;
	}
a.meldung:visited{
	font-family:'Roboto',sans-serif;
	font-size: 100%;
	color:green;
	}
 a.button{
 display:block;
 padding:0.3em 0.3em;
 width: 160px;
 border:  1px solid black;
 border-radius:0.3em;
 margin:0 0.3em 0.3em 0;
 box-sizing: border-box;
 text-decoration:none;
 font-family:'Roboto',sans-serif;
 text-align:center;
 transition: all 0.2s;
}

.bild{
	height: 30px;
	width: 30px;
}
a:link{
	font-size: 130%;
	color:grey;
	font-weight: bold; 
	}
a:visited{
	font-size: 130%;
	color:red;
	font-weight: bold; 
	}
#footer{
	position : fixed;
	bottom: 0px;
	width: 100%;
	 height:30px;
	background:#CCC;
	text-align: center;
	z-index: 5;
	}
	.footer_symbole{
	height: 26px;
	width: 26px;
}
}
/** Bildschirmbreiten ab 361Pixel bis 480Pixel **/
@media only screen and (min-width: 361px) {
	
body {
	font-size: 1.1em;
    background-image: url("HLogo320.jpg");
    background-repeat: no-repeat;
    background-position: center  top:40px;
	background-size: contain; 
	height: 100vh;
    background-attachment:fixed;
}
#header{
	top: 0px;
	text-align: center;
	background:#BBB;
	width:100%;
	font-family: 'BankGothicMdBT','Arial';
	font-weight: bold; 
	font-style: italic;
	font-size: 140%;
	position : fixed;
	z-index: 4;
	}
#article{
	top:40px;
	bottom: 40px;
	margin-left:2px;
	margin-right:2px;
	position : relative;
	z-index: 1;
	}
a.meldung{
 display:block;
 padding:0.3em 0.3em;
 width: 100%;
 border:  1px solid black;
 border-radius:0.3em;
 margin:0 0.3em 0.5em 0;
 box-sizing: border-box;
 text-decoration:none;
 font-family:'Roboto',sans-serif;
 text-align:center;
 transition: all 0.2s;
}
a.meldung:link{
	font-family:'Roboto',sans-serif;
	font-size: 100%;
	color:grey;
	}
a.meldung:visited{
	font-family:'Roboto',sans-serif;
	font-size: 100%;
	color:green;
	}
 a.button{
 display:block;
 padding:0.3em 0.3em;
 width: 180px;
 border:  1px solid black;
 border-radius:0.3em;
 margin:0 0.3em 0.3em 0;
 box-sizing: border-box;
 text-decoration:none;
 font-family:'Roboto',sans-serif;
 text-align:center;
 transition: all 0.2s;
}

.bild{
	height: 35px;
	width: 35px;
}
a:link{
	font-size: 120%;
	color:grey;
	font-weight: bold; 
	}
a:visited{
	font-size: 120%;
	color:red;
	font-weight: bold; 
	}
#footer{
	position : fixed;
	bottom: 0px;
	width:100%;
	 height:35px;
	background:#CCC;
	text-align: center;
	z-index: 5;
	}
	.footer_symbole{
	height: 31px;
	width: 31px;
}
}
/** Bildschirmbreiten ab 481Pixel bis 960Pixel **/
@media only screen and (min-width: 481px ) {
	
body {font-size: 1.3em;
	top: 50px;
    background-image: url("HLogo480.jpg");
    background-repeat: no-repeat;
    background-position: center  top;
	background-size: contain; 
	height: 100vh;
    background-attachment:fixed;
}

#header{
	top: 0px;
	text-align: center;
	width:100%;
	background:#CCC;
	font-family: 'BankGothicMdBT','Arial';
	font-weight: bold; 
	font-style: italic;
	font-size: 180%;

	position : fixed;
	z-index: 4;
	}
#article{
	top: 50px;
	bottom: 50px;
	margin-left:4px;
	margin-right:4px;
	position : relative;
	z-index: 1;
	}
a.meldung{
 display:block;
 padding:0.3em 0.3em;
 width: 100%;
 border:  1px solid black;
 border-radius:0.3em;
 margin:0 0.3em 0.5em 0;
 box-sizing: border-box;
 text-decoration:none;
 font-family:'Roboto',sans-serif;
 text-align:center;
 transition: all 0.2s;
}
a.meldung:link{
	font-family:'Roboto',sans-serif;
	font-size: 100%;
	color:grey;
	}
a.meldung:visited{
	font-family:'Roboto',sans-serif;
	font-size: 100%;
	color:green;
	}
a.button{
 display:block;
 padding:0.3em 0.3em;
 width: 250px;
 border:  1px solid black;
 border-radius:0.3em;
 margin:0 0.3em 0.5em 0;
 box-sizing: border-box;
 text-decoration:none;
 font-family:'Roboto',sans-serif;
 text-align:center;
 transition: all 0.2s;
}

.bild{
	height: 50px;
	width: 50px;
}
a:link{
	font-size: 170%;
	color:grey;
	font-weight: bold; 
	}
a:visited{
	font-size: 170%;
	color:red;
	font-weight: bold; 
	}
 #footer{
	position : fixed;
	bottom: 0px;
	 width:100%;
	 height:50px;
	 background:#CCC;
	 text-align: center;
	 z-index: 5;
	 }
	 .footer_symbole{
	height: 46px;
	width: 46px;
}
}
/** Bildschirmbreiten ab 961Pixel **/
@media only screen and (min-width: 961px ) {
	
body {font-size: 1.4em;
	top: 50px;
    background-image: url("HLogo480.jpg");
    background-repeat: no-repeat;
    background-position: center  top;
	background-size: contain; 
	height: 100vh;
    background-attachment:fixed;
}

#header{
	top: 0px;
	text-align: center;
	width:100%;
	background:#CCC;
	font-family: 'BankGothicMdBT','Arial';
	font-weight: bold; 
	font-style: italic;
	font-size: 240%;

	position : fixed;
	z-index: 4;
	}
#article{
	top: 50px;
	bottom: 60px;
	margin-left:4px;
	margin-right:4px;
	position : relative;
	z-index: 1;
	}
a.meldung{
 display:block;
 padding:0.3em 0.3em;
 width: 90%;
 border:  1px solid black;
 border-radius:0.3em;
 margin:0 0.3em 0.5em 0;
 box-sizing: border-box;
 text-decoration:none;
 font-family:'Roboto',sans-serif;
 text-align:center;
 transition: all 0.2s;
}
a.meldung:link{
	font-family:'Roboto',sans-serif;
	font-size: 100%;
	color:grey;
	}
a.meldung:visited{
	font-family:'Roboto',sans-serif;
	font-size: 100%;
	color:green;
	}
a.button{
 display:block;
 padding:0.3em 0.3em;
 width: 300px;
 border:  1px solid black;
 border-radius:0.3em;
 margin:0 0.3em 0.5em 0;
 box-sizing: border-box;
 text-decoration:none;
 font-family:'Roboto',sans-serif;
 text-align:center;
 transition: all 0.2s;
}

.bild{
	height: 60px;
	width: 60px;
}
a:link{
	font-size: 200%;
	color:grey;
	font-weight: bold; 
	}
a:visited{
	font-size: 200%;
	color:red;
	font-weight: bold; 
	}
 #footer{
	 position : fixed;
	bottom: 0px;
	 width:100%;
	 height:60px;
	 background:#CCC;
	 text-align: center;
	 z-index: 5;
	 }
	 .footer_symbole{
	height: 56px;
	width: 56px;
	}
}