h3 {color: #97B647; sans-serif; font-size: 16px; font-weight: bold; line-height: 40px; margin: 0 0 0px; }
.wrap {}

.box {

float: left;text-align: left; height:750px;

     width: 32%;border: 1px solid #6F6F6F;border-radius: 4px;margin: 5px  5px 0px 0px;
font: 12px/1.1em "open sans",sans-serif;
     padding: 5px;

     background: #eee;

     box-sizing: border-box;

}
.picto { width: 95%; height: 30px; line-height: 100%; float: left; clear: left;}
.picto img {margin:5px; margin-right: 5em;}
.box p {text-align:left;line-height: 1.2;}
.box img {float:left; margin:1px;width:220px;height:150px;}
.angebot {

text-align: center; height:380px;
border: 1px solid #6F6F6F;border-radius: 4px;margin: 5px; margin-left:5px;
font: 12px/1.3em "open sans",sans-serif;
     padding: 5px;

     background: url('angebothinter.jpg') no-repeat 0px 0px;

     box-sizing: border-box;

}
.angebot img {width:70%;}
.tip {
color: #fff;
text-align: left; height:380px;
border: 1px solid #6F6F6F;border-radius: 4px;margin: 5px; margin-left:5px;
font: 12px/1.3em "open sans",sans-serif;
     padding: 5px;

     background-color: #428BCA;

     box-sizing: border-box;

}
.tip img {width:70%; border: 2px solid #fff;}
.formcaption {
        width: 80px;

        float: left;
        clear: left;
}
.scrollToTop{

        width:100px;

        height:130px;

        padding:10px;

        text-align:center;

        background: whiteSmoke;

        font-weight: bold;

        

        text-decoration: none;

        position:fixed;

        top:600px;

        right:40px;

        display:none;

        background: url('arrow_up.png') no-repeat 0px 20px;

}

.scrollToTop:hover{

        text-decoration:none;

}

body {
        background: #FFFFFF;


        color: #4F4F4F;
        margin: 0;
        padding: 0;

        font-family: 'Open Sans', sans-serif;
        }

a {
        color: #003080;
}

p {
        text-align: center;
}
.site-title {
  position: relative; top:30px; }
  .site-title h1 {
    border-top: 6px solid #3a3261;
    font-family: "ff-dax-compact-web-pro-1","ff-dax-compact-web-pro-2";

 font-size: 10px;
    margin-top: 0;
    margin-bottom: 0px;

    padding: 7px 0 0;
    background: none;
    display: inline-block;
    color: #3a3261;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-rendering: optimizeLegibility; }
    .site-title h1 a {
      color: #3a3261;
      text-decoration: none; }
  .site-title h2 {
    font-size: 1em;
    margin-bottom: 5%;
    font-weight: 100; }

.container {
  margin: -9px auto 0;
  max-width: 1080px;
  padding: 0 5%; }

  #content {
  margin: 5% auto;
  overflow: hidden; }
  #content h1, #content h2 {
    margin-bottom: .5em; }
	  #content h1{
    line-height: 1.2; font-size: 1em;}
  #content h2 {
    font-size: 1.6em;
    color: #4F4F4F }
  #content ul {
    margin: 1em;
    list-style-type: circle; }
  #content li {
    font-size: 1em;
    margin-bottom: .4em;
    margin-left: .76em;
    font-weight: 300; }

    .block {
  margin-bottom: 1.5em;
  padding-bottom: 1.5em;
  border-bottom: 2px dashed #bbb; }
  .block:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0; }

  .article-wrap {
  padding: 0;
  overflow: hidden; }

  #site-footer {
  overflow: hidden;
  clear: both;
  background: rgba(0, 0, 0, 0.075);
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  padding: 1em 0;
  box-shadow: inset 0 3px 3px rgba(0, 0, 0, 0.05);
  width: 100%; }
  #site-footer .container {
    margin-top: 0; }
	
	
	
	
	@media screen and (max-width: 1270px) 	{
	.box {width: 30%; height:780px;display: inline-block;}
	.box img {float:left; margin:5px;width:180px;}
	}

	@media screen and (max-width: 1170px) 	{
	.box {width: 45%; height:750px;display: inline-block;}
	.box img {float:left; margin:5px;width:200px;}
	}
	
	@media screen and (max-width: 1070px) 	{
	.box {width: 49%; height:750px;display: inline-block;}
	.box img {float:left; margin:5px;width:240px;}
	.angebot {height:480px;}
	.angebot img {width:80px;}
	}
