/************************************************
Table Filter Stufe
************************************************/
#TFBtnContainerStufe {}
#TFBtnContainerKursart {}
#TFBtnContainerIntensitaet {}
#TFBtnContainerZeit {}

.TFcontainer {overflow: hidden;}
.TFfilterDiv {display: none;} /* Hidden by default */

/* The "show" class is added to the filtered elements */
.show {display: table-row;}


.TFrow {padding: 1vw;}

/* Style the buttons */
.TFbtn {
  border: 2px solid var(--beneblue);
  border-radius: 3vw;
  padding: 0.5vw 2vw;
  margin: 6px 0.6vw 6px 0.6vw;
  font-family: "Avenir Next", sans-serif;
  font-weight: bold;
  font-size: 1.4vw;
  text-align: center;
  height: 5vw;
  min-width: 11%;
  max-width: 18%;
  background-color: rgba(255, 255, 255, 1);
  cursor: pointer;
}



/* Add a light grey background on mouse-over */
.TFbtn:hover {background-color: var(--beneblue); color: white;}

/* Add a dark background to the active button */
.TFbtn.active, .TFbtn.activeStufe, .TFbtn.activeKursart, .TFbtn.activeIntensitaet, .TFbtn.activeZeit {
  background-color: var(--beneblue);
  color: white;
  cursor: auto;
}


/************************************************************
Media Queries
************************************************************/

@media (min-width: 1200px) {
  .TFbtn {border-radius: 36px; padding: 6px 24px; margin: 6px 4.8px 6px 4.8px; font-size: 16.8px; height: 60px;}
  .TFrow {padding: 12px;}

}

@media (max-width: 850px) {
  .TFbtn {max-width: 22%; font-size: 1.8vw; height: 6.5vw; border: 1.5px solid var(--beneblue);}
  .TFbtn:first-child {min-width: 6%;}
}

@media (max-width: 667px) {
  .TFbtn {
    font-size: 1.6vw;
    padding: 0.5vw 1.5vw;
    max-width: 25%;
    border: 1px solid var(--beneblue);
    border-radius: 2.5vw;
}

  .TFbtn:first-child {min-width: 6%;}
}