html, body {
  margin-left: 0px;
  padding-left: 0px;
  margin-right: 0px;
  padding-right: 0px;
  /* background-color: #dbdfe9;
  background: linear-gradient(to bottom, #ffffff 20%, #dbdfe9 100%, #dbdfe9 100%);           Verlaufender Hintergrund*/
  background-attachment: fixed;
  min-height: 100%;
  height: 100%; 
  text-align: justify; 
  hyphens: auto;    /*Silbentrennung*/   
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  overflow-x: hidden;  
  background-color: #f7f7f7; 
  background: linear-gradient(to bottom, #fefefe 20%, #f7f7f7 100%, #f7f7f7 100%); 
}

#top {
  background-color: white;
  width: auto;
  text-align: center;
  margin: 0;
  padding: 0; 
  z-index: 10; 
  /* border: 1px solid #33FF33; */
}

#topbar {
  background-color: white;
  align-content: center;
  max-width:1024px;
  left: 50%;
  text-align: left;
  z-index: 10;  
  /* border: 1px solid rgb(255, 51, 238); */ 
}

#top br {
  clear: both;
}

#topbar br {
  clear: both;
}

#menubar {
  /* background-color: #db2d2d; */   
  background-image: linear-gradient(to top, #ffffff 0%, #eae9e9 80%);  
  /*border: 2px;*/
  margin: 0px;
  padding: 0px;
  /*border: 1px solid #33FF33;*/  
  border-top: 1px solid #cdcdcd; 
  border-bottom: 1px solid #cdcdcd; 
  z-index: 10; 
}

nav {
  /*margin-left: auto;
  margin-right: auto;
  padding: 20px;*/
  clear:both;
  display: table; /*automatische Breite*/
  margin: 0px auto; /*zentrieren*/
  background-color: white;
  /*border: 1px solid #33FF33;*/
  max-height: 0;
	overflow: hidden;

	/* Set our transitions up. */
	-webkit-transition: max-height 0.8s;
	-moz-transition: max-height 0.8s;
	transition: max-height 0.8s;
}

#logo {
  /*display: block;*/
  margin: 0px;
  padding: 0px;
  float: left;
  font-size: 20px;
  /*line-height: 60px;*/
  text-align: left;
  /*border: 1px solid #33FF33;*/
}

nav:after {
  content: "";
  display: table;
  clear: both;
}

nav ul {
  /*float: left;*/
  padding: 0;
  margin: 0;

  list-style: none;
  z-index: 10;
  /*border: 1px solid #33FF33;*/
}


/* Hauptmenu nav */
nav ul li {
  margin: 0px auto;
  display: inline-block;
  float: left;
  /* background-color: #343cac; */  
  background-image: linear-gradient(to top, #ffffff 0%, #eae9e9 80%); 
  width: 170px;
  /* color: white; */ 
  color: #888888;
  text-align: center;
  /* border-left: 1px solid #535cff;
  border-right: 1px solid #535cff; */
}

/* Hauptmenu link */
nav a {
  display: block;
  padding: 0 20px;
  color: #FFF;
  font-size: 24px;
  line-height: 30px;
  text-decoration: none;
}

nav ul li ul li:hover { /* background: #343cac; */ background: #cdcdcd; }

nav a:hover { /* background-color: #343cac; */ background-color: #cdcdcd; }

nav ul ul {
  display: none;
  position: absolute;
  /*top: 60px;*/
}

nav ul li:hover > ul {  display: table; }


/* Untermenu breit offen */
nav ul ul li {
  width: 220px;
  float: none;
  display: list-item;
  position: relative;
  /* border-top: 1px solid #535cff; */ 
  border-bottom: 1px solid #cdcdcd; 
}

nav ul ul ul li {
  position: relative;
  top: -60px;
  left: 170px;
}

li > a:after { content: ' +'; }  

#nopl li > a:after { content: ''; }

.toggle, [id^=drop] {
 display: none;
}

li > a:only-child:after { content: ''; }

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

/*#top {
  position: fixed;
  z-index: 1;
}*/

#top {
  width: 100%;
  position: fixed;
  z-index: 10;
  left: 0%;
  text-align: left;
}

#topbar {
  display: block;
  padding: 0;
  width: 100%;
  text-align: left;
}

#main {
  padding-top: 120px;
}


#logo {
  display: block;
  padding: 0;
  width: 100%;
  text-align: left;
}

nav {
  margin: 0;
  padding: 0;
  width: 100%;
  position: fixed;
  z-index: 10;
  background-color: transparent;
}

/* Menu bei kleinem Bildschirm */
nav ul {
  padding: 0;
  margin: 0;
  margin-top: -8px;  
}

.toggle + a,
 .menu { display: none; }

.toggle {
  display: block;
  /* background-color: #040484; */  
  background-color: #cdcdcd; 
  padding: 0 20px;
  color: #FFF;
  /*font-size: 20px;*/
  line-height: 30px; 
  text-decoration: none;
  border: none;
  font-size: 16px;  
}

/* Klappmenu bei kleinem Bildschirm */
label[for=drop-2], label[for=drop-1] {
  line-height: 32px;  
  margin: 0px;
}

nav ul ul {
    padding: 0;
    margin: 0;
    margin-top: 0px;  
  }

.toggle:hover { /*background-color: #000000;*/ }

[id^=drop]:checked + ul { display: block; }

