.custom-tab {
    background: none;
    border: none;
    color: #12407A;
    font-size: 1rem;
    font-weight: 500;
    padding: 0.5rem 1rem;
    margin: 0 0.5rem;
    cursor: pointer;
    position: relative;
}

.custom-tab:hover {
    color: #0d3a68;
}

.custom-tab.active::after {
    content: '';
    position: absolute;
    bottom: 3px; /* oder 2px oder 1px */
    left: 10%;
    width: 80%;
    height: 2px;
    background-color: white;
}

.zeugnis-tabs .nav-link {
    color: black !important;
    font-size: 1rem;
    font-weight: 500;
    border: none !important;
    background: transparent !important;
    margin: 0 0.5rem;
    transition: color 0.2s ease;
}

.zeugnis-tabs .nav-link.active {
    font-weight: 700;
}

.tab-pane {
    display: none;
}

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

@media (max-width: 768px) {
    .card {
        margin-top: -25rem; /* Weniger Abstand auf kleinen Bildschirmen */
    }
    .zeugnis-tabs .nav-link {
        margin: 0 0.15rem; /* Weniger horizontaler Abstand */
        padding: 0.3rem 0.4rem;
        font-size: 0.9rem;
    }

    .zeugnis-tabs {
        gap: 0.2rem !important; /* Nur falls du Flex-Gap verwendest */
    }
}