/*  ########################################################################################################################## */
/*  ############################################### pretz.de Template Styles ################################################# */
/*  ########################################################################################################################## */


* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}


body {
 font-family: Verdana, sans-serif;
 line-height: 1.5;
 overflow-x: hidden;
 margin: 0;
 background: var(--Farbe1);
 color: var(--weiss);
}

.txtwrap{
 border: var(--schwarz) 1px solid;
 border-radius: 10px;
 background: var(--Farbe3);
 padding: 10px 10px 10px 10px;
 width: calc(100% - 20px);
}

a {
 -webkit-transition: 0.5s;
 -o-transition: 0.5s;
 transition: 0.5s;
 text-decoration: none !important;
 color: var(--weiss);
}


h1, h2{
 display: inline-block;
 padding-top: 0px;
 padding-bottom: 3px;
 margin-bottom: -3px;
 border-bottom: var(--Farbe2) 3px solid;
}

.h_bottom{
 border-bottom-width: 3px;
 border-bottom-style: solid;
 width: calc(100% - 20px);
 margin-bottom: 10px;
 border-bottom-color: var(--dunkelgrau);
}

/*################################################################################################*/
/*########################################### Navigation #########################################*/
/*################################################################################################*/

.nav{
 width: 900px;
 max-width: 100%;
 background: var(--farbe1dunkel);
 border: var(--farbe1dunkel) 1px solid; 
 border-radius: 5px;
 padding-bottom: 5px;
}
 
.navLink{
 height: 30px;
 width: calc(25% - 10px);
 min-width: 100px;
 border: var(--weiss) 1px solid;
 border-radius: 5px;
 float: left;
 padding-left: 10px;
 margin-top: 10px;
 margin-left: 5px;
 margin-right: 5px;  
 font-weight: bold;
}  

.User{
 width: calc(100% - 10px);
 text-align: center;
 border: var(--weiss) 1px solid;
 border-radius: 5px;
 float: left;
 padding-left: 10px;
 margin-top: 4px;
 margin-left: 5px;
 margin-right: 5px;
 font-size: 12px;
  float: left;  
} 

/*################################################################################################*/
/*############################################## Seite ###########################################*/
/*################################################################################################*/


#header{
 text-align: center;
 margin-bottom: -6px;
}
 
.container_inhalt {
 margin: 0 auto;
 margin-top: 5px;
 padding-top: 5px;
 width: 900px;
 margin-bottom: 30px;
}

.lblHead {
 font-size: 22px;
 padding-bottom: 10px; 
 float: left;
} 

.lblIconOK, .lblIconNOK{
 height: 30px;
 width: 40px;
 float: right;
 border-radius: 10px;
} 

.lblIconOK{
 background: var(--farbe3);
 background-image: url(../img/icon/uhr.png); 
}

.lblIconNOK{
 background: var(--farbe1);
 background-image: url(../img/icon/x.png);   
}  

.NavLink{
 height: 30px;
 width: 58px;
 border: #ffffff 1px solid;
 border-radius: 5px;
 text-align: center;
 margin: 0 auto;
 background: var(--farbe2dunkel);
 float: left;
 margin: 10px 10px 10px 10px;
 -webkit-transition: all .5s ease;
 -moz-transition: all .5s ease-in-out;
 -o-transition: all .5s ease-in-out;
 -ms-transition: all .5s ease-in-out;    
} 

.NavLink:hover{
 background: var(--farbe1dunkel); 
}


.OKbutton, .ZURbutton{
 height: 30px;
 width: 200px;
 border: var(--weiss) 1px solid;
 border-radius: 5px;
 font-weight: bold;
 text-align: center;
 margin: 0 auto;
} 

.OKbutton{
 background: var(--farbe2dunkel);
} 

.ZURbutton{
 background: var(--farbe1dunkel);
}  



.td, .td200, .tdSmall{
 float: left;
 width: 120px;
 border-bottom: #ffffff 1px solid;
 border-right: #ffffff 1px solid;
 padding-right: 5px;
 padding-left: 5px;  
}

.td200{
 width: 200px;
}

.tdSmall{
 width: 50px;
 font-size: 10px;
 overflow: hidden;
 height: 25px;
} 

.capcha{
 float: left;
 margin-right: 20px;
}


.firma{
 max-width: 100%;
 width: 317px;
 margin: 0 auto; 
 border: var(--farbe3) 1px solid;
 background: var(--farbe1dunkel);
 border-radius: 10px;
 margin-bottom: 20px;
 padding: 10px 10px 10px 10px;
 font-size: 10px;  
} 

.monatGIF{
 width: 60px;
 margin: 10px 10px 10px 10px;
 border-radius: 20px;
 border: 1px var(--hellgrau) solid; 
 box-shadow: 3px 3px var(--dunkelgrau); 
 transition-property: all;
 transition-duration: 200ms;
 transition-timing-function: ease-in-out;
 transition-delay: 0s; 
}

.monatGIF:hover{
 box-shadow: 0px 0px var(--dunkelgrau); 
}
 
 
@media screen and (max-width: 800px) {

 .container_inhalt {
  width: 100%;
  padding-right: 20px;
  padding-left: 20px;
 }

 h1, h2, h3 {
  font-size: 18px;
 } 

}


/*################################################################################################*/
/*############################################ kalender ##########################################*/
/*################################################################################################*/


