/*
 * Hero Infoseiten module — SD-30
 * Figma: content modules / hero / infoseiten (node 6361-114345)
 * Entry module: coloured box with optional label + page headline (H1).
 * Background Secondary 01 (default) or Primary. Module-level layout only.
 */

.dk-hero-infoseiten {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-block-size: 24.75rem; /* 396px — Figma L */
  padding-block-start: var(--dk-space-section-xl); /* 240px L, 120px S */
  padding-block-end: var(--dk-space-section-xxs);
  padding-inline: var(--dk-space-page-inline);
  color: var(--dk-color-black);
}

.dk-hero-infoseiten--secondary01 {
  background-color: var(--dk-color-brand-secondary-01);
}

.dk-hero-infoseiten--primary {
  background-color: var(--dk-color-brand-primary);
}

.dk-hero-infoseiten__inner {
  display: flex;
  flex-direction: column;
  gap: var(--dk-space-01);
  inline-size: 100%;
  max-inline-size: 88.75rem; /* 1420px — SD-120 revision */
  margin-inline: auto;
}

@media (max-width: 79.9375rem) {
  .dk-hero-infoseiten {
    align-items: center;
    min-block-size: 21.25rem; /* 340px — Figma M */
    padding-block-start: 10rem; /* 160px — Figma M */
  }

  .dk-hero-infoseiten__inner {
    max-inline-size: 88.75rem; /* 1420px — at M padded area < 1420px so this is effectively uncapped */
  }
}

@media (max-width: 63.9375rem) {
  .dk-hero-infoseiten {
    min-block-size: 16.25rem; /* 260px — Figma S */
    padding-block-start: var(--dk-space-section-xl); /* 120px — Figma S */
  }
}

.dk-hero-infoseiten__label,
.dk-hero-infoseiten__headline {
  margin: 0;
  hyphens: auto;
}