.blue {
  position: relative;
  background: rgb(177, 186, 252);
  background: linear-gradient(
    180deg,
    rgba(177, 186, 252, 1) 0%,
    rgba(96, 111, 219, 1) 50%,
    rgba(38, 55, 185, 1) 50%
  );
  font-family: Arial !important;
  padding: 0.3em 1.25em;
  font-size: calc(13px - 0.5px) !important;
  color: white;
  border: 1px solid black;
  text-shadow: 0 1px 0 black, 0 -1px 0 black, 1px 0 0 black, -1px 0 0 black;
  border-radius: 4px !important;
  font-weight: 600;
}
.blue:hover::after {
  content: "";
  content: "";
    background: rgba(255, 255, 255, 0.2);
    width: 100%;
    height: 100%;
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
}
.blue:active {
  background: linear-gradient(
      0,
      rgba(177, 186, 252, 1) 0%,
      rgba(96, 111, 219, 1) 50%,
      rgba(38, 55, 185, 1) 50%
    );
    cursor: pointer;
}

.red {
  position: relative;
  background: rgb(252, 177, 177);
  background: linear-gradient(
    180deg,
    rgba(252, 177, 177, 1) 0%, 
    rgba(219, 96, 96, 1) 50%, 
    rgba(185, 38, 38, 1) 50%);
  );
  font-family: Arial !important;
  padding: 0.3em 1.25em;
  font-size: calc(13px - 0.5px) !important;
  color: white;
  border: 1px solid black;
  text-shadow: 0 1px 0 black, 0 -1px 0 black, 1px 0 0 black, -1px 0 0 black;
  border-radius: 4px !important;
  font-weight: 600;
}
.red:hover::after {
  content: "";
  content: "";
    background: rgba(255, 255, 255, 0.2);
    width: 100%;
    height: 100%;
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
}
.red:active {
  background: linear-gradient(
      0,
      rgba(185, 38, 38, 1) 0%,
      rgba(219, 96, 96, 1) 50%,
      rgba(252, 177, 177) 50%
    );
    cursor: pointer;
}

.green {
  position: relative;
  background: rgb(105, 207, 120);
  background: linear-gradient(
    180deg,
    rgba(105, 207, 120, 1) 0%, 
    rgba(70, 176, 85, 1) 50%, 
    rgba(53, 137, 63, 1) 50%
  );
  font-family: Arial !important;
  padding: 0.3em 1.25em;
  font-size: calc(13px - 0.5px) !important;
  color: white;
  border: 1px solid black;
  text-shadow: 0 1px 0 black, 0 -1px 0 black, 1px 0 0 black, -1px 0 0 black;
  border-radius: 4px !important;
  font-weight: 600;
}
.green:hover::after {
  content: "";
  content: "";
    background: rgba(255, 255, 255, 0.2);
    width: 100%;
    height: 100%;
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
}
.green:active {
  background: linear-gradient(
      0,
      rgba(153, 137, 63, 1) 0%,
      rgba(70, 176, 85, 1) 50%,
      rgba(105, 207, 120, 1) 50%
    );
    cursor: pointer;
}

.toolbarblau {
  display: flex;
      flex-direction: column;
      align-items: center;
      padding-top: 50px;

margin-top: 0px;
      font-family: Arial, sans-serif;
      font-weight: bold;
      font-size: 12px;
      color: white;
      padding: 3px 6px;
      border: 1px solid rgba(186, 186, 186, 1);
      border-radius: 4px;
      text-align: center;
      background: linear-gradient(to bottom,
  rgba(197, 216, 230, 1) 0%,
  rgba(143, 182, 207, 1) 50%,
  rgba(110, 164, 199, 1) 55%,
  rgba(77, 147, 191, 1) 60%,
  rgba(77, 147, 191, 1) 70%,
  rgba(77, 147, 191, 1) 80%,
  rgba(77, 147, 191, 1) 90%,
  rgba(77, 147, 191, 1) 100%
        );
      cursor: pointer;
      user-select: none;
}
.toolbarblau:hover {
  background: linear-gradient(to bottom,
  rgba(197, 216, 230, 1) 0%,
  rgba(143, 182, 207, 1) 50%,
  rgba(110, 164, 199, 1) 55%,
  rgba(77, 147, 191, 1) 60%,
  rgba(77, 147, 191, 1) 70%,
  rgba(77, 147, 191, 1) 80%,
  rgba(77, 147, 191, 1) 90%,
  rgba(77, 147, 191, 1) 100%
      );
border-color: rgba(153, 153, 153, 1);
}

