.tab {
      background-color: #000;
      padding:  8px;
	  margin: 0px 0px;
      border-bottom: 0px solid #ccc;
      text-align: center;
      white-space: nowrap;
      overflow-x: auto;
    }

   .tab button {
      background-color: #333;
      color: #fff;
      border: 1px solid #ccc;
      margin: 7px 2px;
      padding: 5px 10px;
      font-size: 20px;
	   font-weight: normal;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      border-radius: 5px;
      display: inline-block;
      cursor: pointer;
      white-space: nowrap;

      position: relative;
      top: 0;
      left: 0;
      box-shadow: 1px 1px 0px #bbb;
      transition: all 0.4s ease-in-out;
    }

    .tab button:hover {
      background-color: #888;
	  
		font-weight: normal;
      transform: translateY(0px);
    }

    .tab button.active {
      background-color: #eee;
      color: #000;
      font-weight: normal;
      box-shadow: 0px 0px 0px #666;
      top:  2px;
      left:  2px;
      z-index: 1;
    }
 
/* Klick-Feedback */
.tab button:active {
  box-shadow: 6px 0px 0px #666;
      top:  2px;
      left:  2px;
}

.tabcontent {
  display: none;
  animation: fadeEffect 0.6s ease-in-out; 
  border-top: none;
  border-bottom: none;
  
 /* overflow-y: auto; */
  overflow-x: hidden; 
}

@keyframes fadeEffect {
  from { opacity: 0; }
  to { opacity: 1; }
}