/* ==========================================
    BESONDERE_SACHKUNDE.CSS (Seitenspezifisch)
    ========================================== */

/* ------------------------------------------
   1. Responsive Overlay-Steuerung
   ------------------------------------------ */

/* Standard: PC-Layout sichtbar, Handy-Overlay aus */
#Handy_overlay {
    display: none;
}

#PC_Overlay {
    display: block;
}

/* Mobile-Layout (<= 700px) */
@media (max-width: 700px) {
    #Handy_overlay {
        display: block;
    }

    #PC_Overlay {
        display: none;
    }

    #Inhalt_Handy_Quali {
        color: green;
    }
}

/* ------------------------------------------
   2. PC-Inhaltsbereich (Besondere Sachkunde) (> 700px)
   ------------------------------------------ */
@media (min-width: 701px) {
    /* Effekt für die Hauptnavigation (einzelner Strich aus der Mitte) */
.nav-links-table a {
    position: relative;
    display: inline-block;
    padding-bottom: 4px;
    text-decoration: none;
    transition: color 0.3s ease;
}

.nav-links-table a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;                    /* Startet genau in der Mitte */
    width: 0;
    height: clamp(0.1rem, 0.18vw, 0.4rem);
    transform: translateX(-50%);  /* Zentriert den Strich */
    transition: width 0.3s ease-in-out;
}

/* Farbe für Oranges Hover-Menü */
.nav-link-effekt-orange::after {
    background-color: rgb(255, 127, 0);
}

/* Hover-Zustand: wächst gleichmäßig von der Mitte nach links und rechts */
.nav-links-table a:hover::after {
    width: 100%;
}
    /* Liste ohne Aufzählungszeichen */
    .quali-list {
        list-style: none !important; /* Entfernt die Punkte */
        list-style-type: none !important;
        padding-left: 0 !important;   /* Entfernt den linken Einzug */
        margin-left: 0 !important;
    }

    /* Container & Überschrift */
    .quali-content {
        width: 85%;          /* 85% Breite, damit es rechts nicht übersteht */
        margin-left: 10%;    /* 5% + 5% nach rechts gerückt */
        margin-top: 3%;
        margin-bottom: 5%;
    }

    .quali-title {
        color: rgb(50, 59, 147); /* Blau aus dem Design für Besondere Sachkunde */
        font-size: clamp(1.5rem, 2.2vw, 3rem);
        margin-bottom: 2rem;
        font-weight: bold;
    }

    /* Link-Styling & doppelter Linien-Effekt */
    .quali-list a {
        color: rgb(50, 59, 147); /* Blauer Farbton für die Links */
        text-decoration: none;
        font-size: clamp(1.1rem, 2vw, 18rem);
        position: relative;
        display: inline-block;
        padding-top: 6px;
        padding-bottom: 6px;
        transition: color 0.3s ease;
    }

    /* Abstand zwischen den einzelnen Listenpunkten */
    .quali-list li {
        margin-bottom: 2.5rem; 
    }

    /* Gemeinsame Eigenschaften für beide Striche */
    .quali-list a::before,
    .quali-list a::after {
        content: '';
        position: absolute;
        width: 0;
        height: clamp(0.1rem, 0.18vw, 0.4rem);
        background-color: rgb(50, 59, 147); /* Blauer Strich-Effekt beim Hover */
        transition: width 0.4s ease-in-out;
    }

    /* 1. Oberer Strich: Startet oben rechts und wächst nach links */
    .quali-list a::before {
        top: 0;
        right: 0;
    }

    /* 2. Unterer Strich: Startet unten links und wächst nach rechts */
    .quali-list a::after {
        bottom: 0;
        left: 0;
    }

    /* Hover-Zustand: Beide Striche dehnen sich auf 100% aus */
    .quali-list a:hover::before,
    .quali-list a:hover::after {
        width: 100%;
    }

    /* Textfarbe beim Hover */
    .quali-list a:hover {
        color: rgb(50, 59, 147);
    }
}