:root { 
 --gc-weiss:    #ffffff;

 --gc-gruen1:   #baf0af; --gc-gruen2:   #addea3; --gc-gruen3:   #9acb90; --gc-gruen4:   #87b87f; --gc-gruen5:   #629b58; --gc-gruen6:   #578a4e;
 --gc-grau1:    #e3f3fc; --gc-grau2:    #d3e2eb; --gc-grau3:    #c0cfd7; --gc-grau4:    #abbac3; --gc-grau5:    #8b9aa3; --gc-grau6:    #7c8991;
 --gc-gelb1:    #fff8d0; --gc-gelb2:    #fff4b6; --gc-gelb3:    #fff097; --gc-gelb4:    #fee188; --gc-gelb5:    #f7d05b; --gc-gelb6:    #e6c155; --gc-gelb7: #e1b737;
 --gc-magenta1: #ffb4ce; --gc-magenta2: #ff82ae; --gc-magenta3: #eb5d90; --gc-magenta4: #d6487e; --gc-magenta5: #b73766; --gc-magenta6: #a6325c;
 --gc-blau1:    #c4eaff; --gc-blau2:    #a0deff; --gc-blau3:    #83c7f5; --gc-blau4:    #6fb3e0; --gc-blau5:    #4f99c6; --gc-blau6:    #488bb5; 
 --gc-rot1:     #ffb8aa; --gc-rot2:     #ff8e78; --gc-rot3:     #e76d57; --gc-rot4:     #d15b47; --gc-rot5:     #b74635; --gc-rot6:     #a64030;
 --gc-orange1:  #ffe0b5; --gc-orange2:  #ffcd88; --gc-orange3:  #ffbc5e; --gc-orange4:  #ffaa33; --gc-orange5:  #eb9c2f; --gc-orange6:  #d9912b; 

 --gc-cancel1:  #98a7b0; --gc-cancel2:  #86949c;
 --gc-default1: #abbac3; --gc-default2: #8b9aa3;
 --gc-warning1: #ffaa33; --gc-warning2: #eb9c2f;
 --gc-info1:    #3a96ec; --gc-info2:    #368ad9;  
 --gc-danger1:  #f75644; --gc-danger2:  #e35040;
 --gc-success1: #45bd32; --gc-success2: #3ca82c;
}


/* ======================================================== */
/* Standard-Buttons in FSTab-Listen                         */
/* ======================================================== */

.btn { border-radius: 7px; }

.btn-cancel, .btn-cancel:focus { background-color: var(--gc-cancel1) !important; border-color: var(--gc-cancel1); color: white !important; }
.btn-cancel:hover, .open .btn-cancel.dropdown-toggle  { background-color: var(--gc-cancel2) !important; border-color: var(--gc-cancel1); color: white !important; }

.btn-default, .btn-default:focus { background-color: var(--gc-default1) !important; border-color: var(--gc-default1); color: white !important; }
.btn-default:hover, .open .btn-default.dropdown-toggle  { background-color: var(--gc-default2) !important; border-color: var(--gc-default1); color: white !important; }

.btn-info, .btn-info:focus { background-color: var(--gc-info1) !important; border-color: var(--gc-info1); color: white !important; }
.btn-info:hover, .open .btn-info.dropdown-toggle { background-color: var(--gc-info2) !important;  border-color: var(--gc-info1); color: white !important; }

.btn-success, .btn-success:focus { background-color: var(--gc-success1) !important; border-color: var(--gc-success1); color: white !important; } 
.btn-success:hover, .open .btn-success.dropdown-toggle { background-color: var(--gc-success2) !important; border-color: var(--gc-success1); color: white !important; }

.btn-warning, .btn-warning:focus { background-color: var(--gc-warning1) !important; border-color: var(--gc-warning1); color: white !important; }
.btn-warning:hover, .open .btn-warning.dropdown-toggle { background-color: var(--gc-warning2) !important; border-color: var(--gc-warning1); color: white !important; }

.btn-danger, .btn-danger:focus { background-color: var(--gc-danger1) !important; border-color: var(--gc-danger1); color: white !important; }
.btn-danger:hover,.open .btn-danger.dropdown-toggle { background-color: var(--gc-danger2) !important; border-color: var(--gc-danger1); color: white !important; }

.btn-pink, .btn-pink:focus { background-color: var(--gc-magenta4) !important; border-color: var(--gc-magenta4); color: white !important; }
.btn-pink:hover, .open .btn-pink.dropdown-toggle { background-color: var(--gc-magenta5) !important; border-color: var(--gc-magenta4); color: white !important; }

