/* Buttons */
/*
 * General
 */
button {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
}

/*
 * Button
 */
.btn,
button {
  background: transparent;
  background: inherit;
  border: 0;
  color: inherit;
  cursor: pointer;
  display: inline-block;
  font: inherit;
  line-height: 1;
  padding: .25rem;
  text-align: center;
  text-decoration: none;
  outline: none;
}

.btn--primary,
.btn--prev,
.btn--next {
  background: #bf253b;
  color: #fff;
  border: 0;
  padding: .5rem 1.5rem;
  position: relative;
  position: relative;
  z-index: 1;
}

  .baeder .btn--primary,
  .baeder .btn--primary,
  .baeder .btn--prev,
  .baeder .btn--prev,
  .baeder .btn--next,
  .baeder .btn--next,
  .energie .btn--primary,
  .energie .btn--primary,
  .energie .btn--prev,
  .energie .btn--prev,
  .energie .btn--next,
  .energie .btn--next {
    background: #f59b00;
    color: #fff;
  }

  .verkehr .btn--primary,
  .verkehr .btn--primary,
  .verkehr .btn--prev,
  .verkehr .btn--prev,
  .verkehr .btn--next,
  .verkehr .btn--next,
  .telekommunikation .btn--primary,
  .telekommunikation .btn--primary,
  .telekommunikation .btn--prev,
  .telekommunikation .btn--prev,
  .telekommunikation .btn--next,
  .telekommunikation .btn--next {
    background: #006fb4;
    color: #fff;
  }

.btn--next {
  padding: .5rem .5rem .5rem 1rem;
  margin-right: 1rem;
}

.btn--next::after {
  position: absolute;
  right: -.5rem;
  height: 100%;
  width: 1rem;
  background: #bf253b;
  content: "";
  top: 0;
  bottom: 0;
  transform: skew(-16deg);
}

.btn--prev {
  padding: .5rem 1rem .5rem .5rem;
  margin-left: 1rem;
}

.btn--prev::before {
  position: absolute;
  left: -.5rem;
  height: 100%;
  width: 1rem;
  background: #bf253b;
  content: "";
  top: 0;
  bottom: 0;
  transform: skew(-16deg);
}

.btn--border {
  padding: .444rem 1.5rem;
  background: inherit;
  color: #bf253b;
  border: .056rem solid #bf253b;
  position: relative;
}

  .baeder .btn--border,
  .energie .btn--border, {
    color: #f59b00;
    border: .056rem solid #f59b00;
  }

  .verkehr .btn--border,
  .telekommunikation .btn--border {
    color: #006fb4;
    border: .056rem solid #006fb4;
  }

.btn--primary:hover,
.btn--primary:focus,
.btn--prev:hover,
.btn--prev:focus,
.btn--next:hover,
.btn--next:focus {
  background: #bf253b;
  color: #fff;
}

  .baeder .btn--next::after,
  .baeder .btn--prev::before,
  .baeder .btn--primary:hover,
  .baeder .btn--primary:focus,
  .baeder .btn--prev:hover,
  .baeder .btn--prev:focus,
  .baeder .btn--next:hover,
  .baeder .btn--next:focus,
  .energie .btn--next::after,
  .energie .btn--prev::before,
  .energie .btn--primary:hover,
  .energie .btn--primary:focus,
  .energie .btn--prev:hover,
  .energie .btn--prev:focus,
  .energie .btn--next:hover,
  .energie .btn--next:focus {
    background: #f59b00;
    color: #fff;
  }

  .verkehr .btn--next::after,
  .verkehr .btn--prev::before,
  .verkehr .btn--primary:hover,
  .verkehr .btn--primary:focus,
  .verkehr .btn--prev:hover,
  .verkehr .btn--prev:focus,
  .verkehr .btn--next:hover,
  .verkehr .btn--next:focus,
  .telekommunikation .btn--next::after,
  .telekommunikation .btn--prev::before,
  .telekommunikation .btn--primary:hover,
  .telekommunikation .btn--primary:focus,
  .telekommunikation .btn--prev:hover,
  .telekommunikation .btn--prev:focus,
  .telekommunikation .btn--next:hover,
  .telekommunikation .btn--next:focus {
    background: #006fb4;
    color: #fff;
  }

.btn--border:hover,
.btn--border:focus {
  background: inherit;
  color: #bf253b;
}

* + .btn {
  margin-top: 1rem;
}

.btn + .btn {
  margin-left: 1rem;
}