* {
	margin:0;
	padding:0;
}

html, body {
	margin:0;
	padding:0;
	font-family:Calibri;
	font-variant: normal;
	font-size: 12px;
	color:#313131;
	height: 100%;
	width: 100%;
	background-color: #eeeeee;

}
body {
background-image: url("media/hintergrund.svg");
background-position-y:55px;
  background-size: 650px;
  background-repeat: repeat-x;
  animation: bodyBGshift 60s linear infinite;
}
@keyframes bodyBGshift {
	from { background-position: 0px 5px}
	to { background-position: 1000px 5px}
}

#inhalt {
	margin:0 auto;
	max-width:990px;
	background-color:white;
  background-image: url("media/hintergrund.svg");
  background-size: 250px;
  background-repeat: repeat-x;
  animation: inhaltBGshift 40s linear infinite;
  padding-bottom:60px;
}
@keyframes inhaltBGshift {
	from { background-position: 0px 15px}
	to { background-position: 1000px 15px}
}

h1 {
	color: #778442;
	text-align:center;	
	padding:20px 0 10px 0;
	background-color:white; margin:0 auto;
	width:250px;
	opacity:.9;
}

h2, h3 {
	padding:0; margin:0;
	text-align:center;
}
h2{
	margin-bottom:10px;
	font-size:20px; color:white;
  text-shadow: 1px 1px 2px rgb(0,0,0,.7);
  
}
  h3 {
	font-size:12px;
	margin-bottom:10px;
}
.linksverschoben {
	transform:translate(-20px,0);
}

input[type="checkbox"]:checked{
	accent-color: #778442;
	
}
.headerwrap {
	display:flex;flex-wrap:wrap;
}
.header1, .header2, .header3, .header4 { 
	padding:10px;
	box-sizing:border-box;
	font-size:13px;
	min-height:35px;
	margin:5px 0 10px 0; 
	display: flex; 
	align-items: center; 
}
.header1, .header3, .header4 {
	background-color: #778442;
	color:white;
}
.header1, .header4 { width:40px;  justify-content: center;}
.header2 { width:100px; justify-content: center;
	background-color:#f0f7f0;
	color:#475E29;}
.header3 { width:calc(100% - 40px - 100px - 40px); hyphens: auto;}
.header3,.header4 {	cursor:pointer;}

.flexwrap {
	display:flex; flex-wrap:wrap; justify-content:space-evenly;
	transition: all 0.3s linear;
}

.container { 
	padding:10px; 
	margin-bottom:5px;
	border:3px solid white;
	background-color:#dfdfdf;
	width:160px;
	background-repeat:no-repeat;
	background-size:40px;
	background-position: calc(100% - 5px) 5px; 
}


.auftragsplaettchen, .auftragsplaettchenCounter, .auftragsplaettchenAdd, .auftragsplaettchenErg  {
		transition: all 0.2s ease-in-out;

	margin: 5px 0 5px 0;
	font-size:13px;
	box-sizing:border-box; text-align:center;
	font-weight:bold;  	border-radius:12px;

}
.auftragsplaettchen, .auftragsplaettchenCounter {
	padding-top:12px;
}
.auftragsplaettchen {
	box-shadow:0px 0px 4px grey;
}
.auftragsplaettchenAdd {
	cursor:pointer; 	
	opacity:.2;
	padding:10px;
}
.auftragsplaettchenAdd:hover {
	opacity:.7; transform:rotate(180deg);
}
.auftragsplaettchenAdd, .auftragsplaettchen, .auftragsplaettchenCounter {
	width:40px; height:40px;
	float:left; background-color:transparent; border-color:transparent;
}
.auftragsplaettchenErg {
	line-height:10px; 
	padding:10px;
}
.auftragsplaettchenErg {
	 background-color:#bed1bf;
	 color:white;
	 width:100%;
}

/* keine Pfeile in Nummernfeldern */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type=number] {
  -moz-appearance: textfield;
}

.textfeld {
	transition: all 0.2s ease-in-out;
	 background-color:#bed1bf;
	 border:none;  border-radius:30px;
	 color:white;
	 width:70px;

	 text-align:center; float:left;
	 padding:10px;
	margin-top:10px;
	margin-bottom:10px;
	box-sizing:border-box; text-align:center;
	font-weight:bold;
}

.warnmeldung {
	padding:10px; text-align:center; background-color:#C2675C; width:300px; margin: 0 auto; margin-bottom:10px; color:white; font-weight:bold;
}
#logikWertungsblatt {display:none; }