/* ============================================================
   DARKMODE - UMSCHALTER
   ============================================================ */

.kopfzeile-aktionen {
    display: flex;
    align-items: center;
    gap: 10px;
}

.darkmode-umschalter {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;
    flex-shrink: 0;

    padding: 0;

    font-size: 1.05rem;
    line-height: 1;
    cursor: pointer;

    color: var(--farbe-text);
    background-color: transparent;

    border: 1px solid var(--farbe-rahmen);
    border-radius: 999px;

    transition:
        background-color 0.15s ease,
        border-color 0.15s ease;
}

.darkmode-umschalter:hover {
    background-color: var(--farbe-oberflaeche-hover);
    border-color: var(--farbe-rahmen-stark);
}

.darkmode-symbol-dunkel {
    display: none;
}

/* Ohne gespeicherte manuelle Wahl richtet sich das Symbol nach der
   Systemeinstellung. */
@media (prefers-color-scheme: dark) {

    :root:not([data-theme="light"]) .darkmode-symbol-hell {
        display: none;
    }

    :root:not([data-theme="light"]) .darkmode-symbol-dunkel {
        display: inline;
    }
}

/* Manuelle Wahl hat immer Vorrang. */
:root[data-theme="dark"] .darkmode-symbol-hell {
    display: none;
}

:root[data-theme="dark"] .darkmode-symbol-dunkel {
    display: inline;
}

:root[data-theme="light"] .darkmode-symbol-hell {
    display: inline;
}

:root[data-theme="light"] .darkmode-symbol-dunkel {
    display: none;
}