@media screen and (max-width: 840px) {
.block {text-align:right;display: inline-block;}
#content{padding-top:15px;}
.box {width: 49%; height: 100%; padding: 20px; background: #eee; display: inline-block; box-sizing: border-box;}
.box img {float:left; margin:5px;width:170px;}
#layer {height:185px;}
}
#wrapper {height:310px; overflow:auto;}

@media screen and (max-width: 640px) {
article {float:left;width: 99%;}
.box {width: 99%; height: 100%; display: inline-block; padding-bottom: 100px; background: #eee; box-sizing: border-box;}
	.box img {float:left; margin:5px;width:100%;height: 100%;}
	.picto {background: #fff;height:50px;}
	#wrapper {height:250px;width:100%;}
.article-wrap {display:none;}
  #layer {display:none;}
   #layerstart {display:none;}
#content{padding-top:115px;width:120%;}

#kastengoodie {position: absolute; top: 20px; left:100px; }
#thumbkasten {width: 100%;height: 180px;position: relative}
#content article:first-child{width: 99%;float:left;padding-right: 1%;}
}

 @media screen and (max-width: 640px) {
	.bilderwechsler {top:10px;float:left;height: 300px;}
 
}  

  .site-title h1 {
    font-size: 14px; }
  .site-title h2 {
    font-size: 1.2em;
    margin-bottom: 50px; }

  #content article:first-child {
  
    width: 78%;
   border: 1px solid rgba(0,0,0,.1);margin: 10px;padding:10px;
  border-radius: 15px; box-sizing: border-box; transition: all .3s; box-shadow: 2px 2px 20px rgba(0,0,0,.2);}
    #content article:first-child .block {
      padding-right: 6%; }
  #content article:nth-child(2) {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 20%;
    margin-right: 0; }
    #content article:nth-child(2) .block {
      padding-left: 5%; }
  #content p {
    font-size: 1.1em; }

  #content h2 {
    font-size: 1.9em; }
  #content article {
    width: 50%;
    float: left;
    overflow: hidden; }
  #content li {
    font-size: 1.1em; }

}




 .sqrforml {


  width: 20%;

  float: left;

  display: block;
clear:both;
}


 .sqrformr {

padding-left: 140px;


  display: block;


}




.block {font: 12px/1.1em "open sans",sans-serif;}
.block a {text-decoration: none;}
#container h3 {
    color: #3a3261;

 }

#parent{

  position: relative; clear:both;width: 100%; 

}

#layer { z-index: 2; width: 28%;max-width: 100%;
background-color:rgba(255, 255, 255, 0.75);
    padding:20px;   
  height: 250px;    overflow:auto;
    font-size: 12px;font-weight:bold; line-height: 120%;
        text-align: left;
        color: #4F4F4F;

  position: absolute;top:20px; right:15px;}
 

/*@media screen and (max-width: 1140px) {
#parent {height:275px;}
#layer {height:210px;}
}
@media screen and (max-width: 1040px) {
#parent {height:255px;}
#layer {height:190px;}
} 
@media screen and (max-width: 940px) {
#parent {height:235px;}
#layer {height:170px;}
}
@media screen and (max-width: 840px) {
#parent {height:155px;}
#layer {height:130px;}
}  */
  
  #layer h2 {color: #428BCA;font-family: 'Source Sans Pro', sans-serif; font-size: 28px; font-weight: 400; line-height: 32px; margin: 0 0 24px;}
  
  