.btn-grey, .btn-grey:focus { background-color: var(--gc-grau5) !important; border-color: var(--gc-grau5); color: white !important; }
.btn-grey:hover, .open .btn-grey.dropdown-toggle { background-color: var(--gc-grau6) !important; border-color: var(--gc-grau5); color: white !important; }

.btn-lhk-empty, .btn-lhk-empty:focus { background-color: var(--gc-blau3) !important; border-color: var(--gc-blau3); color:white; }
.btn-lhk-empty:hover, .open .btn-lhk-empty.dropdown-toggle { background-color: var(--gc-blau4) !important; border-color: var(--gc-blau3); color: white !important; }

.btn-lhk-filled, .btn-lhk-filled:focus { background-color: var(--gc-blau6) !important; border-color: var(--gc-blau6); color:white; }
.btn-lhk-filled:hover, .open .btn-lhk-filled.dropdown-toggle { background-color: var(--gc-blau5) !important; border-color: var(--gc-blau6); color: white !important; }


/* ======================================================== */
/* Funktionsbuttons in Formularen                           */
/* ======================================================== */

.btn-cancel1             { background-color: var(--gc-cancel1) !important; color: var(--gc-weiss) !important; line-height: 36px; font-size: 13px; vertical-align: middle; text-align: center; display:inline-block; border-radius: 16px; border: none; padding: 0px 12px 0px 12px; box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.15) !important; }
.btn-cancel1:hover       { background-color: var(--gc-cancel2) !important; color: var(--gc-weiss) !important; text-decoration: none; }
                        
.btn-default1            { background-color: var(--gc-default1) !important; color: var(--gc-weiss) !important; line-height: 36px; font-size: 13px; vertical-align: middle; text-align: center; display:inline-block; border-radius: 16px; border: none; padding: 0px 12px 0px 12px; box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.15) !important; }
.btn-default1:hover      { background-color: var(--gc-default2) !important; color: var(--gc-weiss) !important; text-decoration: none; }

.btn-success1            { background-color: var(--gc-success1) !important; color: var(--gc-weiss) !important; line-height: 36px; font-size: 13px; vertical-align: middle; text-align: center; display:inline-block; border-radius: 16px; border: none; padding: 0px 12px 0px 12px; box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.15) !important; }
.btn-success1:hover      { background-color: var(--gc-success2) !important; color: var(--gc-weiss) !important; text-decoration: none; }
                         
.btn-info1               { background-color: var(--gc-info1) !important; color: var(--gc-weiss) !important; line-height: 36px; font-size: 13px; vertical-align: middle; text-align: center; display:inline-block; border-radius: 16px; border: none; padding: 0px 12px 0px 12px; box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.15) !important; }
.btn-info1:hover         { background-color: var(--gc-info2) !important; color: var(--gc-weiss) !important; text-decoration: none; }
                         
.btn-warning1            { background-color: var(--gc-warning1) !important; color: var(--gc-weiss) !important; line-height: 36px; font-size: 13px; vertical-align: middle; text-align: center; display:inline-block; border-radius: 16px; border: none; padding: 0px 12px 0px 12px; box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.15) !important; }
.btn-warning1:hover      { background-color: var(--gc-warning2) !important; color: var(--gc-weiss) !important; text-decoration: none; }
                         
.btn-danger1             { background-color: var(--gc-danger1) !important; color: var(--gc-weiss) !important; line-height: 36px; font-size: 13px; vertical-align: middle; text-align: center; display:inline-block; border-radius: 16px; border: none; padding: 0px 12px 0px 12px; box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.15) !important; }
.btn-danger1:hover       { background-color: var(--gc-danger2) !important; color: var(--gc-weiss) !important; text-decoration: none; }
                         
.btn-logout  { vertical-align: middle; text-align: center; display:inline-block; border-radius: 10px; border: none;line-height: 30px; }
.btn-circle32 { width: 32px; height: 32px; border-radius: 16px; text-align:center; padding:0px!important; }
.btn-minier { width: 24px !important; padding: 0px !important; line-height: 18px; border-width: 2px; font-size: 12px; }
.btn-placeholder { width: 24px; display: inline-block; }


/* ======================================================== */
/* Menubuttons 1 = Hauptmenu 2 = Submenu                    */
/* ======================================================== */