#MonthWrap{
 margin-top: -24px;
}

#monat{
 width: 100%;
 margin-bottom: 100px;
 margin-top: 10px;
 font-size: 12px;
}


.leer{
 opacity: 0; 
}

.leer, .nix, .tag, .samstag, .sonntag, .vergangenheit{
 width: 120px;
 height: 90px;
 float: left;
 padding: 3px 3px 3px 3px;
 margin: 3px 3px 3px 3px;
 border: 1px var(--hellgrau) solid;
 border-radius: 5px;
 box-shadow: 3px 3px var(--dunkelgrau); 
}

.nix{
 background: var(--farbe1);
 color: var(--farbe1dunkel);
 opacity: .5;
}

@media screen and (max-width: 800px) {
 .nix, .leer{
  display: none;
 } 
}

.tag, .samstag, .sonntag, .vergangenheit{
 color: var(--weiss);

}

.tag{
 background: var(--farbe2dunkel);
 border: var(--farbe1dunkel) 1px solid;
} 

.tag:hover{
 background: var(--farbe2);
 color: var(--dunkelgrau);
 box-shadow: 0px 0px var(--dunkelgrau);  
 transition-property: all;
 transition-duration: 500ms;
 transition-timing-function: ease-in-out;

} 

.samstag, .sonntag{
 background: var(--farbe1dunkel);
 border: var(--farbe2dunkel) 1px solid; 
}


.samstag:hover, .sonntag:hover{
 background: var(--farbe1);
 color: var(--dunkelgrau); 
 box-shadow: 0px 0px var(--dunkelgrau);   
 transition-property: all;
 transition-duration: 200ms;
 transition-timing-function: ease-in-out;
 transition-delay: 0s; 
}


.vergangenheit{
 background: #efefef;
 background-image: url(img/datumX.png);
 color: #808080;
 transition-property: all;
 transition-duration: 200ms;
 transition-timing-function: ease-in-out;
 transition-delay: 0s;
}

.vergangenheit:hover{
 background: #D2081C;
 color: #FA7784;
}

.ArtikelOK, .Artikel_N_OK{
 height: 20px;
 margin-bottom: 2px;
 width: 18px;
 float: left;
 font-size: 12px;  
 margin-right: 2px;
 border-radius: 25%;
 text-align: center;
 color: var(--weiss);
 border: var(--weiss) 1px solid;
} 

.ArtikelOK{
 background-color: var(--farbe2dunkel);
}   

.Artikel_N_OK{
 background-color: var(--farbe1dunkel);
}  

.artWrap{
 float: left;
 width: 100%;
 max-width: 200px;
 border:  var(--hellgrau) 1px solid;
 border-radius: 10px;  
 margin-right: 5px;
 padding:5px 5px 5px 5px;
 margin-bottom: 5px;  
} 

/*################################################################################################*/
/*######################################### Formulare ############################################*/
/*################################################################################################*/ 

.input, .Auswahl{
 float: left;
 border: #eeeeee 1px solid;
 border-radius: 10px;
 margin-right: 10px;
 padding: 10px 10px 10px 10px;
 margin-bottom: 20px;
 overflow: hidden;
} 

.input{
 width: 100%;
 max-width: 100%;
 height: 100px;
}

.Auswahl{
 width: 100%;
 height: 50px;
}

.container {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  float: left;
  padding-right: 10px;
  padding-top: 5px;   
  margin-left: 10px;
  border: var(--farbe3) 1px solid;
  border-radius: 5px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}


.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.checkmark {
  position: absolute;
  top: 7px;
  left: 5px;
  height: 25px;
  width: 25px;
  background-color: #eee;
  border-radius: 50%;
}


.checkmark:hover {
  background-color: var(--farbe3);
}

.container input:checked ~ .checkmark {
  background-color: var(--farbe3);
}

.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

.container input:checked ~ .checkmark:after {
  display: block;
}

.container .checkmark:after {
  top: 9px;
  left: 9px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: white;
}  

input[type="text"], input[type="email"], select{
 width: 200px;
 height: 40px;
 border-radius: 10px;
 font-size: 20px;
 padding-left: 10px;
 -webkit-transition: all .5s ease;
 -moz-transition: all .5s ease-in-out;
 -o-transition: all .5s ease-in-out;
 -ms-transition: all .5s ease-in-out;   
}

.inp{
 width: 90% !important;
 height: 20px !important;
 border: none !important;
 font-size: 12px !important;
 padding-left: 5px !important;
} 

input[type="submit"]{
 width: 200px;
 height: 50px;
 border-radius: 10px;
 -webkit-transition: all .5s ease;
 -moz-transition: all .5s ease-in-out;
 -o-transition: all .5s ease-in-out;
 -ms-transition: all .5s ease-in-out;  
 background: var(--farbe2dunkel);  
 color: var(--weiss);  
}

input[type="submit"]:hover{
 background: var(--farbe1dunkel);
}  

/*

.inpLBL1, .inpLBL2{
 float: left;
 width: 14%;
 border: #000000 1px solid; 
 color: #000000;
 font-size: 12px;
} 

.inpLBL1, .inpLBL1 .inp{
 background: #ffffff;
}

.inpLBL2, .inpLBL2 .inp{
 background: #c0c0c0;
}  
 
*/ 

/*################################################################################################*/
/*################################################################################################*/
/*################################################################################################*/