/* basics */
@viewport{
    zoom: 1.0;
    width: extend-to-zoom;
}

body {
	  background: #888888;
	  padding: 0 5%;
	  font-family: Verdana, Arial, Helvetica , Sans-serif; 
	  font-weight: normal;
	  color: WhiteSmoke;	
}
body:before { font-size: 150%; background:#ff3333; content: 'Ihr Browser ist veraltet und kann nicht das nicht das vorgesehene Layout anzeigen. Bitte aktualisieren Sie Ihren Browser!'; 
 
}
@supports (display:grid) {
    body { background: #888888;}
    body:before { background:#888888; content:''; }
}


h1 {
  margin: 0 0 30 0 ; 
  font-size: 1.5em;  
}


h2 {
  margin: 0; 
  font-size: 1.2em;  
  font-weight: normal;
  text-align: center;
  letter-spacing: 0.3em;
  padding: 0.5em;
  
}

h8 {
  font-size: 0.75em;  
  font-weight: normal;
  text-align: left;
}

p {
   font-size: 0.95em;
   font-weight: normal;
}

a {
	text-decoration: none;
}

a:hover {
  text-decoration: none;
}

/* Navigation */ 
nav {
	display:block;
	height:2.5em;
	background:#d0d0d0;
	text-align:center;
	border-bottom: 0.188em solid #aa0000;
}


nav ul {
	display:block;
}



nav ul li {
	display:inline;
	margin:0em 0.188em 0em 0.188em;
}
nav ul li a {
	color:#454040;
	font-size: 1.0em;          /*1.125  das ist ohne Veröffentlichung*/
	line-height:2.5em;
	padding: 0.175em; 
	margin: 0 0.3em 0 0.3em;
	transition:background 0.2s;
	-webkit-transition:background 0.2s;
}


nav ul li a:hover {
	border-top: 0.0625em solid #aa0000;          /*     #FF9900;   */
}
nav ul li a.active {
	color: #aa0000;
}

ul {
	margin:0px;
	padding:0px;
}

li {
	list-style:square;
	font-weight:100;
	color:#2F2D2C;
	line-height:1.25em;
	margin:0em;
	padding:0em;
	margin:0.313em 0em 0.313em 0em;
}

img {
	width:90%;
	height:auto;
	max-width:100%;
	background: #FFFFFF;
	display:block; 
}



/* On Top Bar */
#menubar {
	display:block;
	background:#d0d0d0;
} 
#menubar ul {
	display:block;
	width:2em;
	padding:0.9em;
}
#menubar ul li {
	display:inline;
}
#menubar ul li a.menubutton {
	display:none;
}


.linkzurueck  {
  background: #888888;
  color: WhiteSmoke;
  font-size: 0.95em;
}

.linkzurueck a {
  background: #888888;
  color: WhiteSmoke;
  font-size: 0.95em;
}

.linkzurueck a:hover {
  border-bottom: 0.0625em solid #aa0000;
  padding-bottom: 0.375em;
}

/* panels */
.panel {   
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  box-shadow: 0 0px 0px 1px #2B2B2B;
}

.panelplatzhalter {   
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

.textp1 {
	color: #2B2B2B;	
	z-index: 3;
    background-color:  WhiteSmoke;
	box-shadow: none;
	text-align: center;
	border-bottom: 1px solid #2B2B2B;
	
}

.textp2 {
	color: WhiteSmoke;	
	z-index: 3;
    background-color:  #2B2B2B;
	box-shadow: none;
	text-align: center;
	border-bottom: 1px solid #2B2B2B;
	
}

.textp3 {
	color: #2B2B2B;	
	z-index: 3;
    background-color: #d0d0d0;
	box-shadow: none;
	text-align: center;
}

/* individual panels */


.panel-title {
     box-shadow: none; 
}


.panel-copyright {
  box-shadow: none;
  line-height:2.3em;
  padding-top: 0.5em;  
  display:block;
  color: WhiteSmoke;
  text-align:center;
  border-top: 0.0625em solid WhiteSmoke; 
  
}

.panel-copyright ul {
	display:block;
	width:100%;
	max-width:980px;
	text-align:right;
	margin:0px auto;
}

.panel-copyright ul li {
	display:inline;
	font-size:0.8em;
	line-height:1.8em;
	color:WhiteSmoke;
	
}

.panel-copyright a {
  background: gray;  
  color: WhiteSmoke;
}

.panel-copyright a:hover {	
  	padding-top: 0.275em;
  	border-top: 0.0625em solid #aa0000; 
}




/* media query 1 */

@media only screen and (min-width: 500px) {
		
  
}


@media screen and (max-width:768px) {
	

	body {
	    padding: 0 2%;
		font-size:90%;
	}
	#menubar ul li a.menubutton {
		display:block;
		background-image: none;
	}	
	nav {
		display:none;
		height:auto;
	}
	nav ul li {
		display:block;
		margin:0.3em 0em 0.3em 0em;
	}
}


/* media query 2 */
@media only screen and (min-width: 768px) {	
  
  
  	nav.nav {
		display:block !important;
	}
 
 	nav ul li {
		font-size: 1.0em;
	}
    
  
   .panel-copyright {
      font-size: 0.75em;
    }
}




@media screen and (max-width:895px) {	

	body {
		font-size:90%;
		padding: 0 6%;
	}
	#menubar ul li a.menubutton {
		display:block;
		background-image: none;
	}	
	nav {
		display:none;
		height:auto;
	}
	nav ul li {
		display:block;
		margin:0.3em 0em 0.3em 0em;
		font-size: 1.175em;
	}
	
	
	h1 {
       font-size: 1.5em;
    }
  
    h2 {
       font-size: 1.0em;
       font-weight: 500;
    }
     
    p {
      font-size: 1.05em;
    }
  
    nav {
        font-size: 0.95em;
    }	
	
}

@media screen and (max-width:970px) and (min-width:880)

{
	body {
	    padding: 0 0;
		font-size:80%;	
	
}

@media only screen and (max-width: 1129px) and (min-width: 895px) 
{

   body {
	    padding: 0 4%;
	    } 	

	nav {
		font-size: 0.95em;
	    }
	    
	
}


/* media query 3 */
@media only screen and (min-width: 1130px) {
	 
  body {
	    padding: 0 5%;
	    } 
  
  h1 {
    font-size: 1.5em;
  }
  
  h2 {
    font-size: 1.125em;
    font-weight: 500;
  }
  
  p {
    font-size: 1.25em;
  }
  
   nav {
   font-size: 1.5em;
  }
  
  .panel-copyright {
    font-size: 0.75em;
  } 
}

/* media query 4 */
@media only screen and (min-width: 1280px) {
 
   
  body {
	    padding: 0 10%;
	    }
  
 
  h1 {
    font-size: 1.85em;
  }
  
  h2 {
    font-size: 1.5em;
  }
  
   p {
    font-size: 1.125em;
  }
  
  nav {
   font-size: 1.5em;
  }
  
  
  .panel-copyright {
    font-size: 0.75em;
  }  
  
}

/* media query 5 */
@media only screen and (min-width: 1360px) {
	
	body {	    
	     width: 1360px;
	    }
	
}