/* ========================================================= */
/* Patterns: Card Gruppe mit Tastennavigation                */
/* ========================================================= */

.sg-content-block-card-group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-small);
  width: 100%;
  --surface-tab-unselected: var(--color-white);
}

.sg-content-block-card-group__tabs,
.sg-content-block-card-group__panels,
.sg-content-block-card-group__panel,
.sg-content-block-card-group__card {
  width: 100%;
}

.sg-content-block-card-group__panel[hidden] {
  display: none;
}

.sg-content-block-card-group__title {
  color: var(--text-content-block-card-title);
  background: var(--surface-content-block-card-title);
}

.sg-content-block-card-group__content {
  color: var(--text-content-block-card-content);
  background: var(--surface-content-block-card-content);
}

.sg-content-block-card-group__content .sg-body {
  margin: 0;
}

@media (max-width: 767px) {
  .sg-content-block-card-group__tabs[role="tablist"] > [role="tab"] {
    flex: 0 0 calc(
      (
        100%
        - (var(--spacing-small) * (var(--sg-tab-mobile-row-slots, 1) - 1))
      )
      / var(--sg-tab-mobile-row-slots, 1)
    );
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
  }
}