.button {
  margin-top: var(--grid-gap);
  margin-bottom: var(--grid-gap);
}

.paragraph.button {
  margin: 0;
}

.paragraph.btn-group,
.button {
  display: flex;
  gap: 1em;
  flex-wrap: wrap;
}

/* Button Link */

/* OVERRULE _hover.scss*/
.btn-link:hover {
  color: unset;
  text-decoration: unset;
}

.btn-link a,
a.btn-link {
  font-size: var(--font-size-text);
  font-weight: 400;
  text-decoration: none;
  margin-right: 1rem;
}

.btn-link a:hover,
a.btn-link:hover {
  text-decoration: underline;
  color: var(--color-primary-dark);
  text-underline-offset: 0.25em;
  text-decoration-thickness: 1px;
}

.btn-link a[data-type="external"]::after {
  content: var(--icon-link-primary);
  position: relative;
  top: 2px;
  padding: 0 0 0 5px;
}

.btn-link a[data-type="file"]::after {
  content: var(--icon-download-primary);
  position: relative;
  top: 2px;
  padding: 0 0 0 5px;
}

/* Button Default */

a.btn-default,
.btn-default a,
.btn-icon a,
input.btn-default,
.youtube-link-btn {
  font-weight: 700;
  font-size: 1.125rem;
  font-family: 'Netto W01', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  text-decoration: none;
  display: inline-block;
  border: 2px solid var(--color-primary);
  color: var(--color-primary);
  border-radius: 5rem;
  position: relative;
  cursor: pointer;
  background-color: transparent;
  padding: .5em 1em .5em 1em;
  gap: 1em;
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 400px;
}

.btn-icon a:hover,
a.btn-default:hover,
.btn-default a:hover,
input.btn-default:hover {
  background-color: var(--color-primary);
  color: var(--color-white);
}

/* Button Default (Negativ Variante) */
.btn-negativ {
  font-weight: 700;
  font-size: 1.125rem;
  display: inline-block;
  border: 2px solid var(--color-white);
  color: var(--color-white);
  border-radius: 5rem;
  position: relative;
  cursor: pointer;
  background-color: transparent;
  padding: .5em 1em .5em 1em;
  margin-top: var(--grid-gap);
  gap: 1em;
}

.btn-negativ:hover {
  background-color: var(--color-white);
  color: var(--color-primary);
}

/* Button Arrow-right */

.btn-icon a,
.youtube-link-btn {
  background-color: transparent;
  padding: .5em 3em .5em 1em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 400px;
}

.btn-icon a:after,
.youtube-link-btn:after {
  content: '';
  background-image: var(--arrow-next-primary);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  width: 1.063em;
  position: absolute;
  right: 1em;
  height: 100%;
  top: 0;
}

.btn-icon a:hover,
.youtube-link-btn:hover {
  background-color: var(--color-primary);
  color: var(--color-white);
}

.btn-icon a:hover:after,
.youtube-link-btn:hover:after {
  content: '';
  background-image: var(--arrow-next-white);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  width: 1.063em;
  position: absolute;
  right: 1em;
  height: 100%;
  top: 0;
}

/* Button Arrow-right (Negativ Variante) */

.btn-icon-negativ,
.banner .button a,
.slider.layout-numbers .buttons a,
.bg-primary .button a,
.bg-image .button a {
  font-weight: 700;
  font-size: 1.125rem;
  display: inline-block;
  border: 2px solid var(--color-white);
  color: var(--color-white) !important;
  border-radius: 5rem;
  position: relative;
  cursor: pointer;
  background-color: transparent;
  padding: .5em 3em .5em 1em;
  text-decoration: none !important;
}

.btn-icon-negativ:after,
.banner .button a:after,
.slider.layout-numbers .buttons a:after,
.bg-primary .button a:after,
.bg-image .button a:after {
  content: '';
  background-image: var(--arrow-next-white);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  width: 1.063em;
  position: absolute;
  right: 1em;
  height: 100%;
  top: 0;
}

.btn-icon-negativ:hover,
.banner .button a:hover,
.slider.layout-numbers .buttons a:hover,
.bg-primary .button a:hover,
.bg-image .button a:hover {
  background-color: var(--color-white);
  color: var(--color-primary) !important;
}

.btn-icon-negativ:hover:after,
.banner .button a:hover:after,
.slider.layout-numbers .buttons a:hover:after,
.bg-primary .button a:hover:after,
.bg-image .button a:hover:after {
  background-image: var(--arrow-next-primary);
  color: var(--color-primary);
}

/* --------------------------------------------------
Corporate just-link Buttons with Arrow-right (default)
-------------------------------------------------- */

