/* Grundlegendes Styling für den Schalter der komplette schalter bereich*/
.switch {
    display: flex;
    position: relative;
    background-color: var(--e-global-color-primary);
    /* Temporäre Farbe, um die Position zu sehen */
    margin-left: auto;
    /* Positioniere den Schalter nach rechts */
}

.switch input {
    display: none;
}

.switch label {
    width: 35px;
    /* Breite des Schalters */
    height: 20px;
    /* Höhe des Schalters */
    background-color: var(--e-global-color-primary);
    /* Der Hintergrund */
    border-radius: 50px;
    /* Abgerundete Ecken */
    position: relative;
    cursor: pointer;
    border: 2px solid var(--e-global-color-text);
    /* Füge hier eine Border hinzu (2px, graue Farbe) */
    /* transition: background-color 0.3s ease; */
}

.switch label::before {
    content: "";
    width: 12px;
    /* Breite des inneren Kreises */
    height: 12px;
    /* Höhe des inneren Kreises */
    background-color: var(--e-global-color-text);
    border-radius: 50%;
    position: absolute;
    top: 2px;
    /* Abstand oben */
    left: 2px;
    /* Abstand links */
    transition: transform 0.3s ease, background-color 0.3s ease;
}

/* Schalter im Dark Mode */
.switch input:checked+label {
    background-color: var(--e-global-color-primary);
}

.switch input:checked+label::before {
    transform: translateX(15px);
}

/* Für größere Bildschirme (z.B. Desktops) */
@media (min-width: 1025px) {
    .switch label {
        width: 35px;
        /* Der Standardwert */
        height: 20px;
    }

    .switch label::before {
        width: 12px;
        height: 12px;
    }
    
    .switch input:checked+label::before {
        transform: translateX(15px);
    }
}

/* Für mittelgroße Bildschirme (z.B. Tablets) */
@media (min-width: 768px) and (max-width: 1024px) {
    .switch label {
        width: 30px;
        /* Etwas größer als auf kleinen Bildschirmen */
        height: 17px;
    }

    .switch label::before {
        width: 9px;
        height: 9px;
    }

    .switch input:checked+label::before {
        transform: translateX(13px);
    }
}

/* Für kleine Bildschirme (z.B. Smartphones) */
@media (max-width: 767px) {
    .switch label {
        width: 27px;
        /* Der Standardwert */
        height: 16px;
    }

    .switch label::before {
        width: 8px;
        height: 8px;
    }
    
    .switch input:checked+label::before {
        transform: translateX(11px);
    }
}