.checkboxes {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    padding: 7px 18px;
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
  }
  @media only screen and (max-width: 767px) {
    .checkboxes {
      display: grid;
      grid-template-columns: 1fr;
      font-size: 0.8rem;
    }
  }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .checkboxes {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      font-size: 0.8rem;
    }
  }
  /* Customize the label (the checkbox-container) */
  .checkbox-container {
    display: block;
    position: relative;
    padding-left: 35px;
    margin: 12px 0px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  .hint {
    grid-column: 1 / span 3;
    padding-top: 1rem;
    font-style: italic;
  }
  @media only screen and (max-width: 767px) {
    .hint {
      grid-column: 1;
    }
  }
  /* Hide the browser's default checkbox */
  .checkbox-container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
  }
  /* Create a custom checkbox */
  .checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    border: 1px solid #004f9f;
  }
  /* On mouse-over, add a grey background color */
  .checkbox-container:hover input~.checkmark {
    background-color: #f5f5f5;
  }
  /* When the checkbox is checked, add a blue background */
  .checkbox-container input:checked~.checkmark {
  }
  /* Create the checkmark/indicator (hidden when not checked) */
  .checkmark:after {
    content: "";
    position: absolute;
    display: none;
  }
  /* Show the checkmark when checked */
  .checkbox-container input:checked~.checkmark:after {
    display: block;
  }
  .last-element {
    padding-left: 0 !important;
  }
  /* Style the checkmark/indicator */
  .checkbox-container .checkmark:after {
    left: 9px;
    top: 5px;
    width: 5px;
    height: 10px;
    border: solid #6f6a6a;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
  }
  /* Style the button that is used to open and close the collapsible content */
  .collapsible {
    border: none;
    background: white;
    border-bottom: solid 2px #004f9f;
    border-image: linear-gradient(0.25turn, rgb(255, 255, 255) 0%, rgb(0, 79, 159, 1) 10%);
    border-image-slice: 1;
    cursor: pointer;
    padding: 8px;
    width: 100%;
    text-align: left;
    outline: none;
    font-size: 15px;
    height: 2.5rem;
  }
  .collapsible:before {
    margin-right: 1rem;
    margin-left: -0.5rem;
    margin-bottom: -0.5rem;
    content: '';
    width: 100px;
    height: 30px;
    float: left;
    background: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(0, 79, 159, 1) 100%);
    display: block;
  }
  @media only screen and (max-width: 767px) {
    .collapsible:before {
      margin-right: 0.5rem;
      width: 60px;
      height: 30px;
    }
  }
  @media only screen and (max-width: 767px) {
    .collapsible {
      font-size: 0.9rem;
      height: 8rem;
      position: relative;
    }
  }
  .active {
    width: 100%;
  }
  .collapsible:after {
    content: '\002B \00a0 mehr';
    /* Unicode character for "plus" sign (+) */
    position: absolute;
    right: 5%;
    float: right;
    margin-left: 5px;
    color: grey;
    border: solid grey 1px;
    padding: 5px;
    margin-top: -0.5rem;
    font-size: 0.8rem;
  }
  @media only screen and (max-width: 767px) {
    .collapsible:after {
      font-size: 0.7rem;
      top: 75%;
    }
  }
  .active:after {
    content: "\002D";
    /* Unicode character for "minus" sign (-) */
  }
  .button {
    background-color: white;
    border-color: #004f9f;
    color: #004f9f;
    -webkit-transition: all .25s ease-in-out;
    transition: all .25s ease-in-out;
    cursor: pointer;
    font-size: 16px;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: 1px solid #004f9f;
    padding: 7px 14px;
    padding: 0.7rem 2rem;
    font-size: 16px;
    font-size: 1.2rem;
    line-height: 1.5;
    border-radius: 2px;
  }
  .button:disabled {
    background-color: #6a91b9;
    cursor: default;
    pointer-events: none;
  }
  .button:hover {
    background-color: #004387;
    color: white;
  }
  .select-all {
    float: right;
    right: 12%;
    bottom: 70%;
    color: grey;
    font-size: 0.8rem;
  }
  @media only screen and (max-width: 767px) {
    .select-all {
      float: left;
      right: 55%;
      top: 60%;
      position: absolute;
    }
  }
  .Digitalisierung {
    margin-top: 1rem;
    border-bottom: solid 2px #b01046;
    border-image: linear-gradient(0.25turn, rgb(255, 255, 255) 0%, rgb(176, 16, 70)10%);
    border-image-slice: 1;
  }
  .Mobilität {
    border-bottom: solid 2px #009dc5;
    border-image: linear-gradient(0.25turn, rgb(255, 255, 255) 0%, rgb(0, 157, 197, 1)10%);
    border-image-slice: 1;
  }
  .Produktion,
  .Material {
    border-bottom: solid 2px #a7358b;
    border-image: linear-gradient(0.25turn, rgb(255, 255, 255) 0%, rgb(167, 53, 139, 1)10%);
    border-image-slice: 1;
  }
  .Bau,
  .Energie {
    border-bottom: solid 2px #ef7d00;
    border-image: linear-gradient(0.25turn, rgb(255, 255, 255) 0%, rgb(239, 125, 0, 1)10%);
    border-image-slice: 1;
  }
  .Gesundheit {
    border-bottom: solid 2px #00998a;
    border-image: linear-gradient(0.25turn, rgb(255, 255, 255) 0%, rgb(0, 153, 138, 1)10%);
    border-image-slice: 1;
  }
  .Kreativwirtschaft {
    border-bottom: solid 2px #b81867;
    border-image: linear-gradient(0.25turn, rgb(255, 255, 255) 0%, rgb(184, 24, 103, 1)10%);
    border-image-slice: 1;
  }
  .Sicherheit {
    border-bottom: solid 2px #c0912e;
    border-image: linear-gradient(0.25turn, rgb(255, 255, 255) 0%, rgb(192, 145, 46, 1)10%);
    border-image-slice: 1;
  }
  .Digitalisierung-checkmark {
    border: 1px solid #b01046;
  }
  .Mobilität-checkmark {
    border: 1px solid #009dc5;
  }
  .Produktion-checkmark,
  .Material-checkmark {
    border: 1px solid #a7358b;
  }
  .Energie-checkmark,
  .Bau-checkmark {
    border: 1px solid #ef7d00;
  }
  .Gesundheit-checkmark {
    border: 1px solid #00998a;
  }
  .Kreativwirtschaft-checkmark {
    border: 1px solid #b81867;
  }
  .Verteidigung-checkmark {
    border: 1px solid #c0912e;
  }
  .Digitalisierung-rectangle:before {
    background: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(176, 16, 70, 1) 100%);
  }
  .Mobilität-rectangle:before {
    background: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(0, 157, 197, 1) 100%);
  }
  .Produktion-rectangle:before,
  .Material-rectangle:before {
    background: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(167, 53, 139, 1) 100%);
  }
  .Energie-rectangle:before,
  .Bau-rectangle:before {
    background: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(239, 125, 0, 1) 100%);
  }
  .Gesundheit-rectangle:before {
    background: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(0, 153, 138, 1) 100%);
  }
  .Kreativwirtschaft-rectangle:before {
    background: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(184, 24, 103, 1) 100%);
  }
  .Verteidigung-rectangle:before {
    background: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(192, 145, 46, 1) 100%);
  }
  .italic {
    font-style: italic;
  }
  .newsletter-class {
    font-weight: bold;
    color: #004f9f;
  }
  .newsletter-class-dig {
    color: #b01046;
  }
  .newsletter-class-mob {
    color: #009dc5;
  }
  .newsletter-class-mat {
    color: #a7358b;
  }
  .newsletter-class-erg {
    color: #ef7d00;
  }
  .newsletter-class-ges {
    color: #00998a;
  }
  .newsletter-class-kuk {
    color: #b81867;
  }