/* Hält Hero-Inhalt und Terminleiste unabhängig von Text- und Fensterhöhe getrennt. */
.hero {
  height: auto;
  min-height: 920px;
}

.hero-content {
  top: 155px;
  transform: none;
  max-width: min(780px, 76vw);
}

.hero-content h1 { margin-top: 18px; }
.hero-content > p { margin: 22px 0 0; }
.hero-actions { margin-top: 28px; }

.hero-meta {
  min-height: 104px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  gap: 0;
}

.hero-meta > div { min-width: 0; }

@media (max-width: 1100px) {
  .hero { min-height: 900px; }
  .hero-content { top: 140px; max-width: 76vw; }
  .hero-meta > div:not(.countdown) { padding-right: 22px; }
  .hero-meta strong { font-size: 15px; }
}

@media (max-width: 900px) {
  .hero { min-height: 900px; }
  .hero-content { top: 125px; max-width: none; }
  .hero-actions { margin-top: 24px; }
  .hero-meta { min-height: 94px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .hero { min-height: 980px; }
  .hero-content { top: 112px; }
  .hero-content h1 { margin-top: 13px; }
  .hero-content > p { margin-top: 17px; }
  .hero-actions { margin-top: 22px; gap: 16px; }
  .hero-meta { min-height: 116px; }
  .hero-meta > div:nth-child(2) { display: block; }
}

@media (max-height: 760px) and (min-width: 901px) {
  .hero { min-height: 860px; }
  .hero-content { top: 125px; }
  .hero-content h1 { font-size: clamp(52px, 5.6vw, 78px); }
  .hero-content > p { margin-top: 14px; line-height: 1.55; }
}