.btn-gruen1              { background-color: var(--gc-gruen4) !important; color: var(--gc-weiss); line-height: 42px; font-size: 14px; vertical-align: middle; text-align: center; display:inline-block; border-radius: 10px; border: none; padding: 0px 12px 0px 12px; }
.btn-gruen1:hover        { background-color: var(--gc-gruen5) !important; color: var(--gc-weiss); }
.btn-gruen2              { background-color: var(--gc-gruen5) !important; color: var(--gc-weiss); line-height: 32px; font-size: 12px; vertical-align: middle; text-align: center; display:inline-block; border-radius: 16px; border: none; padding: 0px 12px 0px 12px; box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.15) !important; }
.btn-gruen2:hover        { background-color: var(--gc-gruen6) !important; color: var(--gc-weiss); }
                         
.btn-blau1               { background-color: var(--gc-blau4) !important; color: var(--gc-weiss); line-height: 42px; font-size: 14px; vertical-align: middle; text-align: center; display:inline-block; border-radius: 10px; border: none; padding: 0px 12px 0px 12px; }
.btn-blau1:hover         { background-color: var(--gc-blau5) !important; color: var(--gc-weiss); }
.btn-blau2               { background-color: var(--gc-blau5) !important; color: var(--gc-weiss); line-height: 32px; font-size: 12px; vertical-align: middle; text-align: center; display:inline-block; border-radius: 16px; border: none; padding: 0px 12px 0px 12px; box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.15) !important; }
.btn-blau2:hover         { background-color: var(--gc-blau6) !important; color: var(--gc-weiss); }

.btn-dunkelblau1         { background-color: var(--gc-blau5) !important; color: var(--gc-weiss); line-height: 42px; font-size: 14px; vertical-align: middle; text-align: center; display:inline-block; border-radius: 10px; border: none; padding: 0px 12px 0px 12px; }
.btn-dunkelblau1:hover   { background-color: var(--gc-blau6) !important; color: var(--gc-weiss); }
.btn-dunkelblau2         { background-color: var(--gc-blau5) !important; color: var(--gc-weiss); line-height: 32px; font-size: 12px; vertical-align: middle; text-align: center; display:inline-block; border-radius: 16px; border: none; padding: 0px 12px 0px 12px; box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.15) !important; }
.btn-dunkelblau2:hover   { background-color: var(--gc-blau6) !important; color: var(--gc-weiss); }
                         
.btn-gelb1               { background-color: var(--gc-gelb6) !important; color: var(--gc-weiss); line-height: 42px; font-size: 14px; vertical-align: middle; text-align: center; display:inline-block; border-radius: 10px; border: none; padding: 0px 12px 0px 12px; }
.btn-gelb1:hover         { background-color: var(--gc-gelb7) !important; color: var(--gc-weiss); }
.btn-gelb2               { background-color: var(--gc-gelb5) !important; color: var(--gc-weiss); line-height: 32px; font-size: 12px; vertical-align: middle; text-align: center; display:inline-block; border-radius: 16px; border: none; padding: 0px 12px 0px 12px; box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.15) !important; }
.btn-gelb2:hover         { background-color: var(--gc-gelb6) !important; color: var(--gc-weiss); }
                         
.btn-orange1             { background-color: var(--gc-orange4) !important; color: var(--gc-weiss); line-height: 42px; font-size: 14px; vertical-align: middle; text-align: center; display:inline-block; border-radius: 10px; border: none; padding: 0px 12px 0px 12px; }
.btn-orange1:hover       { background-color: var(--gc-orange5) !important; color: var(--gc-weiss); }
.btn-orange2             { background-color: var(--gc-orange5) !important; color: var(--gc-weiss); line-height: 32px; font-size: 12px; vertical-align: middle; text-align: center; display:inline-block; border-radius: 16px; border: none; padding: 0px 12px 0px 12px; box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.15) !important; }
.btn-orange2:hover       { background-color: var(--gc-orange6) !important; color: var(--gc-weiss); }

.btn-dunkelorange1       { background-color: var(--gc-orange5) !important; color: var(--gc-weiss); line-height: 42px; font-size: 14px; vertical-align: middle; text-align: center; display:inline-block; border-radius: 10px; border: none; padding: 0px 12px 0px 12px; }
.btn-dunkelorange1:hover { background-color: var(--gc-orange6) !important; color: var(--gc-weiss); }
.btn-dunkelorange2       { background-color: var(--gc-orange5) !important; color: var(--gc-weiss); line-height: 32px; font-size: 12px; vertical-align: middle; text-align: center; display:inline-block; border-radius: 16px; border: none; padding: 0px 12px 0px 12px; }
.btn-dunkelorange2:hover { background-color: var(--gc-orange6) !important; color: var(--gc-weiss); }

