/* Styles für horizontale Tabs */

/* Style the tab row */
.horTab {
}
/*
  border: 1px solid #ccc;
  background-color: #f1f1f1;
*/

/* Style the buttons inside the tab */
.horTab button {
  background-color:#f1f1f1;
  font-size:90%;
  float: left;
  border: 1px solid #888888;
  border-radius: 15px 15px 0px 0px;
  cursor: pointer;
  padding: 8px 0px;
  width: 8em;
  text-align: center;
  transition: 0.3s;
}

/* Change background color of buttons on hover */
.horTab button:hover {
  background-color: #ddd;
}

/* Create an active/current tablink class */
.horTab button.active {
  background-color: #ccc;
}

/* Style the tab content */
.horTabcontent {
  display: none;
  padding: 6px 0px;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  animation: fadeEffect 1s; /* Fading effect takes 1 second */
}

/* Go from zero to full opacity */
@keyframes fadeEffect {
  from {opacity: 0;}
  to {opacity: 1;}
}