.toolbarblack {
  display: flex;
      flex-direction: column;
      align-items: center;
      padding-top: 50px;

margin-top: 0px;
      font-family: Arial, sans-serif;
      font-weight: bold;
      font-size: 12px;
      color: white;
      padding: 3px 6px;
      border: 1px solid rgba(186, 186, 186, 1);
      border-radius: 4px;
      text-align: center;
      background: linear-gradient(to bottom,
    rgba(100, 100, 100, 1) 0%,
    rgba(33, 33, 33, 1) 50%,
    rgba(0, 0, 0, 1) 50%
        );
      cursor: pointer;
      user-select: none;
}
.toolbarblack:hover {
  background: linear-gradient(to bottom,
    rgba(100, 100, 100, 1) 0%,
    rgba(33, 33, 33, 1) 50%,
    rgba(0, 0, 0, 1) 50%
      );
border-color: rgba(153, 153, 153, 1);
}

.toolbardunkelblau {
  display: flex;
      flex-direction: column;
      align-items: center;
      padding-top: 50px;

margin-top: 0px;
      font-family: Arial, sans-serif;
      font-weight: bold;
      font-size: 12px;
      color: white;
      padding: 3px 6px;
      border: 1px solid rgba(186, 186, 186, 1);
      border-radius: 4px;
      text-align: center;
      background: linear-gradient(to bottom,
    rgba(177, 186, 252, 1) 0%,
    rgba(96, 111, 219, 1) 50%,
    rgba(38, 55, 185, 1) 50%
  );
      cursor: pointer;
      user-select: none;
}
.toolbardunkelblau:hover {
  background: linear-gradient(to bottom,
    rgba(177, 186, 252, 1) 0%,
    rgba(96, 111, 219, 1) 50%,
    rgba(38, 55, 185, 1) 50%
  );
border-color: rgba(153, 153, 153, 1);
}

.hellblau {
  position: relative;
  background: rgb(200, 230, 255);
  background: linear-gradient(
    180deg,
    rgba(200, 230, 255, 1) 0%,  
  rgba(140, 200, 255, 1) 50%,  
  rgba(100, 255, 240, 1) 100% 
  );
  font-family: Arial !important;
  padding: 0.3em 1.25em;
  font-size: calc(13px - 0.5px) !important;
  color: white;
  border: 1px solid black;
  text-shadow: 0 1px 0 black, 0 -1px 0 black, 1px 0 0 black, -1px 0 0 black;
  border-radius: 4px !important;
  font-weight: 600;
}
.hellblau:active {
  background: linear-gradient(
      0,
  rgba(100, 255, 240, 1) 0%  
  rgba(140, 200, 255, 1) 50%,  
  rgba(200, 230, 255, 1) 100%,
    );
    cursor: pointer;


}

.orange {
  position: relative;
background: rgb(255, 165, 0); /* Fallback für alte Browser */
background: linear-gradient(
  180deg,
  rgba(255, 165, 0, 1) 0%,     /* Hellorange oben */
  rgba(230, 130, 0, 1) 50%,    /* Mittelorange */
  rgba(200, 100, 0, 1) 50%     /* Dunkelorange */
);
font-family: Arial !important;
padding: 0.3em 1.25em;
font-size: calc(13px - 0.5px) !important;
color: white;
border: 1px solid black;
text-shadow: 0 1px 0 black, 0 -1px 0 black, 1px 0 0 black, -1px 0 0 black;
border-radius: 4px !important;
font-weight: 600;
}

.grey {
  position: relative;
  background: rgb(207, 207, 222);
  background: linear-gradient(
    180deg,
  rgba(207, 207, 222, 1) 0%,
  rgba(181, 181, 196, 1) 50%,
  rgba(129, 129, 144, 1) 50%
  );
  font-family: Arial !important;
  padding: 0.3em 1.25em;
  font-size: calc(13px - 0.5px) !important;
  color: white;
  border: 1px solid black;
  text-shadow: 0 1px 0 black, 0 -1px 0 black, 1px 0 0 black, -1px 0 0 black;
  border-radius: 4px !important;
  font-weight: 600;
}