/*
 * Hero Übersichtsseiten module — SD-25
 * Figma: content modules / hero / übersichtsseiten (node 6361-114329)
 * Fullscreen entry module: decorative visual (image+pattern or autoplay video)
 * + label + page headline (H1). Keeps a min-height so it never collapses on
 * short / landscape mobile viewports. Module-level layout only — the visual
 * comes from the img-with-pattern / video-autoplay components.
 */

.dk-hero-uebersicht {
  display: flex;
  flex-direction: column;
  /* Fullscreen, but never shorter than a usable hero on short viewports */
  min-block-size: max(100dvh, 32rem);
  max-block-size: 87.5rem; /* 1400px — Figma note */
  overflow: clip;
  padding: 0;
  background-color: var(--dk-color-white);
  color: var(--dk-color-black);
}

/* Figma img-video: pattern full-bleed; image/video inset via padding.
   Stays full width (no max-width) — only the text block below is capped
   at 1420px, per the ticket; the pattern must remain fullscreen. */
.dk-hero-uebersicht__media {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: flex-end;
  inline-size: 100%;
  min-block-size: 37.5rem; /* 600px — Figma L */
  padding-block-start: var(--dk-space-section-l);
  padding-inline: var(--dk-space-container-s);
  overflow: clip;
}

.dk-hero-uebersicht__media > * {
  flex: 1 1 auto;
  min-block-size: 0;
}

/* Hero context: pattern fills __media edge-to-edge, not img-with-pattern offset */
.dk-hero-uebersicht__media .dk-img-pattern {
  --dk-img-pattern-offset: 0;
  position: static;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0;
  block-size: auto;
}

.dk-hero-uebersicht__media .dk-img-pattern-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.dk-hero-uebersicht__media .dk-img-pattern-fg {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  min-block-size: 0;
  overflow: clip;
}

.dk-hero-uebersicht__media .dk-img-pattern-fg .dk-img,
.dk-hero-uebersicht__media .dk-img-pattern-fg .dk-video-autoplay-media {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  aspect-ratio: unset;
  object-fit: cover;
}

/* Video fills pattern foreground (same inset box as image) */
.dk-hero-uebersicht__media .dk-img-pattern-fg .dk-video-autoplay {
  position: absolute;
  inset: 0;
  display: block;
  inline-size: 100%;
  block-size: 100%;
}

/* Figma copyright-hero-module: bottom-left on the image/video */
.dk-hero-uebersicht__copyright {
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  z-index: 2;
  margin: 0;
  padding: var(--dk-space-00);
  background-color: var(--dk-color-black-20);
  color: var(--dk-color-white);
}

.dk-hero-uebersicht__text {
  display: flex;
  flex-direction: column;
  gap: var(--dk-space-01);
  flex-shrink: 0;
  inline-size: 100%;
  padding-block-start: var(--dk-space-container-xs);
  padding-block-end: var(--dk-space-section-xxs);
  padding-inline: var(--dk-space-container-m);
}

.dk-hero-uebersicht__label,
.dk-hero-uebersicht__headline {
  margin-block: 0;
  margin-inline: auto;
  inline-size: 100%;
  max-inline-size: 88.75rem; /* 1420px — padding is outside, so full 1420px is usable */
  hyphens: auto;
}

@media (max-width: 79.9375rem) {
  .dk-hero-uebersicht__media {
    min-block-size: 31.25rem; /* 500px — Figma M */
  }

  .dk-hero-uebersicht__text {
    padding-inline-end: var(--dk-space-container-m-hero);
  }
}

@media (max-width: 63.9375rem) {
  .dk-hero-uebersicht__media {
    min-block-size: 20rem; /* 320px — Figma S */
  }
}