:root {
  --blue:         #6495ed;
  --white:        #faf0e6;
  --daniBeige:    #f7e9cd;  
  --daniSelected: #172e7c; 
  --zeilenbreite: 600px;
  --heightLogo:   200px;
}
 

.buttonKuredu {
  background: url(graphics/ButtonKuredu1.jpg);
  width: 150px;
  height: 70px;
  margin-top:  5%;
  margin-left: 5%;

  background-size: fill;
  transition-duration: 0.4s;
  border-radius: 35px;
  font-size:20px;
  font-style: italic;
  font-weight: bold;
  color:  black;

   white-space: normal;
   }


.buttonKureduPhp:hover {
  /* background-color: #4CAF50;
  color: white; */
  background: url(graphics/ButtonKuredu2.jpg);
  background-image:scale-down;
  }

.buttonKureduPhp::after {
 height: 0;
 left: 25%;
 top: 25%;
 width: 0;
  }
.buttonKureduPhp:hover:after {
 height: 100%;
 left: 0;
 top: 0;
 width: 100%;
   }  

   .buttonKureduPhp:active {
    color: gold; 
    }



   .buttonVorZurueck {
    background: url(graphics/ButtonVorZurueck.jpg);
    width: 150px;
    height: 55px;
    margin-top:  5%;
    margin-left: 5%;
  
    background-size: fill;
    transition-duration: 0.4s;
    border-radius: 15px;
    font-size:20px;
    font-style: italic;
    font-weight: bold;
    color:black;
  
     white-space: normal;
     }
  
  
  .buttonVorZurueckPhp:hover {
    /* background-color: #4CAF50;
    color: white; */
    background: url(graphics/ButtonVorZurueckHoover.jpg);
    background-image:scale-down;


    }
  
  .buttonVorZurueckPhp::after {
   height: 0;
   left: 25%;
   top: 25%;
   width: 0;
    }
  .buttonVorZurueckPhp:hover:after {
   height: 100%;
   left: 0;
   top: 0;
   width: 100%;
     }  


.buttonDani{
  background-color: burlywood;
  width: 150px;
  height: 80px; 
  font-size:20px;
  color:black;
    /* outline: #6495ed;
    outline-style: double; */
  border: 2px solid;
  border-color: rgb(82, 56, 23);
  box-shadow:  3px 3px #888888;

  white-space: normal;
}
.buttonDani:hover{
  background-color: rgb(224, 220, 214);
}
.buttonDani::after{
  background-color: burlywood;
}


.textstylea  {
             font-size: 40px;
             color:rgb(19, 20, 20);
           margin-left: 12%;
           /* margin-top: 5%; */
           margin-top: 1%;
            }      
.textstylea1 { 
             font-size: 40px;
             color:rgb(19, 20, 20);
           margin-left:12%;
           margin-top: -2%;
            }    
 .textstylenav1  {
              font-size: 30px;
              color:rgb(24, 7, 99);  /* rgb(222, 248, 108); */
            margin-left: 12%;
            /* margin-top: 5%; */
            margin-top: 0%;
             }    
  .textstylenav2  {
              font-size: 30px;
              color:rgb(24, 7, 99);  /* rgb(222, 248, 108); */
            margin-left: 12%;
            margin-top: -2%;
             }  
  .textstylenav3  {
              font-size: 20px;
              color:rgb(24, 7, 99);  /* rgb(222, 248, 108); */
            margin-left: 12%;
            margin-top: -2%;
             }               
.textstyleb  {
             font-size: 35px;
             color:rgb(108, 192, 248);
           margin-left:12%;
           margin-top: 0%;
            }             
.textstyle0  {
             font-size:30px;
             color:black;
           margin-left:10%;
            }
.textstyle01  {
             font-size:30px;
             color:black;
           margin-left:10%;
           margin-top: 10%;                 
            }
.textstyle1  {
             font-size:20px;
             color:gray;
             margin-left:20%;
             
            }
 .textstylePlz  {
            font-size:25px;
            color:black;
            line-height: 50%;
             }

 .classInfo1  {
              font-size:35px;
              color:rgb(235, 228, 228);
              margin-left:10%;
              margin-top: 0%;
             }
 
  .classInfo2  {
              font-size:35px;
              color:rgb(235, 228, 228);
              margin-left:10%;
              margin-top: 0%;
             }

            .apple  {
             font-size:20px;
             color:gray;
             
            }
            .banana  {
             font-size:20px;
             color:gray;
         
            }



  .floatboxFirma {
      float: both;
                                    margin-left: 0px;
                                    margin-top: 0px; 
      border-color: rgb(90, 86, 86);
      border-style: none;
      border-width: 5px;
      overflow:hidden;
     resize:none; 
     font-size: 22px;
  } 