#layerstart { z-index: 2; width: 28%;max-width: 100%;

        height: auto;

  height: 90%;    
  position: absolute;top:0px; }

.sortierfunk {

       position: relative;

        min-height: 1px;      box-sizing: border-box;

        margin: 5px;



}



button{   border-color: #357ebd;
background-color: #428bca;
    color: #ffffff; -moz-user-select: none;

    background-image: none;

    border: 1px solid transparent;

    border-radius: 4px;

    cursor: pointer;

    display: inline-block;

    font-size: 14px;

    font-weight: normal;

    line-height: 1.42857;

    margin-bottom: 10px;

    padding: 3px 6px;

    text-align: center;

    vertical-align: middle;

    white-space: nowrap; position:relative; bottom: 5px;}
		
.button {background-color: #428bca;float: right !important;
position: relative; top:132px;
    border-color: #357ebd;

    color: #ffffff; -moz-user-select: none;

    background-image: none;

    border: 1px solid transparent;

    border-radius: 4px;

    cursor: pointer;

    display: inline-block;

    font-size: 14px;

    font-weight: normal;

    line-height: 1.42857;

    margin-bottom: 0px;

    padding: 6px 12px;

    text-align: center;

    vertical-align: middle;

    white-space: nowrap; position:relative; bottom: 5px;}

.weiter {background-color: #428bca;border-color: #357ebd;
position: relative; right:20px;
    color: #ffffff; -moz-user-select: none;


    border: 1px solid transparent;

    border-radius: 4px;

    cursor: pointer;

    display: inline-block;

    font-size: 14px;

    font-weight: normal;

    line-height: 1.42857;

    margin-bottom: 0px;

    padding: 6px 12px;

    text-align: center;

    vertical-align: middle;

    white-space: nowrap; }
#thumbkasten {float:right;width: 300px;height: 180px;position: relative}
#kastennummer {position: absolute; bottom: 0px; right: 0px;font-weight:bold;}
#kastengoodie {position: absolute; top: -20px; left: 0px;}

