.tabs {
display: flex;
flex-wrap: wrap;
width: 100%;
}

.tabs .tab {
height: 0;
opacity: 0;
visibility: hidden;
overflow: hidden;
transition: height 0.4s ease, opacity 0.4s ease;
}

.tabs .tab.active {
height: auto;
opacity: 1;
visibility: visible;
overflow: visible;
}

.tabs label {
order: 1;
display: flex;
justify-content: center;
cursor: pointer;
font-weight: 800;
padding-bottom: 1vw;
margin-left: 2.2vw;
opacity: 0.5;
transition: opacity 0.3s ease;
}

.tabs label:not(:first-of-type) {
border-left: 1px solid #503d2f;
padding-left: 1.75vw;
}

.tabs input[type="radio"] {
display: none;
}

.tabs input[type="radio"]:checked + label {
opacity: 1;
}

.tab-line {
width: 100%;
height: 1px;
background-color: #503d2f;
}
/* neuer Container für den Tab-Inhalt */
.tabs .tab {
order: 2;
width: 100%;
/*border-top: 1px solid #503d2f;*/
opacity: 0;
visibility: hidden;
height: 0;
overflow: hidden;
transition: opacity 0.5s ease, visibility 0.5s ease, height 0.5s ease;
}

.tabs input[type="radio"]:checked + label + .tab {
opacity: 1;
visibility: visible;
height: auto;
overflow: visible;
}

.tabbox-a {
position: relative;
padding-left: 2.2vw;
padding-top: 2vw;
}

.tabbox-a::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 1px;
height: 100%;
background: linear-gradient(to bottom, #503d2f, #c2bbb6);
}

.tabbox-b {
width: 100%;
}

.tabbox-c {
float: left;
clear: both;
margin-top: 3vw;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}

.tabbox-c-a {
float: left;
font-weight: 800;
position: relative;
}

.tabbox-c-b {
width: 6.822916666666666vw;
height: 2.65625vw;
margin-left: 2.65625vw;
float: left;
position: relative;
}

.taba {
width: 90%;
float: left;
}



@media screen and (max-width: 1440px) {
.tabbox-c-b {
width: 6.944444444444445vw;
height: 2.682590277777778vw;
}
}

@media screen and (max-width: 1024px) {
.tabbox-a {
padding-left: 3.2vw;
padding-top: 3vw;
}
.tabbox-c-b {
width: 10.7421875vw;
height: 4.149638671875vw;
margin-left: 3.656vw;
}
.tabs label {
margin-left: 3.2vw;
}
.tabs label:not(:first-of-type) {
padding-left: 2.9vw;
}
.tabbox-c {
margin-top: 5vw;
}
}

@media screen and (max-width: 834px) {
}

@media screen and (max-width: 500px) {
.tab-line {
display: none;
}
.tabbox-c {
margin-top: 10vw;
}
.tabbox-c-b {
width: 27.27272727272727vw;
height: 10.535272727272728vw;
margin-left: 10vw;
}
.tabs .tab {
border-top:  none;
}
.tabbox-a {
padding-left: 0vw;
padding-top: 5vw;
}
.tabbox-a::before {
background: none;
}
.taba {
width: 100%;
margin-top: 0vw;
}
.tabs label:not(:first-of-type) {
padding-left: 5vw;
}
.tabs label {
padding-top: 2.5vw;
padding-right: 6vw;
padding-left: 5vw;
padding-bottom: 2.5vw;
border-left: 0px;
color: rgba(194,187,182,1.00);
background-color: #503d2f;
margin-bottom: 5px;
border-top-left-radius: 50px;
border-bottom-left-radius: 0px;
border-top-right-radius: 50px;
border-bottom-right-radius: 50px;
margin-left: 0px;
transition: all ease-out .3s;
}
}