html {scroll-behavior: smooth;}

body {
	margin: 0;
	padding: 0;
	font-family: Arial, sans-serif;
	
		opacity: 0;
	transition: opacity 2s;
}


img {width:100%; height: auto; opacity: 1}





.container
{
  padding: 0 30px;
  position: 30 px;
  padding: 30px;
  box-sizing: border-box;
}
.container .box
{
  width: 23%;
  height: 100px;
  line-height: 100px;
  text-align: center;
  color: rgba(255, 255, 255, .5);
  font-family: arial;
  font-size: 2rem;
  float: left;
  box-sizing: border-box;
  margin: 10px;
  text-transform: uppercase;

}





/* ----buttons---- */
.dbutton{
	display:inline-block;
	color:#fff;
	background-color: rgb(125,125,125);
	width:auto;
	padding: 10px 15px;
	border: none;
	margin-bottom:2rem;
	font-size: 1rem;
	transition: background-color 0.3s ease-in-out;
}
.dbutton a{color: #fff; text-decoration: none;}
.dbutton:hover{ 
	background-color: rgb(185,185,185);
	color:#fff;cursor:pointer;
}
.sbutton{
	display:inline-block;
	color:#fff;
	background-color: rgb(125,125,125);
	width:auto;
	padding: 0;
	border: none;
	margin:0;
	text-decoration: none;
	font-size: 1rem;
	transition: background-color 0.3s ease-in-out;
}
.sbutton:hover{ 
	background-color: rgb(185,185,185);
	color:#fff;cursor:pointer;
}
/* ---- Login-Box ---- */
.login-box{text-align: center;}
.login-table fieldset{border: none;}
.login-table fieldset::before{content:"Status:"}

/* ---- Buttons Loginbox --- */
.logout-advance ul{padding:0;}
.preference, .admin, .modify{
	padding: 10px;
	color:#fff;
	background-color: rgb(125,125,125);
	float:none;
	display:inline;
	transition: background-color 0.3s ease-in-out;
	line-height: 3em;
}
.preference:hover, .admin:hover, .modify:hover{
	background-color: rgb(185,185,185);
	cursor:pointer;
}
.preference a, .admin a, .modify a{text-decoration: none; color:#fff;padding:inherit;}
.forgot a{display:inline-block; color:#fff;background-color: rgb(125,125,125);border:none;margin-bottom:2rem;font-size: 1rem;transition: background-color 0.3s ease-in-out;text-decoration: none; padding: inherit;}
.forgot a:hover{background-color: rgb(185,185,185);color:#fff;cursor:pointer;}

*/*-------------searchbox---------------
.searchbox{
	position:fixed;
	margin-left:15vw;
	z-index:30;
}
*/
#totop {
  opacity: 0;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  font-size: 18px;
  border: 1px solid #fff;
  border-radius: 4px;
  outline: none;
  background-color: rgb(125,125,125);
  color: white;
  cursor: pointer;
  padding: 15px;

  
}

#totop:hover {
  background-color: rgb(185,185,185);
   transition: all 5s ease-in-out;
}

.footer{
	text-align: center;
}
.footer a{
	text-decoration: none;
	padding: 10px 15px;
}

/* ---- Seite Bearbiten ---- */
.editpage{
   position:fixed;
   top:5px;
   text-decoration:none;
   background:#aaa;
   cursor:pointer;
   z-index:20;
}
.editpage img{max-width: 20px;}
.editpage>.dbutton {position: fixed; top: 60px; right:0;}

/* ---- Impressum ---- */
#sec4_2 {display:none}

.impressum{margin-left: 10vw;}

/* ---- Spalten ---- */

.left{float:left; border: 1px dotted #640;}
.right{float:right; border: 1px dotted #640;}
.shadow:hover { box-shadow: 0px 0px 10px 5px #ddd; transition: all 0.3s ease-in-out;}
.hover{cursor: pointer;}
.border {border: 1px solid #000;}
.center{text-align: center;}
.einespalte{width: 96%; margin: 0 auto;  padding: 1rem;}
.einespalte_c{width: 60%; margin: 0 auto;  padding: 1rem;}
.zweispalten{
	box-sizing: border-box;
	width: 50vw;
	padding: 3%; 
	background:transparent; 
	display: table-cell
	}

.dreispalten{
	box-sizing: border-box;
	width: 33vw;
	padding: 1em; 
	background:transparent; 
	display: table-cell;
}


.vierspalten{width: 25vw; padding:3%; background:transparent;display: table-cell; }


.fuenfspalten{width: 20vw; padding: 3%; background:transparent; display: table-cell;}
.sechsspalten{width: 16.6vw; padding: 3%; background:transparent; display: table-cell;}
.siebenspalten{width: 14.25vw; padding: 3%; background:transparent; display: table-cell;}
.achtspalten{width: 12.5vw; padding: 3%; background:transparent; display: table-cell;}
.neunspalten{width: 11.1vw; padding: 3%; background:transparent; display: table-cell;}
.zehnspalten{width: 10vw; padding: 3%; background:transparent; display: table-cell;}

.spaltenCenter {text-align: center;}
.spaltenCenter img  {border-radius: 50%; display: inline;}

.dreispalten h2 {
  color: #b7b7b7;
  font-size: 50px;
  margin: 0;
  position: absolute;
  opacity: 0.2;
  top: 50px;
  right: 10px;
  z-index: -1;
  transition: all 0.3s ease-in-out;
}
.dreispalten:hover h2 {
  top: 0px;
  opacity: 0.6;
}
@media screen and (max-width: 900px) {
body{opacity:1}	
	.tab{padding: 100px 10px 0 10px;}
#sec4_2 {display:block; margin-bottom:100px;}	

.miniform {margin-top:110px;}

.einespalte, .einespalte_c, .zweispalten, .dreispalten{width:80vw; display:block;}
.dreispalten{ padding: 2em;}
.vierspalten, .fuenfspalten{width:70vw; display:block;}

@media screen and (max-width: 420px) {
	
	.dbutton, .forgot a{ width: auto;}
	.dreispalten{ display: block; width: 100%; padding: 0;}
}