/*
 * Text 2-column module — SD-38
 * Figma: content modules / text / 2-clmns (node 6361-114356)
 * Two-column editorial container: label + headline (left), content elements
 * (right). Background white (default) or Secondary 02. Module-level layout
 * only — the content elements bring their own component styles.
 *
 * Breakpoints (Feedback 7880:67212 / 04.08):
 * L: 420px + 1fr, gap spacing-05
 * M (≤1024): 398px + 1fr, gap spacing-05
 * Mid (≤896): fluid left col + smaller module headline (doesn’t fall apart)
 * S (≤700 / 44rem): single column — zweispaltig bis 700 (Prio 02)
 */

.dk-text-2clmns {
  padding-block: var(--dk-space-section-xs); /* Figma section-xs */
  padding-inline: var(--dk-space-page-inline);
  color: var(--dk-color-black);
}

.dk-text-2clmns--secondary02 {
  background-color: var(--dk-color-brand-secondary-02);
}

.dk-text-2clmns__inner {
  max-inline-size: 88.75rem; /* 1420px — Figma L inner */
  margin-inline: auto;
  display: grid;
  grid-template-columns: 26.25rem minmax(0, 1fr); /* 420px — Figma L headline */
  gap: var(--dk-space-05); /* 24px — Figma spacing-05 */
}

.dk-text-2clmns__label {
  margin: 0 0 var(--dk-space-01);
}

.dk-text-2clmns__headline {
  margin: 0;
  hyphens: auto;
}

.dk-text-2clmns__head {
  padding-inline-end: var(--dk-space-05); /* Figma headline pr */
  position: sticky;
  /* Below fixed anchor nav when stuck (set by anchornav.js), else page inset */
  inset-block-start: calc(var(--dk-sticky-inset-block-start, var(--dk-space-06)) + var(--dk-space-08));
  align-self: start;
  min-inline-size: 0;
}

.dk-text-2clmns__content {
  display: flex;
  flex-direction: column;
  gap: var(--dk-space-04); /* Figma content stack */
  min-inline-size: 0;
  padding-block-start: var(--dk-space-02);
}

@media (max-width: 64rem) {
  .dk-text-2clmns__inner {
    grid-template-columns: 24.875rem minmax(0, 1fr); /* 398px — Figma M headline */
  }
}

/* Mid tablet: shrink left col + module headline so columns don’t pull apart */
@media (max-width: 56rem) {
  .dk-text-2clmns__inner {
    grid-template-columns: minmax(9rem, 0.4fr) minmax(0, 1fr);
  }

  .dk-text-2clmns__headline {
    font-size: var(--dk-text-heading-s-size);
  }
}

/* Single column ≤700px (44rem) — Feedback: Zweispaltigkeit bis 700 */
@media (max-width: 44rem) {
  .dk-text-2clmns__inner {
    grid-template-columns: 1fr;
    gap: var(--dk-space-05);
  }

  .dk-text-2clmns__head {
    position: static;
    padding-inline-end: 0;
  }

  .dk-text-2clmns__content {
    padding-block-start: 0;
  }
}