/*****Das Fenster für die Sortierfunktionen****/
.fenster {
position: fixed;
top: 25%;
margin-top:38px;
left: 0;
display: none;
background: #FFFFFF;
font-size: 16px;
border: 1px solid #428BCA;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
-moz-border-radius-topright: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-bottomright: 10px;
-webkit-border-bottom-right-radius: 10px;
width: 95%;
height: auto;
padding: 10px 30px 10px 30px;
z-index: 300;
}
.fenster h3 {
font-size: 20px;
color: #5F5F5F;
font-weight: bold;
}
.fenster p {
color: #5F5F5F;
font-weight: bold;
}
.fenstersuchen {
position: fixed;
top: 25%;
margin-top:38px;
left: 0;
display: none;
background: #FFFFFF;
font-size: 16px;
border: 1px solid #428BCA;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
-moz-border-radius-topright: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-bottomright: 10px;
-webkit-border-bottom-right-radius: 10px;
width: 95%;
height: auto;
padding: 10px 30px 10px 30px;
z-index: 300;
}
.fenstersuchen h3 {
font-size: 20px;
color: #5F5F5F;
font-weight: bold;
}
.fenstersuchen p {
color: #5F5F5F;
font-weight: bold;
}
.fensterschmal {
position: absolute;

margin-top:45px;
margin-left: 5px;
display: none;
background: #FFFFFF;
font-size: 16px;
border: 1px solid #428BCA;
border-radius: 4px;
width: 150px;
height: auto;
padding: 10px 30px 10px 30px;
z-index: 400;
}
/***************** Der Knopf *******************/
a.knopf {
position: fixed;
text-decoration: none;
top: 45%;
left: -20px;
font-size: 16px;
font-weight: bold;
line-height: 22px;
letter-spacing:-1px;
font-family: verdana, helvetica, arial, sans-serif;
color:#fff;
padding: 8px 10px 8px 30px;
background:#428BCA;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
-moz-border-radius-topright: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-bottomright: 10px;
-webkit-border-bottom-right-radius: 10px;
display: block;
z-index: 300;
cursor: pointer;
transition: all 0.2s ease;
}
a.knopfschmal {
position: relative;
text-decoration: none;
top: 45%;
left: 20px;
font-size: 16px;
font-weight: bold;
line-height: 22px;
letter-spacing:-1px;
font-family: verdana, helvetica, arial, sans-serif;
color:#fff;
padding: 8px 10px 8px 30px;
background:#428BCA;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
-moz-border-radius-topright: 10px;
-webkit-border-top-left-radius: 10px;
-moz-border-radius-bottomrleft: 10px;
-webkit-border-bottom-left-radius: 10px;
display: block;
z-index: 300;
cursor: pointer;
transition: all 0.2s ease;
}
a.knopfschmal::before {
content: 'sortierenschmal';
padding: 0 5px 0 0;
}
a.knopfschmal::after {
content: ">";
font-size: 18px;
}
a.active.knopfschmal {
right: 0;
}
a.active.knopfschmal::before {
content: 'CLOSE';
right: 10px;
}
a.active.knopfschmal::after {
content: ">";
font-size: 18px;
}
/***************** Der Knopf *******************/
a.knopfsuchen {
position: fixed;
text-decoration: none;
top: 45%;
right: 20px;
font-size: 16px;
font-weight: bold;
line-height: 22px;
letter-spacing:-1px;
font-family: verdana, helvetica, arial, sans-serif;
color:#fff;
padding: 8px 10px 8px 30px;
background:#428BCA;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
-moz-border-radius-topright: 10px;
-webkit-border-top-left-radius: 10px;
-moz-border-radius-bottomrleft: 10px;
-webkit-border-bottom-left-radius: 10px;
display: block;
z-index: 300;
cursor: pointer;
transition: all 0.2s ease;
}
/*****************  Knopf geschlossen *******************/
a.knopf::before {
content: 'sortieren';
padding: 0 5px 0 0;
}
a.knopf::after {
content: ">";
font-size: 18px;
}
 a.knopfsuchen::before {
content: 'suchen';
padding: 0 5px 0 0;
}
a.knopfsuchen::after {
content: "<";
font-size: 18px;
}
/*****************  Knopf geöffnet *******************/
a.active.knopf {
left: 0;
}
a.active.knopf::before {
content: 'sortieren';
left: 10px;
}
a.active.knopf::after {
content: "<";
font-size: 18px;
}
a.active.knopfsuchen {
right: 0;
}
a.active.knopfsuchen::before {
content: 'CLOSE';
right: 10px;
}
a.active.knopfsuchen::after {
content: ">";
font-size: 18px;
}
/***************** MOBILE ANSICHT *******************/
@media (max-width: 996px) {
.fenster {
position: absolute;
top: 80px;
padding: 5px 5px 5px 15px;
width: 250px;
z-index: 22000;
 }
.fenster h3 {
margin-top: 0px;
}
a.knopf {
position: absolute;
top: 80px;
z-index: 22001;
    }}
 @media (max-width: 996px) {
.fenstersuchen {
position: absolute;
top: 80px;
padding: 5px 5px 5px 15px;
width: 250px;
z-index: 22000;
 }
.fenstersuchen h3 {
margin-top: 0px;
}
a.knopfsuchen {
position: absolute;
top: 80px;
z-index: 22001;
    }}

#formbox {background-color: #0f3150;
    margin-bottom: 10px;border-radius: 2px;border: 4px solid #87a4b9;
    padding: 5px 0 50px;
    position: relative;top:-1px;
    text-align: left;}
