.theme-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.theme-icon {
    width: 1rem;
    height: 1rem;
}

/* Grundsätzlich müssen beide Icons versteckt sein, dann später dynamisch das eine oder andere einblenden */
.theme-icon-light,
.theme-icon-dark {
    display: none;
}

/* ==============================
   Light Mode
   ============================== */

/* Light Mode: Sonne anzeigen */
[data-bs-theme="light"] .theme-icon-light {
    display: inline-block;

    /* VIEL RUMGESPIELT, AKTUELL MIT GPT GEMACHT */
    filter: brightness(0) saturate(100%) invert(63%) sepia(96%) saturate(928%) hue-rotate(359deg) brightness(101%) contrast(102%);
}

/* Light Mode Hover: Button abdunkeln */
[data-bs-theme="light"] .theme-toggle-btn:hover,
[data-bs-theme="light"] .theme-toggle-btn:focus-visible {
    background-color: #495057;
    border-color: #495057;
}

/* Light Mode Hover: Sonne ausblenden */
[data-bs-theme="light"] .theme-toggle-btn:hover .theme-icon-light,
[data-bs-theme="light"] .theme-toggle-btn:focus-visible .theme-icon-light {
    display: none;
}

/* Light Mode Hover: Mond weiß anzeigen */
[data-bs-theme="light"] .theme-toggle-btn:hover .theme-icon-dark,
[data-bs-theme="light"] .theme-toggle-btn:focus-visible .theme-icon-dark {
    display: inline-block;
    filter: brightness(0) invert(1);
}

/* ==============================
   Dark Mode
   ============================== */

/* Dark Mode: Mond hell anzeigen */
[data-bs-theme="dark"] .theme-icon-dark {
    display: inline-block;
    filter: brightness(0) invert(1);
}

/* Dark Mode Hover: Mond ausblenden */
[data-bs-theme="dark"] .theme-toggle-btn:hover .theme-icon-dark,
[data-bs-theme="dark"] .theme-toggle-btn:focus-visible .theme-icon-dark {
    display: none;
}

/* Dark Mode Hover: Sonne gelb anzeigen */
[data-bs-theme="dark"] .theme-toggle-btn:hover .theme-icon-light,
[data-bs-theme="dark"] .theme-toggle-btn:focus-visible .theme-icon-light {
    display: inline-block;
    /* VIEL RUMGESPIELT, AKTUELL MIT GPT GEMACHT */
    filter: brightness(0) saturate(100%) invert(78%) sepia(82%) saturate(731%) hue-rotate(359deg) brightness(103%) contrast(104%);
}