a.btn-default {
  /* general Button-Styling */
  font-weight: 700;
  font-size: 1.125rem;
  display: inline-block;
  border-radius: 5rem;
  position: relative;
  cursor: pointer;
  background-color: transparent;
  padding: .5em 3em .5em 1em;
  text-decoration: none !important;
  transition: background-color 0.3s ease, color 0.3s ease;
}

a.btn-default:after {
  /* Pfeil-Symbol Styling */
  content: '';
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  width: 1.063em;
  position: absolute;
  right: 1em;
  height: 100%;
  top: 0;
  transition: background-image 0.3s ease;
}

a.btn-default:hover {
background-color: var(--color-primary);
color: var(--color-white) !important;
}

a.btn-default:hover:after {
background-image: var(--arrow-next-white);
}

/* ------------------------------------------
CTA Buttons color variants for CTA Layout-Box
------------------------------------------ */

/* Rot (Corporate Design / CD) */
.color-cd.layout-box a.btn-default {
  border: 2px solid var(--color-primary);
  color: var(--color-primary) ;
}
.color-cd.layout-box a.btn-default:after {
  background-image: var(--arrow-next-primary);
}
.color-cd.layout-box a.btn-default:hover {
  background-color: var(--color-primary);
  color: var(--color-white) ;
}
.color-cd.layout-box a.btn-default:hover:after {
  background-image: var(--arrow-next-white);
}

/* Grün */
.color-green.layout-box a.btn-default {
  border: 2px solid var(--color-green);
  color: var(--color-green);
}
.color-green.layout-box a.btn-default:after {
  background-image: var(--arrow-next-green);
}
.color-green.layout-box a.btn-default:hover {
  background-color: var(--color-green);
  color: var(--color-white);
}
.color-green.layout-box a.btn-default:hover:after {
  background-image: var(--arrow-next-white);
}

/* Blau */
.color-blue.layout-box a.btn-default {
  border: 2px solid var(--color-blue);
  color: var(--color-blue) ;
}
.color-blue.layout-box a.btn-default:after {
  background-image: var(--arrow-next-blue);
}
.color-blue.layout-box a.btn-default:hover {
  background-color: var(--color-blue);
  color: var(--color-white);
}
.color-blue.layout-box a.btn-default:hover:after {
  background-image: var(--arrow-next-white);
}

/* Orange */
.color-orange.layout-box a.btn-default {
  border: 2px solid var(--color-orange);
  color: var(--color-orange);
}
.color-orange.layout-box a.btn-default:after {
  background-image: var(--arrow-next-orange);
}
.color-orange.layout-box a.btn-default:hover {
  background-color: var(--color-orange);
  color: var(--color-white) ;
}
.color-orange.layout-box a.btn-default:hover:after {
  background-image: var(--arrow-next-white);
}

/* -------------------------------------------------------
CTA Buttons color NEGATIVE variants for CTA Layout-Default
------------------------------------------------------- */

/* Primary/ Red (Corporate Design / CD) */
.color-cd.layout-default a.btn-default {
  border: 2px solid var(--color-white);
  color: var(--color-white);
}
.color-cd.layout-default a.btn-default:after {
  background-image: var(--arrow-next-white);
}
.color-cd.layout-default a.btn-default:hover {
  background-color: var(--color-white);
  color: var(--color-primary) !important;
}
.color-cd.layout-default a.btn-default:hover:after {
  background-image: var(--arrow-next-red);
}

/* Red (Corporate Design / CD) */
.color-red.layout-default a.btn-default {
  border: 2px solid var(--color-white);
  color: var(--color-white);
}
.color-red.layout-default a.btn-default:after {
  background-image: var(--arrow-next-white);
}
.color-red.layout-default a.btn-default:hover {
  background-color: var(--color-white);
  color: var(--color-primary) !important;
}
.color-red.layout-default a.btn-default:hover:after {
  background-image: var(--arrow-next-red);
}

/* Green */
.color-green.layout-default a.btn-default {
  border: 2px solid var(--color-white);
color: var(--color-white);
}
.color-green.layout-default a.btn-default:after {
  background-image: var(--arrow-next-white);
}
.color-green.layout-default a.btn-default:hover {
  background-color: var(--color-white);
  color: var(--color-green) !important;
}
.color-green.layout-default a.btn-default:hover:after {
  background-image: var(--arrow-next-green);
}

/* Blue */
.color-blue.layout-default a.btn-default {
  border: 2px solid var(--color-white);
  color: var(--color-white);
}
.color-blue.layout-default a.btn-default:after {
  background-image: var(--arrow-next-white);
}
.color-blue.layout-default a.btn-default:hover {
  background-color: var(--color-white);
  color: var(--color-blue) !important;
}
.color-blue.layout-default a.btn-default:hover:after {
  background-image: var(--arrow-next-blue);
}