@media screen and (max-width: 1150px) {
#formbox {background-color: #454357;
    margin-bottom: 10px;
    padding: 15px 0 100px;
    position: relative; top:10px;
    text-align: left;}
} 
@media screen and (max-width: 800px) {
#formbox {background-color: #454357;
    margin-bottom: 10px;
 padding: 15px 0 140px;
    position: relative; top:10px;
    text-align: left;}
}  
@media screen and (max-width: 600px) {
#formbox {background-color: #0f3150; 
    margin-bottom: 10px;
    padding: 15px 0 200px;
    position: relative; top:-20px;
    text-align: left;}
	article { position: relative; top:-130px;}
.formkasten {
        float: left;position: relative;
        min-height: 1px;      box-sizing: border-box;
        margin: 5px;}
}   	
	
.formkasten {
        float: left;position: relative;
        min-height: 1px;      box-sizing: border-box;
        margin: 5px;

}
.ebox {background-color: #FFFFFF;

    margin-bottom: 10px;border-radius: 5px;border: 2px solid #DFDFDF;

    padding:  3px 5px;

    position: relative;

    text-align: left;}

form.textarea  {

        background-color: #bfbfbf;

        border : 1px solid #cdcdcd;

        width: 300px;

        height: 100px;

        vertical-align: top;

        padding: 1px;

        margin: 0px 0px 10px 0px;

}

form.formular .formfeld {

        width: 200px;

        line-height: 200%;

        float: left;

        clear: left;

}
form.formular.input.feld{

        width: 300px;

        vertical-align: top;

        padding: 1px;

        margin: 0px 0px 10px 0px;

        border : 1px solid #cdcdcd;

        color: #000000;

        font-size: 10px;

}
.suchbutton{   border-color: #357ebd;    position: relative; top:32px;
background-color: #428bca;
    color: #ffffff; -moz-user-select: none;

    background-image: none;

    border: 1px solid transparent;

    border-radius: 4px;

    cursor: pointer;

    display: inline-block;

    font-size: 14px;

    font-weight: normal;

    line-height: 1.42857;

    margin-bottom: 0px;

    padding: 3px 6px;

    text-align: center;

    vertical-align: middle;

    white-space: nowrap; position:relative; bottom: 5px;}
	

details {
  width: 100%;
  min-height: 5px;
  max-width: 1070px;
  padding: 45px 70px 45px 45px;
  margin: 0 auto;
  position: relative;
  font-size: 14px;
  border: 1px solid rgba(0,0,0,.1);
  border-radius: 15px;
  box-sizing: border-box;
  transition: all .3s;
}
 @media screen and (max-width: 640px) {
	details {padding: 5px 5px 5px 5px;}
 
} 

details + details {
  margin-top: 20px;
}

details[open] {
  min-height: 50px;
  background-color: #f6f7f8;
  box-shadow: 2px 2px 20px rgba(0,0,0,.2);
}

details p {
  color: #96999d;
  font-weight: 300;
}

summary {
  font-weight: 500;position:relative;color: #97B647; sans-serif; font-size: 24px; font-weight: 200; line-height: 40px; 
  cursor: pointer;width: 100%;
  padding: 20px;
 border: 1px solid rgba(0,0,0,.1);
  border-radius: 15px;
  box-sizing: border-box;
  transition: all .3s;   box-shadow: 2px 2px 20px rgba(0,0,0,.2);
}
@media screen and (max-width: 600px) {
summary {font-weight: 100; font-size: 14px; line-height: 20px;}
}
summary2 {
  font-weight: 500;position:relative; left:-10px; color: #97B647; sans-serif; font-size: 24px; font-weight: 200;  
  cursor: pointer;width: 70%;
  padding: 20px 20px 0px 20px;    text-align: left;


}
/* removed outline as for codepen only
  don't remove focus on elements
  it's bad accessibility
  don't be _that_ guy
*/
summary:focus {
  outline: none;
}

summary::-webkit-details-marker {
  display: none
}

summary::after {
  padding: 20px;
position:absolute;
  top: 50%;
right: 10px;
  color: rebeccapurple;
  font-family: "Font Awesome 5 Free";
  font-size: 30px;
  font-style: normal;
  font-variant-caps: normal;
  font-variant-ligatures: normal;
  font-weight: 900;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  content: "\f078";
    transform: translateY(-50%);
  transition: .3s ease;

}

