/*---------------- alles kleiner als Desktop 980px------  */

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


body {
margin : 0 2%;
width : 96%;
}

#kopf {
}

#kopfzeile {
position : relative;
top: 0;
right: 0;
}

#kopfzeile div {
}

#logo {
position:absolute;
top: 98px;
right:0;
padding:0;
}

iframe {
width: 100%;
}

.startboxtext {
float:left;
width: 70%;
padding-right:0;
display:inline-block;
}


a .startboxtext {
margin-right:-200px;
margin-left: -98px;
padding-right: 0;
padding-left: 98px;
width: 70%;
}


.startpic {
width: 30%;
float:left;
}

#inhaltsbox.norm {
margin: 24px 0;
padding:0;
width: 96%;
padding-top : 24px;
padding-right: 2%;
padding-bottom: 24px;
padding-left : 2%;
}

#inhaltsbox.minibox {
margin: -12px 0;
padding:0;
width: 96%;
padding-top : 24px;
padding-right: 2%;
padding-bottom: 24px;
padding-left : 2%;
}

.textre img, #inhaltsbox.minibox img, #inhaltsbox.norm img {
width: 100%;
height: auto;
}

#inhaltsbox.minibox img.klein {
width: auto;
height: auto;
}

#inhaltsbox.minibox .standardre {
margin-bottom: 2em;
}

#inhaltsbox.minibox img.buts {
width: 60px;
height: 61px;
}


#inhalt h3 {
padding-left: 0;
}


.subnavi {
position: relative;
left: 0;
top: 0;
padding-left:0;
margin-left:0;
}

.zurueck a:link, .zurueck a:visited, .zurueck a:hover, .zurueck a:focus, .zurueck a:active {
position: relative;
left: 0;
top: 0;
}
#seit {
background-image: none;
}
#seit ul {
position: absolute; 
left:0;
}
#isofuss img {
margin-left:30px;
position: absolute;
left:0;
}

#fusshg #info {
display:none;
}

#aktuelles .bildbox img {
width: auto;
height: auto;
}
#inhaltsbox img#nozoom2 {
width: 80px;
height: auto;
}
img.nozoom {
  width: auto!important;
  padding:5px;
  padding-bottom:0;
}


}


/*---------------- alles kleiner als Desktop800px------  */

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

#rahmen {
background-image : url(../img/header.jpg);
background-repeat : no-repeat;
background-position : -200px 0px;
}

.butset a{
float:left;
width: 50%;
}


#inhaltsbox img#nozoom {
width: 150px;
height: auto;
}

/* The NO pop */

nav#menu.menu {
position: absolute;
top:0;
left:0;
display: block;
z-index: 1000;
background-color: #be000e;
background-color: #F31E15;
height: auto;
width: 100%;
}

#menu ul li ul li {
width:100%!important;
}

nav#menu.menu ul li ul li ul li {
  display:none;

}

nav#menu.menu ul li.category {
height: auto;
}

nav#menu.menu ul li ul {
	position: relative;
	top:0;
	}



nav#menu.menu ul li ul li a:link,
nav#menu.menu ul li ul li a:visited,
nav#menu.menu ul li ul li a:hover,
nav#menu.menu ul li ul li a:focus,
nav#menu.menu ul li ul li a:active{
opacity: 1.0;
background-color: #be000e;
background-color: #F31E15;
border-bottom:0;
margin-bottom: 10px;

}





/*responsive menu*/

a.menu-link {
position: absolute;
top: 160px;
right:0;
margin-right: 20px;
z-index:9000;
		content:"";
		display: block;
		color: #fff;
	background-image: url(../img/mobile-icon.png);
		width: 40px;
		height: 40px;
}

.menu {
padding-top:0;
clear: both;
min-width: inherit;
float: none;
}
	
.menu {
overflow: hidden;
max-height: 0;
}
	
	.menu.active, .menu > ul ul.active {
		max-height: 85em;
	}
	.menu ul {
		display: block;
	}
	.menu > ul {
	}

.menu li, .menu > ul > li {
		display: block;

	}

.menu li a {
color: #fff;
display: block;
height: 36px;
position: relative;

}

.menu li.has-submenu > a:after {
content: '+';
		position: absolute;
		top: 0;
		right: 0;
		display: block;
		font-size: 1.5em;
		padding: 0.55em 0.5em;
	}

	.menu li.has-submenu > a.active:after {
		content: "-";
	}

	.menu ul ul > li a {
		background-color: #c40009;
		height:30px;
		padding: 0;
	}

	.menu ul ul, .menu ul ul ul {
		display: inherit;
		position: relative;
		left: auto; top:auto;
		box-shadow: none; 
		border:none;
	}





/*responsive menu ende*/

