:root {

    /*Farben hauptsächlich für Icons*/
    --colPro01: 133,173,30; /*leuchtend grün*/ 
    --colPro02: 168,190,95; /*mittel grün*/ 
    --colPro03: 186,198,147; /*blass grün*/ 

    --colContra01: 237,107,86; /*leuchtend rot*/ 
    --colContra02: 217,134,126; /*mittel rot*/ 
    --colContra03: 204,167,163; /*blass rot*/ 

    --colAttention: 232,188,3; /*standard leuchtend gelb*/ 
    --colSpecialInfo: 54,169,225; /*blau*/ 

    /*Farben inaktiv und spezial*/
    --colNormalIcon: 193,193,193; /*Symbole ohne Zustand*/ 
    --colNormalLine: 193,193,193; /*generelles grau für alle Linien*/ 
    --colBackrule: 0,0,0,0.45; /*Gegenrechts-Pfeile*/
    --colOpener: 145,145,145; /*kleine Aufklapp-Marker*/
    --colRequirement: 255,255,255,0.4; /*Bedingungsdreieck*/

    /*Farben für UI*/
    --colBG: 255,255,255;

    --colUIBack01: 108,108,108; /*dunkel*/
    --colUIBack02: 215,215,215; /*mittel*/
    --colUIBack03: 240,240,240; /*mittelhell*/
    --colUIBack04: 248,248,248; /*hell*/
    --colUIBack05: 255,255,255; /*weiss*/

    --colUIText01: 0,0,0; /*schwarz*/
    --colUIText02: 108,108,108; /*dunkel*/
    --colUIText03: 135,135,135; /*mittel*/
    --colUIText04: 248,248,248; /*hell*/
    --colUIText05: 255,255,255; /*weiss*/
}
   
.clickable:hover {    
    box-shadow: 0.1em 0.1em 0.2em rgba(0,0,0,.5);
    transition: all 100ms ease;    
    transform: translate(-1px, -1px);
    -webkit-transform: translate(-1px, -1px);
  }