nav ul li {
  display: block;
  /*width: 40%;*/
  display: table;
  clear: both;
  text-align: left;
  /* border-top: 1px solid #535cff; */ 
  border-top: 1px solid #cdcdcd; 
  line-height: 30px;
}

nav ul ul .toggle,
 nav ul ul a { padding: 0 20px; }

nav ul ul ul a { padding: 0 80px; }

nav a:hover,
 nav ul ul ul a { /*background-color: #000000;*/ }

nav ul li ul li .toggle,
 nav ul ul a { /*background-color: #212121;*/ }

nav ul ul {
  float: none;
  position: static;
  color: #ffffff;  
  line-height: 30px; 
}

nav ul ul li:hover > ul,
nav ul li:hover > ul { display: none; }

/* Untermenu schmal offen */
nav ul ul li {
  display: block;
  /*width: 100%;*/
  width: 220px;  
  padding-left: 10px; 
  line-height: 30px; 
}

nav ul ul ul li { position: static;

}
}

@media all and (max-width : 330px) {

nav ul li {
  display: block;
  /*width: 94%;*/
}

}





.marketmenu-btn {
  /* background-color: rgb(214, 214, 214); */
  background-color: #ffffff; 
  color: rgb(0, 0, 0);
  padding: 6px;
  /* padding-left: 10px; 
  padding-right: 10px;  */
  font-size: 14px;
  /* border: none; */
  cursor: pointer; 
  width: 100%; 
  max-width: 260px; 
  text-align: left;  
  border-radius: 3px; 
  border-style: solid;
  border-width: 1px; 
  border-color: black; 
}

/* The container <div> - needed to position the dropdown content */
.marketmenu {
  position: relative;
  display: inline-block;  
  margin: 0px auto; 
  /* border: 1px solid black;   */
  text-align: left; 
  height: 100%; 
  width: 100%; 
  max-width: 260px;    
}

/* Dropdown Content (Hidden by Default) */
.marketmenu-content, .marketmenu-content-flag {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  width: 100%;
  max-width: 260px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);   
  /* border: 1px solid black;   */
  /* z-index: 1; */
}

/* List inside the dropdown */
.marketmenu-content ul {
  list-style: none; 
  margin-left: 0;
  padding-left: 0; 
}

/* List inside the dropdown */
.marketmenu-content ul li {
  height: 2rem;  
}

/* Links inside the dropdown */
.marketmenu-content a {
  color: black;
  padding: 12px 8px;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */
.marketmenu-content a:hover, .marketmenu-content-flag a:hover {background-color: #f1f1f1}

/* Show the dropdown menu on hover */
.marketmenu:hover .marketmenu-content, .marketmenu:hover .marketmenu-content-flag {
  display: block;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.marketmenu:hover .marketmenu-btn {
  background-color: #fffebc;
}







.langmenu-btn {
  /* background-color: rgb(214, 214, 214); */
  background-color: #e0e3ec; 
  color: rgb(0, 0, 0);
  padding: 2px;
  margin: 0px;
  font-size: 1rem;
  /* border: none; */
  cursor: pointer; 
  min-width: 50px; 
  text-align: left;  
  /* border-radius: 3px;  */
  border-style: solid;
  border-width: 1px; 
  border-color: black; 
  height: 1.6rem; 
}

/* The container <div> - needed to position the dropdown content */
.langmenu {
  position: relative;
  display: inline-block;  
  /* margin: 0px auto;  */
  /* border: 1px solid black;  */  
  text-align: left; 
  height: 100%;    
}

.langmenu img {
  margin: 0px;
  padding: 0px;    
}

/* Dropdown Content (Hidden by Default) */
.langmenu-content {
  display: none;
  position: absolute;
  background-color:  #e0e3ec;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);   
  /* border: 1px solid black;   */
  /* z-index: 1; */
  min-height: 1.8rem;
  top: 24px;  
  left: 1px; 
}

/* List inside the dropdown */
.langmenu-content ul {
  list-style: none; 
  margin-left: 0;
  padding-left: 0; 
}

/* List inside the dropdown */
.langmenu-content ul li {
  height: 2rem;  
}

/* Links inside the dropdown */
.langmenu-content a {
  color: black;
  margin: 0px;
  padding: 4px;
  /* padding: 12px 16px; */
  text-decoration: none;
  /* display: block; */
}

/* Change color of dropdown links on hover */
.langmenu-content a:hover {
  margin: 0px;
  padding: 4px;
  background-color: #fffebc; 
}

/* Show the dropdown menu on hover */
.langmenu:hover .langmenu-content {
  margin: 0px;
  padding: 0px;
  display: block;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.langmenu:hover .langmenu-btn {
  background-color: #fffebc;
}






.pagination {
  display: inline-block;
}

.pagination a {
  color: black;
  float: left;
  padding: 2px 8px;
  text-decoration: none;
  transition: background-color .3s;
  border: 1px solid grey;
  margin: 0 2px; 
  border-radius: 3px; 
  background-color: white; 
  margin-top: 4px; 

}

.pagination a.active {
  /* background-color: #4CAF50;
  color: white;
  border: 1px solid #4CAF50; */
  background-color: #fffebc;
}

#pagi_activ {
  /* background-color: #4CAF50;
  color: white;
  border: 1px solid #4CAF50; */
  background-color: #fffebc;
}

.pagination a:hover {
  /* background-color: #4CAF50;
  color: white;
  border: 1px solid #4CAF50; */
  background-color: #fffebc;
}