/*
 * Hero Startseite module — SD-24
 * Figma: content modules / hero / startseite (node 6361-114328)
 * Fullscreen homepage hero: background image/video + scrim + visual headline +
 * optional CTA + copyright + optional infinite news-ticker.
 * Module-level layout only — CTA uses .dk-cta-primary, toggle uses
 * .dk-toggle-playpause.
 */

.dk-hero-start {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-block-size: max(100dvh, 32rem);
  max-block-size: 87.5rem; /* 1400px */
  padding: 0;
  overflow: hidden;
  color: var(--dk-color-white);
}

/* Full-bleed background media */
.dk-hero-start__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.dk-hero-start__video,
.dk-hero-start__img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  display: block;
}

/* Autoplay-video toggle — Figma L/M/S: bottom-right above ticker */
.dk-hero-start__video-control {
  position: absolute;
  inset-block-end: calc(var(--year-h) + 1.5rem); /* 24px above ticker (L/M) */
  inset-inline-end: 1.25rem; /* 20px — Figma L */
  z-index: 3;
}

.dk-hero-start--no-ticker .dk-hero-start__video-control {
  inset-block-end: 1.5rem;
}

@media (max-width: 79.9375rem) {
  .dk-hero-start__video-control {
    inset-inline-end: 0.625rem; /* 10px — Figma M */
  }
}

@media (max-width: 63.9375rem) {
  .dk-hero-start__video-control {
    inset-block-end: calc(var(--year-h) + 1rem); /* 16px above ticker — Figma S */
    inset-inline-end: 0.75rem; /* 12px — Figma S */
  }

  .dk-hero-start--no-ticker .dk-hero-start__video-control {
    inset-block-end: 1rem;
  }
}

/* Dark scrim for legible overlay text */
.dk-hero-start__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgb(0 0 0 / 0) 0%,
    rgb(0 0 0 / 0) 20%,
    rgb(0 0 0 / 0.25) 40%,
    rgb(0 0 0 / 0.6) 60%,
    rgb(0 0 0) 80%
  );
}

.dk-hero-start__copyright {
  position: absolute;
  inset-block-end: var(--year-h);
  inset-inline-start: 0;
  z-index: 2;
  margin: 0;
  padding: var(--dk-space-00);
  background-color: var(--dk-color-black-20);
}

/* Without news-ticker: copyright sits on the module bottom edge (Figma SD-120) */
.dk-hero-start--no-ticker .dk-hero-start__copyright {
  inset-block-end: 0;
}

.dk-hero-start__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: var(--dk-space-05);
  inline-size: 100%;
  max-inline-size: calc(88.75rem + 2 * var(--dk-space-page-inline)); /* 1420px usable + symmetric padding */
  margin-inline: auto;
  padding-inline: var(--dk-space-page-inline); /* 120px symmetric at L */
  padding-block-start: var(--dk-space-13);
  padding-block-end: var(--dk-space-12-hero);
}

.dk-hero-start__headline {
  margin: 0;
  hyphens: auto;
}

.dk-hero-start__cta {
  display: flex;
}

/* ── News-ticker (brandframe) ──────────────────────────────────────────── */
.dk-ticker {
  position: relative;
  z-index: 2;
  inline-size: 100%;
  block-size: var(--year-h);
  background-color: var(--dk-color-brand-primary);
  color: var(--dk-color-black);
  overflow: hidden;
}

/* Figma: play/pause overlays the track at left 12px (44px target) */
.dk-ticker__control {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 0.75rem;
  z-index: 2;
  transform: translateY(-50%);
}

.dk-ticker .dk-toggle-playpause {
  background-color: var(--dk-color-black);
  color: var(--dk-color-white);
}

.dk-ticker .dk-toggle-playpause:hover,
.dk-ticker .dk-toggle-playpause:active {
  background-color: var(--dk-color-black);
}

.dk-ticker .dk-toggle-playpause-icon {
  inline-size: 2rem;
  block-size: 2rem;
}

.dk-ticker__viewport {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.dk-ticker__track {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  inline-size: max-content;
  gap: 0;
  block-size: 100%;
  align-items: center;
  animation: dk-ticker-scroll 40s linear infinite;
}

.dk-ticker__item {
  display: inline-flex;
  align-items: center;
  gap: var(--dk-space-03);
  padding-inline: var(--dk-space-01);
  white-space: nowrap;
}

.dk-ticker__text {
  /* basic.css resets font-weight globally (* { font-weight: normal }) */
  font-weight: var(--dk-text-body-l-weight); /* 500 medium — Figma body-l */
}

.dk-ticker__sep {
  display: inline-flex;
  flex-shrink: 0;
  inline-size: 1.5rem;   /* 24px — Figma L */
  block-size: 1.5rem;
  color: var(--dk-color-black);
}

.dk-ticker__sep svg {
  display: block;
  inline-size: 100%;
  block-size: 100%;
}

@media (max-width: 79.9375rem) {
  .dk-ticker__sep {
    inline-size: 1.25rem; /* 20px — Figma M */
    block-size: 1.25rem;
  }
}

@media (max-width: 63.9375rem) {
  .dk-ticker__item {
    gap: var(--dk-space-03); /* 12px — Figma S */
  }

  .dk-ticker__sep {
    inline-size: 1rem; /* 16px — Figma S */
    block-size: 1rem;
  }
}

/* Pause on hover, on keyboard focus inside (but not when the toggle itself has
   focus — that would block "Play" from resuming), and when toggled off. */
.dk-ticker:hover .dk-ticker__track,
.dk-ticker:focus-within:not(:has([data-ticker-toggle]:focus)) .dk-ticker__track,
.dk-ticker.is-paused .dk-ticker__track {
  animation-play-state: paused;
}

@keyframes dk-ticker-scroll {
  to { transform: translateX(var(--dk-ticker-translate, -50%)); }
}

/* Reduced motion: no scrolling, static list */
@media (prefers-reduced-motion: reduce) {
  .dk-ticker__track {
    animation: none;
  }
}