.floatboxZeilen {
      /* float: left;
      margin-left:  10px;
      margin-top:   10px; */
      float: both;
                                    margin-left: 0px;
                                    margin-top: 0px; 
      border-color: rgb(90, 86, 86);
      border-style: none;
      border-width: 5px;
      overflow:hidden;
      resize:none; 
  } 

  .floatboxFirmaOut {
    width: var(--zeilenbreite);
    /* height: 30px;              height oder rows, aber nicht beides!!!   */
    font-size: 22px;
    resize:none; 
  }
  .labelFirma{
    width: var(--zeilenbreite);
    font-size: 22px;
    resize:none; 
  }
  .floatboxTextOut {
    width: var(--zeilenbreite);
    /* height: 130px;                 height oder rows, aber nicht beides!!! */
    resize:none; 
  }

  .posFormLinks{
    float: left;
     margin-left: 100px;
     /* background-color: var(--daniBeige); */
  }

  .posFormVorschau{
    float: left;
     margin-left: 100px;
  }
  .eingabefeld{
    background-color: #CFCFCC;
    /* rows="12" cols="50"  */
    width: var(--zeilenbreite);
    font-size: 16px;
    resize:none; 
  }
  .eingabefeldUe{
    background-color: #f0f0cf;
    /* rows="12" cols="50"  */
    width: var(--zeilenbreite);
    font-size: 16px;
    resize:none; 
  }
  .eingabefeldFont22{
    background-color: #CFCFCC;
    /* rows="12" cols="50"  */
    width: var(--zeilenbreite);
    font-size: 22px;
    resize:none; 
  }
  .eingabefeldUeFont22{
    background-color: #f0f0cf;
    /* rows="12" cols="50"  */
    width: var(--zeilenbreite);
    font-size: 22px;
    resize:none; 
  }




  .eingabefeldSchlagwortSuche{
    background-color: #CFCFCC;
    font-size:20px;
    color:black;
    line-height: 50%;
    /* margin-left: 15%; */

    /* resize:none;  */
 
  }
  .eingabefeldPlzSuche{
    background-color: #CFCFCC;
    font-size:20px;
    color:black;
    line-height: 50%;
/* margin-left: 15%; */

    /* resize:none;  */
 
  }

  .eingabefeldPlzUmkreisSuche{
    background-color: #CFCFCC;
    font-size:20px;
    color:black;
    line-height: 50%;
    /* margin-left: 15%; */
     
    /* resize:none;  */
 
  }






  .vorschaufeld{
    background-color: #CFCFCC;
    /* rows="12" cols="50"  */
    width: var(--zeilenbreite);
    font-size: 16px;
    resize:none; 
  }
  .vorschaufeldUe{
    background-color: #f0f0cf;
    /* rows="12" cols="50"  */
    width: var(--zeilenbreite);
    font-size: 16px;
    resize:none; 
  }
  .vorschaufeldFont22{
    background-color: #CFCFCC;
    /* rows="12" cols="50"  */
    width: var(--zeilenbreite);
    font-size: 22px;
    resize:none; 
  }
  .vorschaufeldUeFont22{
    background-color: #f0f0cf;
    /* rows="12" cols="50"  */
    width: var(--zeilenbreite);
    font-size: 22px;
    resize:none; 
  }

  .classSpace{
    /* clear: both; */
    float: left;
    margin-left: 100px;
    width:1000px;

  }
  .center {
      width:200px;
      height:200px;
      position: fixed;
      background-color: blue;
      top: 50%;
      left: 50%;
      margin-top: -100px;
      margin-left: -100px;
  }

  .warning{
    background: #ff6030;
  }

  .classBtnStelleAufgeben{
    height: 40px;
    width: 500px;
    background: #b8a9a5;
    font-size: 30px;
    margin-left: 50px;
    border-radius: 15px;
    z-index:  1;
  }

  .classBtnBestellvorgang{
    height: 40px;
    width: 500px;
    background: #ff6030;
    font-size: 30px;
    margin-left: 50px;
    border-radius: 15px;
    z-index:  1;
  }
  .classBtnAbbrechen{
    height: 40px;
    width: 500px;
    background: #b8a9a5;
    font-size: 30px;
    margin-left: 50px;
    border-radius: 15px;
    z-index:  1;
  }

  .container { 
    height: 100px;
    position: relative;
    margin-top: 10px;
    margin-left: 50px;
    /* border: 3px solid green;  */
    border-radius: 5%;
    z-index:  1;
  }

  .center {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-10%, -10%);
    transform: translate(-10%, -10%);
  }


  @keyframes foo { 
    0%   { content: url('../softlieser/BalkenLiRe.jpg'); } 
    25%  { content: url('../softlieser/BalkenLiReOver1.jpg'); } 
    50%  { content: url('../softlieser/BalkenLiReOver2.jpg'); } 
    75%  { content: url('../softlieser/BalkenLiReOver3.jpg'); } 
    100% { content: url('../softlieser/BalkenLiReOver4.jpg'); } 
  } 
   
  .bar { 
    animation-name: foo; 
    animation-duration: 1s; 
    animation-iteration-count: infinite; 
    max-height: 100%; 
    /* max-width: 90vw;  */
  } 

  .barAus { 
    src: url('../softlieser/BalkenLiRe.jpg');
 
    max-height: 100%; 
    /* max-width: 90vw;  */
  }