@charset "UTF-8";

/*****************************************************
F O O T E R 
******************************************************/

footer {
  position:             fixed;
  top:                  calc(100vh - 100px);
  border:               0px;
  margin:               0px;
  padding:              0px;
  width:                100%;
  height:               100px;
  z-index:              10;
  background-color:     var(--col-li);
  display:              none;
}

.footer-name {
  position:             relative;
  float:                left;
  width:                calc(100% - 20px);
  height:               20px;
  margin:               0px;
  padding:              0px 10px;
  font-family:          'Oswald', sans-serif;
  font-size:            12px;
  font-weight:          200;
  color:                var(--col-main);
  text-align:           right;
}
.footer-btn-a, .footer-btn-p {
  position:             relative;
  float:                left;
  width:                20%;
  height:               calc(100% - 5px);
  padding:              0px;
  border-top:           5px solid var(--col-dis);
}
.footer-btn-a {
  border-top:           5px solid var(--col-red);
}

.footer-btn, .footer-btn-red, .footer-btn-dis {
  width:                100%;
  height:               100%;
  font-family:          'Oswald', sans-serif;
  font-size:            12px;
  font-weight:          400;
  line-height:          1.5;  
  cursor:               pointer;
  border:               0px;
  background-color:     transparent;
  color:                var(--col-text);
  overflow:             hidden;
  padding:              0px;
  white-space:          nowrap;
  text-align:           center;
}
.footer-btn-red {
  color:                var(--col-red2); 
}
.footer-btn-dis {
  color:                var(--col-dis); 
}

.footer-img {
  margin-top:           10px;
  width:                30px;
  cursor:               pointer;
  fill:                 var(--col-line);
}

.footer-btn-red a {
  color:               var(--col-red2);
}
.footer-btn-dis a {
  color:               var(--col-text);
}
footer a:hover {
  color:               var(--col-red2);
}






/**********************************************************
 HANDY GRÖßE
***********************************************************/

@media(max-width:400px) {
  footer {display: block;}
}