/**************************************************
*    Style-Definition fuer Webseiite gesamt       *
*                                                 *
**************************************************/
:root{
  --weissfarbe:   white;
  --gelbfarbe:    yellow;
  --hgraufarbe:   rgb(173, 169, 169);
  --graufarbe:    grey;
  --rotfarbe:     red;
  --gruenfarbe:   green; 
  --dgruenfarbe:  darkgreen;
  --blaufarbe:    blue;
  --dblaufarbe:   darkblue;
  --schwarzfarbe: black;
  /***   Einstellung fuer Modal-Anzeige   *****/
  --modal-duration: 1s;
  --modal-color: darkgreen;
  --modal-bodycolor: rgb(2, 117, 2);
  --modal-bodytext: rgb(248, 248, 141);
}
html{ 
height: 100%; 
color: var(--hauptfarbe);
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
body{ 
height: 100%;
padding:0px;
background-image: url(../button/Werkstatt.jpg);
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
background-color: var(--graufarbe);
}
header {
  padding-top: 1px;
  padding-bottom: 14px;
}
/*****************************************************
/*****     Definition Willkommensschild     *********/
.boxt{
    position: absolute;
    width: 600px;
    height: 200px;
    background: transparent;
    border: 2px solid var(--weissfarbe);
    border-radius:20px;
    font-size: 30px;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    color: var(--weissfarbe);
}
.boxt::before{
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 20px;
    background: rgba(0, 0, 0, .3);
}

.boxu{
  position: absolute;
  width: 600px;
  height: 200px;
  background: transparent;
  border: 2px solid var(--dgruenfarbe);
  border-radius:20px;
  font-size: 30px;
  font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
  color: var(--weissfarbe);
}
.boxu::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 20px;
  background: rgba(0, 128, 0, 0.4);
}
/*****     Definition Textueberschrifthintergrund     *********/
.boxs{
  margin-top: 0px;
  width: 85%;
  background: rgba(0, 0, 0, .8);
  color: var(--weissfarbe);
}
/*****     Definition Textpositionierung    *********/
h1{ background-color: var(--gelbfarbe);
  color: var(--schwarzfarbe);
  font-family: 'Courier New', Courier, monospace;
  font-size: 30px;
  justify-content: center; 
}
h2 {
  display: flex;
  justify-content: center;
  align-items: center;
}
h3{ background-color: var(--hgraufarbe);
  color: var(--schwarzfarbe);
  font-size: 30px;
  padding: 10px;
  justify-content: center; 
  text-align: center;
}
.mitte {
  display: flex;
  justify-content: center;
  align-items: center;
}
.rechts {
  display: flex;
  justify-content: right;
  align-items: right;
}
.links {
  display: flex;
  justify-content: left;
  align-items: left;
}
/*******************************************************/