#menu li li, #menu li:hover ul li, 
#menu li:focus ul li, 
#menu li:active ul li {
display:block;
position: relative;
top: -20px;
}




nav#menu.menu ul li  {
display:block;
width: 100%;
text-align: left;
height: 36px;
font-weight: bold;
}

.menu ul li ul {
width: 100%;
height: auto;
overflow: visible;

	}
nav#menu.menu li.category a:link,
nav#menu.menu li.category a:visited,
nav#menu.menu li.category a:hover,
nav#menu.menu li.category a:focus,
nav#menu.menu li.category a:active{
margin:0;
display:block;
width: auto;
height: 36px;
padding:10px;
color: #fff;
}

nav#menu.menu li.category a:hover,
nav#menu.menu li.category a:focus,
nav#menu.menu li.category a:active {
background: white;
color: black;
}


.category a #rot {
color: #fff;
}


.category a:hover #rot {
color: black;
}

/*
#menu .menu ul {
height: auto;
float:none;
clear:both;
display:inline;
width: 100px;
}
*/
#menu.menu li.category li  {
border-left:none;
font-weight: normal;
}




#menu li.category.aktiv li.aktiv a:link,
#menu li.category.aktiv li.aktiv a:visited,
#menu li.category.aktiv li.aktiv a:hover,
#menu li.category.aktiv li.aktiv a:focus,
#menu li.category.aktiv li.aktiv a:active{
background-color: #fff;
color: black;
}

.startboxtext h2 {
font-size: 1.3em;
padding-right: 20px;
}
.textli {
width: 100%;
}
.textre {
margin:0;
width: 100%;
}



}

/*-------- alles kleiner als tablet 640px------  */

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

#fussboxli, #fussboxre,
.standardli, .standardre,
.textli, .textre {
width: 100%;
}

#logos {
font-size: 1.3em;
}

#fussboxre, .standardre, .textre {
margin:0;

}

#inhaltsbox img#nozoom, #petit {
display:none;
}
.links {
 width: 100px;
      padding-top:40px;
}
.rechts {
      margin-left: 70px;
      }
h6 {
          padding-left:0;
        margin-left: 0;
        }
#starter h6 {
  margin-left: 0;
}
          
}

/*-------- alles kleiner als mobile 480px------  */

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


#logo
{
  position: absolute;
  top: 16px;
  left: 0;
float:left;
padding-right: 80px;
display: inline-block;
width:170px;
}

#logos {
text-align: left;
width:170px;
}

#rahmen {
background-position : -217px 0px;
background-image : url(../img/header-ohneline.jpg);
background-repeat : no-repeat;
background-position : top center;
}

.startboxtext h2 {
margin-top: -20px;
width: 100%;
}
.box1, .box2, .box3, .box4 {
min-height: 190px;
}

#logos {
font-size: 1.3em;
}

#slogan
{
  position: absolute;
  left:0px;
}

#inhalt h3 {
padding-left: 0;
}

.startbox {
clear:both;
border-top: solid 1px #000;
}
#inhalt .startbox .startpic img {
display:block;
clear:both;
}
.startpic {
display:none;
}

.startboxtext {
display: block;
padding-top: 0.5em;
padding-left:0;
clear:both;
width: 90%;
height: 150px;
}

.startboxtext h2 {
border-bottom: 0;
}

#metanavi ul {
padding-right: 1%;
}

#metanavi ul li {
padding-right: 0;
margin-left: 5px;
}

nav#menu.menu ul {
padding-left:0;
}



*  ----------------------------------
Formulare
---------------------------------------*/
textarea {
width: 100%;
}

input { 
width: 100%;
}
label {
display: block;
}
.button, .submit { 
width:100%;
}

#EmailForm fieldset, 
#shareForm fieldset,
#UnterzeichnenForm fieldset {
width: 100%;
}


#EmailForm .text, 
#shareForm .text,
#UnterzeichnenForm .text {
width:100%;
}

#EmailForm #cfMessage, 
#shareForm #cfMessage,
#UnterzeichnenForm #cFMessage {
width: 100%;
}

#aktuelles .bildbox img {
width: 250px;
height: auto;
display: block;
float: none;
}

}


/*-------- alles kleiner als mobile 420px------  */

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

#rahmen {
    overflow:hidden;
  }


#fuss ul {
padding-top: 0;
margin-bottom: 0;
margin-left: 0;
}

#fuss li {
display: block;
color: #fff;
padding-right: 0;
padding-left: 0;
padding-bottom: 0.5em;
border-right:0;
}



.box1, .box2, .box3, .box4 {
min-height: 210px;
}
.butset a{
float:left;
width: 100%;
}

#hoch {
position: relative;
top: -102px;
left: 0;
}
#fusshg p{
padding-top: 2em;
}

.signer .Stadt {
width: 75%;
}



}