/* Word breaking code*/
.word-break {
  word-break: break-all;
}

.word-hyphening-desktop {
  hyphens: auto;
}

@media screen and (max-width:480px) {
  .word-hyphening {
    hyphens: auto;
  }

  .word-wrapping {
    word-wrap: break-word;
  }

  .line-break {
    line-break: anywhere;
  }
}

.cmp-socialFeatures__favorite-count, .count-elm {
  display: none;
}

/*Same css that is used for desktop/tablet is now used for mobile since as per design the alignmented should be on right on mobile*/

.socialFeatures .cmp-socialFeatures__wrapper {
  display: flex;
  justify-self: flex-end;
}
    
/* Tabs component now use the same tabson variable also for bottom border*/
    
.cmp-tabs__tablist-wrapper {
  border-bottom: 2px solid var(--tabsOn) !important;
}

.cmp-tabs__tablist-wrapper:after {
  border-bottom: 2px solid var(--tabsOn) !important;
}

.cmp-tabs__tablist-wrapper:before {
  border-bottom: 2px solid var(--tabsOn) !important;
}

/* Fixed the backgroud color for the secondary style button small */

.button--secondary-small .cmp-button {
  background-color: var(--button-secondary-bgColor) !important;
}
/* Fixed the backgroud color for the secondary style button */

.button--secondary .cmp-button {
  background-color: var(--button-secondary-bgColor) !important;
}
/* Fixed the backgroud color for the secondary style button insde the teaser*/

.teaser--button-secondary .cmp-teaser__action-link {
  background-color: var(--button-secondary-bgColor) !important;
}

/*Colors variables-> in case new viarables are needed please create as per below examples*/
.sec-color-title-variable {
  color: var(--textColor-title-2);
}

.primary-color-title-variable {
  color: var(--textColor-title-1);
}
/* Color variable that can be used for fixing the contrast issue inside the table ( please take this and add the class to the corespondent td)*/
.text-color-body-2 {
  color: var(--textColor-body-2) !important;
}

/* Mega Navigation Height and First column Width*/

@media screen and (min-width: 992px) {
  .cmp-megamenu__item--level-0>.cmp-megamenu__group {
    height: 50vh!important;
    min-height: 492px;
 /*same as design from Steph*/;
  }

  .cmp-megamenu__item--level-1>.cmp-megamenu__content {
    width: 250px !important;
  }

  .cmp-megamenu__item--level-3>.cmp-megamenu__content {
    width: 250px !important;
  }
}

#anzeige-description-title2 .cmp-teaser__description {
  color: var(--textColor-title-2);
}

#anzeige-description-title1 .cmp-teaser__description {
  color: var(--textColor-title-1);
}

.cmp-artcle-listv2-title {
  hyphens: auto;
}

#pflichttext-card-id .cmp-articlelistv2__item {
  display: flex;
  flex-direction: column;
}

#pflichttext-card-id .cmp-articlelistv2__item .cmp-articlev2-inner {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.pflichttext-cards {
  text-decoration: underline !important;
  display: block;
  padding-top: 20px;
}

.teaser .cmp-teaser__content:has(>.cmp-teaser__pflichttext)>.cmp-teaser__action-container, .teaser .cmp-teaser__content:has(>.cmp-teaser__pflichttext)>.cmp-teaser__pflichttext{
    flex: 1 1 100% !important;
}
.cmp-articlelistv2__pflichttext a:hover{
     color: var(--textColor-interaction) !important;
}
.cmp-articlelistv2__item{
    display:flex !important;
    flex-direction:column;
    justify-content: space-between;
}
.cmp-teaserlist__item {
    display:flex !important;
    flex-direction:column;
    justify-content: space-between;
}
.cmp-megamenu__group .open-col-3{
    z-index:2 !important;
}