@layer dark-mode {
    /**
     * Ersetzt Farben, Rahmen usw. aus den Standard-Stylesheets
     * für den Dark-Mode.
     */

    @media (prefers-color-scheme: dark) {
        :root {
            /* Hintergrundfarben für die Buttons "nach oben" sowie für sonstige Buttons in main.
               Entspricht var(--color-accent). */
            --button-bg-color: hsl(28, 90%, 55%);
            /* Bei hover etwas heller */
            --button-hover-bg-color: hsl(28, 100%, 62%);
            /* Im Moment des Anklickens etwas intensiver */
            --button-active-bg-color: hsl(28, 100%, 45%);

            /* Hintergrundfarbe für den Menü-Button in der schmalen Ansicht im Header.
               Die Farben entsprechen den Farben von Buttons im Inhalt (siehe --button-bg-color usw. für Buttons nach oben).
               Entspricht var(--color-accent). */
            --menu-button-bg-color: hsl(28, 90%, 55%);
            /* Etwas intensivere Farbe beim Hovern */
            --menu-button-hover-bg-color: hsl(28, 100%, 62%);
            /* Noch intensivere Farbe im Moment des Anklickens */
            --menu-button-active-bg-color: hsl(28, 100%, 45%);

            --color-primary: hsl(220, 12%, 16%);
            --color-secondary: hsl(220, 10%, 18%);
            --color-accent: hsl(28, 90%, 55%);

            --body-background-color: hsl(220, 13%, 12%);
            --page-text-color: hsl(0, 0%, 90%);

            --link-color: hsl(28, 90%, 65%);
            --visited-link-color: hsl(28, 60%, 50%);
            --hovered-link-color: hsl(28, 100%, 72%);
            --active-link-color: hsl(28, 100%, 40%);

            --menu-rootline-current-link-color: var(--link-color);
            --menu-active-link-color: var(--active-link-color);

            --mobile-nav-bg-color: hsl(220, 10%, 16%);
            --mobile-nav-li-border-color-1: rgba(255, 255, 255, 0.05);
            --mobile-nav-li-border-color-2: rgba(255, 255, 255, 0.1);
            --mobile-nav-li-border-color-3: rgba(255, 255, 255, 0.2);
            --mobile-nav-li-border-color-light: rgba(255, 255, 255, 0.07);
            --mobile-nav-link-hover-bg-color: rgba(255, 255, 255, 0.04);
            --mobile-nav-text-color: hsl(0, 0%, 95%);
            --mobile-nav-back-button-bg-color: hsl(220, 10%, 30%);
            --mobile-nav-back-button-hover-bg-color: hsl(220, 10%, 38%);
            --mobile-nav-back-focus-visible-color: hsl(220, 10%, 50%);
            --mobile-nav-sub-heading-text-color: hsl(0, 0%, 90%);
            --mobile-nav-sub-heading-bg-color: hsl(220, 10%, 22%);

            --header-box-shadow: transparent;
            --header-homepage-link-text-color: hsl(0, 0%, 92%);

            --main-nav-bg-color: hsl(220, 11%, 14%);
            --main-nav-text-color: hsl(0, 0%, 95%);
            --main-nav-hover-bg-color: hsl(220, 11%, 18%);
            --main-nav-rootline-color: hsl(0, 0%, 70%);

            --side-nav-bg-color: hsl(220, 11%, 14%);
            --side-nav-a-hover-bg-color: rgba(255, 255, 255, 0.05);
            --side-nav-rootline-link-color: hsl(0, 0%, 60%);
            --side-nav-rootline-current-link-color: var(--page-text-color);
            --side-nav-rootline-current-page-bg-color: hsl(32, 100%, 45%);
            --side-nav-rootline-current-page-hover-bg-color: hsl(28, 100%, 62%);

            --main-headline-accent-color: hsl(28, 90%, 65%);
            --main-table-head-background-color: hsl(220, 10%, 30%);
            --main-table-bg-zebra-color: hsl(220, 10%, 20%);

            --button-text-color: var(--page-text-color);

            --footer-text-color: hsl(0, 0%, 75%);
            --footer-hovered-link-color: hsl(28, 80%, 65%);
            --footer-active-link-color: hsl(28, 80%, 50%);
        }
    }
}