/* Orange */
.color-orange.layout-default a.btn-default {
  border: 2px solid var(--color-white);
  color: var(--color-white);
}
.color-orange.layout-default a.btn-default:after {
  background-image: var(--arrow-next-white);
}
.color-orange.layout-default a.btn-default:hover {
  background-color: var(--color-white);
  color: var(--color-orange) !important;
}
.color-orange.layout-default a.btn-default:hover:after {
  background-image: var(--arrow-next-orange);
}

/* Button List */

.paragraph.btn-list {
  /*background-color: var(--color-grey-light);*/
  border-radius: var(--border-radius);
  padding: var(--section-inner-side-padding);
}

.paragraph.buttons.btn-list .button-icon {
  padding-right: 2rem;
}

.btn-list-item {
  width: max-content;
  position: relative;
}

.btn-list-item a {
  color: var(--color-grey-dark);
  position: relative;
  padding-left: 2rem;
  display: inline-block;
  text-decoration: none;
  font-size: 1.125rem;
}

.btn-list-item a:hover {
  text-decoration: underline;
  text-underline-offset: 0.25em;
  text-decoration-thickness: 1px;
}

.d-item {
  position: relative;
  z-index: 1;
}

.btn-list-item a[data-type="file"]:before {
  background-image: var(--icon-download-primary);
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 1.25rem;
  display: block;
  content: '';
  width: 1.5rem;
  height: 1.5rem;
  position: absolute;
  top: 0;
  left: 0;
}

.btn-list-item a[data-type="internal"]:before,
.btn-list-item a[data-type="external"]:before {
  background-image: var(--icon-link-primary);
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 1.25rem;
  display: block;
  content: '';
  width: 1.5rem;
  height: 1.5rem;
  position: absolute;
  top: 0;
  left: 0;
}

/* Toggle Button */
.btn-list-item label:after {
  background-image: none;
}

.togglelinks {
  display: block;
  text-indent: -99999px;
  cursor: pointer;
  /*background: linear-gradient(0deg, rgba(235, 235, 235, 1) 0%, rgba(235, 235, 235, 1) 30%, rgba(235, 235, 235, 0) 100%);*/
  font-size: 0;
  line-height: 0;
  height: 4rem !important;
  position: relative;
  bottom: 0px;
  width: 100%;
  transition: background-color 0.3s ease;
}

.togglelinks:before {
  display: block;
  content: '';
  width: 100%;
  height: 100%;
  background: var(--arrow-narrow-down-primary);
  background-repeat: no-repeat;
  background-size: 1.25rem auto;
  background-position: center;
}

.toggle-checkbox:checked ~ .togglelinks {
  position: absolute;
  width: 100%;
  bottom: -2rem;
}

input.toggle-checkbox:checked ~ .togglelinks::before {
  display: block;
  content: '';
  width: 100%;
  height: 100%;
  background: var(--arrow-narrow-up-primary);
  background-repeat: no-repeat;
  background-size: 1.25rem auto;
  background-position: center;
}

/* class checkbox */
.toggle-checkbox {
  display: none;
}

/* Hidden Element */

.more-links {
  height: 0;
  position: relative;
  overflow: hidden;
  transition: height 0.5s ease, padding 0.5s ease;
  top: -2.8rem;
}

@media (max-width: 1400px) {
  .more-links {
      top: -2.4rem;
  }

  .toggle-checkbox:checked~.togglelinks {
      margin-bottom: -10px;
  }
}

@media (max-width: 767px) {
  .more-links {
      top: -1.7rem;
  }
}

/* visible element */
input.toggle-checkbox:checked ~ .more-links {
  height: auto;
  padding-top: 1rem;
  padding-bottom: 1rem;
  top: -1rem;
}

/* height animation fix */
.more-links-content {
  display: flex;
  flex-direction: column;
  height: 0;
  transition: height 0.5s ease;
}

input.toggle-checkbox:checked ~ .more-links .more-links-content {
  height: auto;
}

.togglelinks:hover {
  cursor: pointer;
}

/* Button red prefilled */
a.btn-wfbb.filled {
  background-color: var(--color-primary);
  color: #fff;
}

a.btn-wfbb.filled:hover {
  background-color: var(--color-primary-dark);
  color: #fff;
  border: 2px solid var(--color-primary-dark);
}

a.btn-wfbb.filled::after {
  content: '';
  background-image: var(--arrow-next-white);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  width: 1.063em;
  position: absolute;
  right: 1em;
  height: 100%;
  top: 0;
}