/* Kalender Tab-System */

.porktabs input[type=radio] {
         position: absolute;
          display: none; /* blendet die Radio-Punkte aus, die wir nicht brauchen */
}

.porktabs {
	width: 800px;
	float: left;
	list-style: none;
	position: relative;
	padding: 0;
	
	margin: auto;
	height: 150px;
	 
}

.porktabs li{
       float: left; /* entweder rechts oder links */
}

.porktabs label {
	
	   color: var(--links); font-size: 15px; font-weight: 900; line-height: 15px;
	display: block;
	cursor: pointer;
	position: relative;
padding-top: 15px;
	left: 0 !important;
float: left; width: 100px;
	height: 20px !important;

text-align: center;
	
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
}

.porktabs label:hover {
	
	color: var(--fontlight) !important;
	top: 0;
}

.porktabs [type=radio]:checked ~ label {
 /* Defintion des ausgewählten Feldes */
       
	background-image:url(https://abload.de/img/tob_outmpkxl.png) !important;
       color: var(--light) !important;
       top: 0;
}

.porktabs [type=radio]:checked ~ label ~ .porktab-content {
         display: block;
}

.porktab-content{
 /* Hier wird des ganz normale Inhalt des Tabs definiert wie Schrift, Farbe, Zeilenhöhe etc */
	 width: 780px; height: 70px; font-weight: 600; font-size: 11.5px; color: var(--fontdark); text-transform: justify; padding-left: 15px; padding-right: 15px; text-align: justify; hyphens: auto; white-space: pre-line; overflow: auto; line-height: 12px;
       z-index: 2;
       display: none;
       
       
    margin-top: 40px;
     /*Höhe (muss ca 50px kleiner sein als bei .tabs vorgegeben und Overflow sollten definiert werden, da ansonsten überschüssiger Text verschluckt wird */
       
      
      
	
       position: absolute;
      
       left: 0;
       box-sizing: border-box;
       -webkit-animation-duration: 0.5s;
       -o-animation-duration: 0.5s;
       -moz-animation-duration: 0.5s;
       animation-duration: 0.5s;
}