.btn-rot1                { background-color: var(--gc-rot4) !important; color: var(--gc-weiss); line-height: 42px; font-size: 14px; vertical-align: middle; text-align: center; display:inline-block; border-radius: 10px; border: none; padding: 0px 12px 0px 12px; }
.btn-rot1:hover          { background-color: var(--gc-rot5) !important; color: var(--gc-weiss); }
.btn-rot2                { background-color: var(--gc-rot5) !important; color: var(--gc-weiss); line-height: 32px; font-size: 12px; vertical-align: middle; text-align: center; display:inline-block; border-radius: 16px; border: none; padding: 0px 12px 0px 12px; box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.15) !important; }
.btn-rot2:hover          { background-color: var(--gc-rot6) !important; color: var(--gc-weiss); }
                        
.btn-magenta1            { background-color: var(--gc-magenta4) !important; color: var(--gc-weiss); line-height: 42px; font-size: 14px; vertical-align: middle; text-align: center; display:inline-block; border-radius: 10px; border: none; padding: 0px 12px 0px 12px; }
.btn-magenta1:hover      { background-color: var(--gc-magenta5) !important; color: var(--gc-weiss); }
.btn-magenta2            { background-color: var(--gc-magenta5) !important; color: var(--gc-weiss); line-height: 32px; font-size: 12px; vertical-align: middle; text-align: center; display:inline-block; border-radius: 16px; border: none; padding: 0px 12px 0px 12px; box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.15) !important; }
.btn-magenta2:hover      { background-color: var(--gc-magenta6) !important; color: var(--gc-weiss); }
                        
.btn-grau1               { background-color: var(--gc-grau4) !important; color: var(--gc-weiss); line-height: 42px; font-size: 14px; vertical-align: middle; text-align: center; display:inline-block; border-radius: 10px; border: none; padding: 0px 12px 0px 12px; }
.btn-grau1:hover         { background-color: var(--gc-grau5) !important; color: var(--gc-weiss); }
.btn-grau2               { background-color: var(--gc-grau5) !important; color: var(--gc-weiss); line-height: 32px; font-size: 12px; vertical-align: middle; text-align: center; display:inline-block; border-radius: 16px; border: none; padding: 0px 12px 0px 12px; box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.15) !important; }
.btn-grau2:hover         { background-color: var(--gc-grau6) !important; color: var(--gc-weiss); }
                        
.btn-hellgrau1           { background-color: var(--gc-grau3) !important; color: var(--gc-weiss); line-height: 42px; font-size: 14px; vertical-align: middle; text-align: center; display:inline-block; border-radius: 10px; border: none; padding: 0px 12px 0px 12px; }
.btn-hellgrau1:hover     { background-color: var(--gc-grau4) !important; color: var(--gc-weiss); }
.btn-hellgrau2           { background-color: var(--gc-grau4) !important; color: var(--gc-weiss); line-height: 32px; font-size: 12px; vertical-align: middle; text-align: center; display:inline-block; border-radius: 16px; border: none; padding: 0px 12px 0px 12px; }
.btn-hellgrau2:hover     { background-color: var(--gc-grau5) !important; color: var(--gc-weiss); }
                        
.btn-dunkelgrau1         { background-color: var(--gc-grau5) !important; color: var(--gc-weiss); line-height: 42px; font-size: 14px; vertical-align: middle; text-align: center; display:inline-block; border-radius: 10px; border: none; padding: 0px 12px 0px 12px; }
.btn-dunkelgrau1:hover   { background-color: var(--gc-grau6) !important; color: var(--gc-weiss); }
.btn-dunkelgrau2         { background-color: var(--gc-grau5) !important; color: var(--gc-weiss); line-height: 32px; font-size: 12px; vertical-align: middle; text-align: center; display:inline-block; border-radius: 16px; border: none; padding: 0px 12px 0px 12px; }
.btn-dunkelgrau2:hover   { background-color: var(--gc-grau6) !important; color: var(--gc-weiss); }

.btn.show { color: #fff; } /* Schriftfarbe der Menubuttons, wenn diese aufgeklappt sind und der Cursor in die darunterliegenden MenuItems bewegt wird */