:root {
    /* ==================================================
       ZENTRALE FARBSTEUERUNG

       Hier werden die Farben des gesamten Projekts
       zentral festgelegt.

       Beispiele für Farbwerte:

       Schwarz:       #000000
       Dunkelgrau:    #222222
       Grau:          #666666
       Hellgrau:      #f5f5f5
       Weiß:          #ffffff

       Kurzschreibweise ist ebenfalls möglich:

       #222222 = #222
       #ffffff = #fff

       Beispiel Projektfarbe Grün:
       #2ab488

       Beispiel Projektfarbe Blau:
       #2563eb

       Beispiel Projektfarbe Rot:
       #c62828

       Nach Änderungen ggf. Browser mit Strg + F5
       vollständig neu laden.
    ================================================== */


    /* --------------------------------------------------
       Hauptfarbe

       Allgemeine Akzentfarbe des Projekts.
       Kann z. B. für besondere Elemente, Icons oder
       weitere Komponenten verwendet werden.
    -------------------------------------------------- */

    --color-primary: #555;
    --color-primary-hover: #333;


    /* --------------------------------------------------
       Texte

       color-text:
       Normale Texte und Überschriften.

       color-text-muted:
       Weniger wichtige Texte, Hinweise, Copyright usw.
    -------------------------------------------------- */

    --color-text: #222;
    --color-text-muted: #666;


    /* --------------------------------------------------
       Hintergründe

       color-background:
       Normaler Seitenhintergrund.

       color-background-light:
       Heller abgesetzte Bereiche.

       hero-background:
       Hintergrund des großen Hero-Bereichs.
    -------------------------------------------------- */

    --color-background: #fff;
    --color-background-light: #f5f5f5;

    --hero-background: #f5f5f5;


    /* --------------------------------------------------
       Linien

       Wird für Rahmen und Trennlinien verwendet,
       z. B. Header, Footer und Formularfelder.
    -------------------------------------------------- */

    --color-border: #ddd;


    /* --------------------------------------------------
       Buttons

       button-background:
       Normale Hintergrundfarbe.

       button-background-hover:
       Farbe beim Darüberfahren mit der Maus.

       button-color:
       Schriftfarbe im Button.
    -------------------------------------------------- */

    --button-background: #555;
    --button-background-hover: #333;
    --button-color: #fff;


    /* --------------------------------------------------
       Navigation

       nav-color:
       Normale Menüpunkte.

       nav-hover-color:
       Schriftfarbe beim Darüberfahren.

       nav-hover-background:
       Hintergrund beim Darüberfahren.

       nav-active-color:
       Schriftfarbe der aktuell geöffneten Seite.

       nav-active-background:
       Hintergrund der aktuell geöffneten Seite.
    -------------------------------------------------- */

    --nav-color: #555;

    --nav-hover-color: #222;
    --nav-hover-background: #f2f2f2;

    --nav-active-color: #222;
    --nav-active-background: #e8e8e8;


    /* --------------------------------------------------
       Footer

       footer-background:
       Hintergrund des Footers.

       footer-color:
       Normale Schriftfarbe im Footer.
    -------------------------------------------------- */

    --footer-background: #f5f5f5;
    --footer-color: #222;
}