/* Allgemeine Stile */
.tab-container {
    position: relative;
}

.tabs {
    display: flex;
    flex-wrap: wrap; /* Erlaubt Umbruch in eine neue Zeile */
    background-color: transparent;
    padding: 0;
    margin: 0;
    list-style: none;
    justify-content: flex-start;
    gap: 5px; /* Optional: Abstand zwischen Tabs */
}

.tab-button {
    flex: none;
    padding: 10px 20px;
    background-color: #f9f9f9;
    border: 1px solid #ccc;
    border-bottom: none; /* Kein Rand unten, um aktive Karte optisch zu verbinden */
    cursor: pointer;
    text-align: center;
    font-weight: bold;
    color: #333;
    transition: background-color 0.3s, color 0.3s, border 0.3s;
    position: relative;
    z-index: 1; /* Tabs bleiben im Vordergrund */
}

.tab-button.active {
    background-color: #fff; /* Aktive Karte hebt sich ab */
    color: #006068; /* Grüner Text für aktiven Tab */
    z-index: 2; /* Aktive Karte steht noch weiter im Vordergrund */
}

.tab-button:hover {
    background-color: #e9e9e9;
    color: #006068;
}

.tab-content {
    position: relative;
    border: 1px solid #ccc;
    border-radius: 0 8px 8px 8px; /* Abgerundete Ecken nur unten */
    background-color: #fff;
    padding: 20px;
    margin-top: -1px; /* Verbindung zur aktiven Karte */
    z-index: 1;
}

.tab-panel {
    display: none;
}

.tab-panel.active {
    display: block;
}

/* Text- und Bildcontainer */
.acontent {
    display: flex;
    flex-direction: row; /* Text und Bild nebeneinander */
    justify-content: space-between; /* Text und Bild verteilen */
    align-items: flex-start; /* Sicherstellen, dass der Text oben bleibt */
    position: relative; /* Wichtig, um den Button absolut zu positionieren */
    gap: 20px; /* Abstand zwischen Text und Bild */
}

.text-buttons {
    flex: 1; /* Text nimmt Hälfte der Breite ein */
    padding: 20px;
    display: flex;
    flex-direction: column; /* Text und Button untereinander */
    justify-content: space-between; /* Button bleibt unten */
    position: relative;
}

.btn-contentswitch {
    margin-top: 10px;
}

.image {
    flex: 1; /* Bild nimmt Hälfte der Breite ein */
    text-align: center;
}

.image img {
    max-width: 100%;
    border-radius: 8px;
}

/* Responsive Design */
@media (max-width: 768px) {
    .acontent {
        flex-direction: column; /* Text und Bild untereinander */
        gap: 0; /* Abstand zurücksetzen */
    }

    .text-buttons {
        padding-bottom: 20px; /* Abstand zum Bild hinzufügen */
    }

    .text-buttons button {
        margin-top: 20px; /* Abstand zwischen Text und Button vergrößern */
    }
}