article.service {
  color: var(--weiss);
}

article.service .btn-secondary {
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.2);
  padding: 7px 10px;
}

article.service .btn-secondary:hover,
article.service .btn-secondary:focus,
article.service .btn-secondary:focus-visible {
  background: rgba(255, 255, 255, 0.1);
}

/* SVG animation */

article.service div.btn-service svg {
  overflow: visible;
}

article.service div.btn-service a.current-page path {
  fill: white !important;
  animation: none !important;
  fill-opacity: 1;
}

@keyframes fillAnimationInterim {
  0%,
  100% {
    fill-opacity: 0.2;
    fill: white;
  }
  50% {
    fill-opacity: 1;
    fill: var(--gelb);
  }
}

@keyframes fillAnimationLeadership {
  0%,
  100% {
    fill-opacity: 0.2;
    fill: white;
  }
  50% {
    fill-opacity: 1;
    fill: var(--rot);
  }
}

@keyframes fillAnimationStrategie {
  0%,
  100% {
    fill-opacity: 0.2;
    fill: white;
  }
  50% {
    fill-opacity: 1;
    fill: var(--grun);
  }
}

@keyframes fillAnimationUmsetzung {
  0%,
  100% {
    fill-opacity: 0.2;
    fill: white;
  }
  50% {
    fill-opacity: 1;
    fill: var(--blau);
  }
}

article.service div.btn-service a.interim:hover {
  transform: translateX(2px);
}

article.service div.btn-service a.leadership:hover {
  transform: translateY(2px);
}

article.service div.btn-service a.strategie:hover {
  transform: translateX(-2px);
}

article.service div.btn-service a.umsetzung:hover {
  transform: translateY(-2px);
}

article.service div.btn-service a {
  transition: transform 0.2s ease-in-out;
}

article.service div.btn-service a.interim path {
  animation: fillAnimationInterim 6s ease-in-out infinite;
}

article.service div.btn-service a.leadership path {
  animation: fillAnimationLeadership 6s ease-in-out infinite;
  animation-delay: 1.5s; /* Adjust delay as needed */
}

article.service div.btn-service a.strategie path {
  animation: fillAnimationStrategie 6s ease-in-out infinite;
  animation-delay: 3s; /* Adjust delay as needed */
}

article.service div.btn-service a.umsetzung path {
  animation: fillAnimationUmsetzung 6s ease-in-out infinite;
  animation-delay: 4.5s; /* Adjust delay as needed */
}

/* Akkordeon */

article.service section.akkordeon {
  color: var(--weiss);
}

article.service section.text_detail .col-lg-10,
article.service section.akkordeon .col-lg-10 {
  background-color: var(--weiss);
  display: flex;
  padding: 30px;
  flex-direction: column;
  align-self: stretch;
  border-radius: 20px;
}

article.service section.text_detail .detail,
article.service section.akkordeon .akkordeon_card {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

article.service section.text_detail .detail:last-of-type,
article.service section.akkordeon .akkordeon_card:first-child {
  border-bottom: none;
  padding-bottom: 0;
}

article.service section.akkordeon a,
article.service section.akkordeon a:hover,
article.service section.akkordeon a p {
  color: var(--weiss);
  text-decoration: none;
  margin-bottom: 0;
}

article.service section.akkordeon .card-header[aria-expanded="false"] svg,
article.service section.akkordeon .card-header[aria-expanded="true"] svg,
article.service section.akkordeon a:hover svg path,
article.service section.akkordeon a:hover svg rect {
  transition: all 300ms ease-in;
}

article.service section.akkordeon .card-header[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

article.service section.akkordeon .card-header[aria-expanded="false"] svg {
  transform: rotate(0deg);
}

article.service.red section.akkordeon a svg path {
  fill: var(--rot);
}

article.service.blue section.akkordeon a svg path {
  fill: var(--blau);
}
article.service.green section.akkordeon a svg path {
  fill: var(--grun);
}
article.service.yellow section.akkordeon a svg path {
  fill: var(--gelb);
}

article.service section.akkordeon a:hover svg path {
  fill: var(--weiss);
}

article.service section.akkordeon a:hover svg rect {
  fill: rgba(255, 255, 255, 0.15);
}

/* text detail */

article.service section.text_detail {
  color: var(--schwarz);
}

article.service section.text_detail .detail .counter {
  border-radius: 50px;
  display: inline-flex;
  width: 36px;
  height: 36px;
  flex-direction: column;
  justify-content: center;
  color: var(--weiss);
  align-items: center;
}

article.service.red section.text_detail .detail .counter {
  background: var(--rot);
}

article.service.blue section.text_detail .detail .counter {
  background: var(--blau);
}

article.service.green section.text_detail .detail .counter {
  background: var(--grun);
}

article.service.yellow section.text_detail .detail .counter {
  background: var(--gelb);
}

article.service .col-lg-1 {
  z-index: 1050;
}

article.service section.tatigkeitsbereiche_teaser .row:has(.col-lg-4),
article.service section.tatigkeitsbereiche_teaser .row:has(.col-xl-4),
article.service section.tatigkeitsbereiche_teaser .row:has(.col-md-4) {
  --bs-gutter-x: 50px;
  --bs-gutter-y: 50px;
}

article.service section.tatigkeitsbereiche_teaser .square_card .overlay {
  background-size: cover;
  background-blend-mode: color-burn;
  height: auto;
  min-height: 250px;
  border-top-left-radius: var(--border-radius);
  border-top-right-radius: var(--border-radius);
}

article.service section.tatigkeitsbereiche_teaser .square_card .overlay img {
  border-top-left-radius: var(--border-radius);
  border-top-right-radius: var(--border-radius);
}

article.service section.tatigkeitsbereiche_teaser .card_content {
  padding: 30px;
  gap: 30px;
  border-radius: 0 0 20px 20px;
  z-index: 2;
  color: var(--weiss);
  min-height: 155px;
}

@media (max-width: 1440px) {
  article.service section.tatigkeitsbereiche_teaser .card_content h4 {
    min-height: 46px;
  }
}

@media (max-width: 992px) {
  article.service section.tatigkeitsbereiche_teaser .square_card {
    height: auto;
    margin-bottom: 30px;
  }

  article.service section.tatigkeitsbereiche_teaser .card_content p {
    font-size: 17.5px;
  }

  article.service section.akkordeon .akkordeon_container {
    padding-right: calc(var(--bs-gutter-x) * 0.5);
    padding-left: calc(var(--bs-gutter-x) * 0.5);
  }

  article.service .btn-secondary {
    display: none;
  }
}

@media (max-width: 767px) {
  article.service section.tatigkeitsbereiche_teaser .row:has(.col-lg-4),
  article.service section.tatigkeitsbereiche_teaser .row:has(.col-xl-4),
  article.service section.tatigkeitsbereiche_teaser .row:has(.col-md-4) {
    --bs-gutter-x: 30px;
    --bs-gutter-y: 30px;
  }
}