@use "sass:map";
/*$blue_60;*/
/*$blue_50;*/
button,
.button {
  display: inline-flex;
  align-items: center;
  padding: .4em .9em;
  border: none;
  border-radius: .2em;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.33);
  cursor: pointer;
  transition-timing-function: linear;
  transition-duration: .080s;
  transition-property: border-color, background-color, color; }
  button:focus,
  .button:focus {
    outline: none; }

button_inline,
.button_inline {
  display: inline-flex;
  align-items: center;
  padding: .2em .9em;
  border: none;
  font-size: 70%;
  border-radius: .2em;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.33);
  cursor: pointer;
  transition-timing-function: linear;
  transition-duration: .080s;
  transition-property: border-color, background-color, color; }
  button_inline:focus,
  .button_inline:focus {
    outline: none; }

button,
button_inline,
.button_inline,
.button {
  border: 1px solid #DEE3E5;
  background-color: #DDE2E3;
  color: #808385; }
  button:hover,
  button_inline:hover,
  .button_inline:hover,
  .button:hover {
    border-color: #eceff0;
    background-color: #f1f3f3;
    color: #8d9091; }
  button:disabled,
  button_inline:disabled,
  .button_inline:disabled,
  .button:disabled {
    border-color: #F1F3F4;
    background-color: #F6F7F8;
    color: #D1D7DA;
    cursor: default;
    cursor: not-allowed; }

button.blau,
button_inline.blau,
.button_inline.blau,
.button.blau {
  border: 1px solid #185078;
  background-color: #134060;
  color: #fff; }
  button.blau:hover,
  button_inline.blau:hover,
  .button_inline.blau:hover,
  .button.blau:hover {
    border-color: #1c5e8d;
    background-color: #19547e;
    color: white; }
  button.blau:disabled,
  button_inline.blau:disabled,
  .button_inline.blau:disabled,
  .button.blau:disabled {
    border-color: #F1F3F4;
    background-color: #F6F7F8;
    color: #D1D7DA;
    cursor: default;
    cursor: not-allowed; }

button.rot,
button_inline.rot,
.button_inline.rot,
.button.rot {
  border: 1px solid #E92B19;
  background-color: #ba2214;
  color: #fff; }
  button.rot:hover,
  button_inline.rot:hover,
  .button_inline.rot:hover,
  .button.rot:hover {
    border-color: #eb4030;
    background-color: #da2817;
    color: white; }
  button.rot:disabled,
  button_inline.rot:disabled,
  .button_inline.rot:disabled,
  .button.rot:disabled {
    border-color: #F1F3F4;
    background-color: #F6F7F8;
    color: #D1D7DA;
    cursor: default;
    cursor: not-allowed; }

button.grun,
button_inline.grun,
.button_inline.grun,
.button.grun {
  border: 1px solid #005c12;
  background-color: #00450c;
  color: #fff; }
  button.grun:hover,
  button_inline.grun:hover,
  .button_inline.grun:hover,
  .button.grun:hover {
    border-color: #007617;
    background-color: #006912;
    color: white; }
  button.grun:disabled,
  button_inline.grun:disabled,
  .button_inline.grun:disabled,
  .button.grun:disabled {
    border-color: #F1F3F4;
    background-color: #F6F7F8;
    color: #D1D7DA;
    cursor: default;
    cursor: not-allowed; }

button.gelb,
button_inline.gelb,
.button_inline.gelb,
.button.gelb {
  border: 1px solid #614200;
  background-color: #4a3200;
  color: #fff; }
  button.gelb:hover,
  button_inline.gelb:hover,
  .button_inline.gelb:hover,
  .button.gelb:hover {
    border-color: #7b5300;
    background-color: #6e4a00;
    color: white; }
  button.gelb:disabled,
  button_inline.gelb:disabled,
  .button_inline.gelb:disabled,
  .button.gelb:disabled {
    border-color: #F1F3F4;
    background-color: #F6F7F8;
    color: #D1D7DA;
    cursor: default;
    cursor: not-allowed; }

button.gross,
.button.gross {
  font-size: 1.33em; }

button.klein,
.button.klein {
  font-size: .88em;
  padding: .3em .85em; }

button [class*="symbol-"],
.button [class*="symbol-"] {
  opacity: .80; }

button [class*="symbol-"] + .text,
button .text + [class*="symbol-"],
.button [class*="symbol-"] + .text,
.button .text + [class*="symbol-"] {
  padding-left: .5em; }

.buttons {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin: 2em 0 0; }
  .buttons .button {
    margin: 0 1em 1.3em 0; }
    .buttons .button:last-child {
      margin-right: 0; }

@media (max-width: 768px) {
  button,
  .button {
    padding: 2em auto;
    flex-direction: column; }
  .buttons {
    display: flex;
    flex-direction: column;
    flex-wrap: inherit;
    font-size: .9em;
    margin: 2em 0 2em; }
    .buttons .button {
      margin-bottom: .2em;
      margin-right: 0;
      font-size: .95em; }
      .buttons .button:last-child {
        margin: 0; } }