details[open] summary::after {
  content: "\f057";
  font-size: 30px; 
  top: 0;
    transform: translateY(0);
  transition: .3s ease;
}

/* pure css select box */
.select ul li.option {
  background: #fff; /*background of menu items (default state)*/
color: white;
padding: 8px 10px;
border-right: 1px solid #fff;  border: 1px solid #fff;
    border-radius: 8px;
color: #7F7F7F;
text-decoration: none;border: 1px solid gray;

}

.select ul li.option:hover {
  background: black; /*background of menu items during onmouseover (hover state)*/
color: white;
}

.select ul li.option {
  z-index: 1;
  padding: 5px;
  display: none;
  list-style:none;
}

.select ul li:first-child {
  display: block; 
}

.select ul li {
  cursor: default;
}

.sortieren nav3 {
        margin:0;
        padding: 0;
        background-color: #FFffff; float: right;
}

.sortieren  nav3 ul {
 /*background of menu items (default state)*/
color: white;
 padding: 5px; 

    border-radius: 8px;
color: #7F7F7F;
text-decoration: none;border: 1px solid gray;
	list-style: none;
	position: relative; height:30px; width:170px;
  float: left;z-index:100;
        padding:0;
        margin:0;
        list-style: none;
        position: relative;
}
.sortieren  nav3 ul:after {
		content: ""; clear: both; display: block;
	}

	.sortieren  nav3 ul li {
		float: left;height:30px; margin-top: 10px; margin-left: 12px; position: relative;top:3px; left:-12px; 
		   margin: 0px;
        display:inline-block;
        float: left;
     
	}
	.sortieren nav3 a {
        display:block;
        padding:10px 10px;     margin-top: 0.65em;  
        color:#808080;
        font-size:12px;
        text-decoration:none;
}
		.sortieren  nav3 a:hover { 
			 list-style: none; 
border-right: 1px solid #7F7F7F;  border: 1px solid #7F7F7F;
    border-radius: 8px;
color: #7F7F7F;  padding: 5px;height:30px; position: relative;top:1px; left:-20px;  background-color: #428BCA;
		
		
		}
			.sortieren  nav3 ul li:hover a {list-style: none;

color: #7F7F7F;  padding: 5px;height:30px;margin-left: 10px;position: relative;top:1px; 
				
			}
		
		.sortieren  nav3 ul li a {
			margin-top: 0px; margin-left: 0px;padding: 1px 1px; 
			color: #757575; text-decoration: underline;
		}
			
		
	.sortieren  nav3 ul ul {
		 list-style: none;
border-right: 1px solid #fff;  border: 1px solid #fff;
    border-radius: 8px;
color: #f00;
		position: absolute; left:-25px; display: none;

        /* has to be the same number as the "line-height" of "nav a" */
        top: 0px;
	}
	.sortieren nav3 ul li:hover > ul {
        display:inherit;
}
	.sortieren nav3 ul ul li {
			float: none;  list-style: none;
			border-right: 1px solid #7F7F7F;  border: 1px solid #7F7F7F;
    border-radius: 8px;
color: #7F7F7F; position: relative; left:1px;         width:170px;
        float:none;
        display:list-item;
        position: relative;background-color: #fff;
		}
	.sortieren nav3 ul ul li a {
				
				color: #fff;height:30px;margin-top: 1px;
			}	
		.sortieren nav3 ul ul li a:hover {
					
			 background: #97b647; float: none;  list-style: none;
			border-right: 1px solid #7F7F7F;  border: 1px solid #7F7F7F;
    border-radius: 8px;
color: #7F7F7F; height:20px; width:150px; margin-bottom:0px;  padding-top:6px; padding-left: 14px; margin-left: 10px; position: relative;top:-2px; left:-10px;
				}
	
		
	.sortieren  nav3 ul ul ul {
		position: absolute; left:1px; top:0;height:30px;
	}