/* Ergänzungen für eine stabile Darstellung auf Desktop, Tablet und Mobilgeräten. */
.hero-photo { position: relative; overflow: hidden; background: #24282c; }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 48% center; }

@media (min-width: 901px) {
  .hero-grid, .hero-photo { min-height: clamp(440px, 42vw, 600px); }
}

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-photo { min-height: 0; aspect-ratio: 16 / 10; }
  .hero-copy { padding: 38px 30px; }
  .quick-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 620px) {
  .container { width: min(calc(100% - 24px), var(--max)); }
  .hero { padding-top: 12px; }
  .hero-photo { aspect-ratio: 4 / 3; }
  .hero-photo img { object-position: 43% center; }
  .hero-copy { padding: 32px 22px; }
  .hero-copy h1 { font-size: clamp(34px, 11vw, 45px); }
  .quick-grid { grid-template-columns: 1fr; }
  .quick-grid a { padding: 15px 16px; }
  .main { gap: 28px; padding: 32px 0 48px; }
  .feature-copy, .side { padding: 18px; }
  .footer-main { padding: 26px 0; flex-direction: column; gap: 12px; }
}