/* IQ Media Arts — Startseite: ruhiges filmisches Motiv (nur index.html).
   Alle anderen Seiten und das CMS bleiben unverändert. */
.site-hero {
  isolation: isolate;
  background: #09090a;
  min-height: 680px;
}
.site-hero .hero-art {
  z-index: 0;
  overflow: hidden;
}
/* Hide the former abstract moving film-reel graphics on the home page only. */
.site-hero .hero-art::before,
.site-hero .hero-art::after {
  display: none;
  content: none;
  animation: none;
}
.site-hero .hero-photo {
  position: absolute;
  inset: -5%;
  width: 110%;
  height: 110%;
  max-width: none;
  object-fit: cover;
  object-position: 53% 48%;
  transform-origin: 53% 50%;
  filter: saturate(.82) brightness(.82);
  animation: iqSlowCameraMove 20s ease-in-out infinite alternate;
}
/* Gradient protects headline readability without hiding the real film-set image. */
.site-hero::before {
  background: linear-gradient(90deg,
    rgba(6,7,8,.91) 0%,
    rgba(6,7,8,.71) 30%,
    rgba(6,7,8,.39) 58%,
    rgba(6,7,8,.15) 100%),
    linear-gradient(0deg, rgba(6,7,8,.54), transparent 35%);
}
.site-hero::after {opacity: .16}
.site-hero .hero-content {padding-bottom: 80px}
.site-hero .display {
  font-size: clamp(43px, 4.7vw, 74px);
  font-weight: 620;
  line-height: 1.13;
  max-width: 890px;
  letter-spacing: -.043em;
  text-wrap: balance;
  text-shadow: 0 3px 32px rgba(0,0,0,.35);
}
.site-hero .display span {color: #e0dedb}
.site-hero .eyebrow {color: #c9838c}
.site-hero .hero-content .lede {color: #d0ccca}
.site-hero .set-attribution {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-transform: none;
  letter-spacing: normal;
  max-width: 450px;
}
.site-hero .set-attribution strong {
  display: block;
  color: #e3dedc;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .13em;
  text-transform: none;
}
.site-hero .set-attribution small {
  display: block;
  color: #b9b4b3;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .015em;
  line-height: 1.4;
}
@keyframes iqSlowCameraMove {
  0% {transform: translate3d(-.8%, .35%, 0) scale(1.015)}
  100% {transform: translate3d(1%, -.45%, 0) scale(1.095)}
}
@media (max-width: 850px) {
  .site-hero {min-height: 690px}
  .site-hero .hero-photo {object-position: 50% 50%}
  .site-hero::before {background: linear-gradient(90deg, rgba(6,7,8,.86), rgba(6,7,8,.41)), linear-gradient(0deg, rgba(6,7,8,.64), transparent 36%)}
  .site-hero .hero-content {padding-bottom: 180px}
  .site-hero .display {font-size: clamp(40px, 8vw, 65px)}
  .site-hero .hero-meta {display: flex;bottom: 22px}
  .site-hero .hero-meta > span:last-child {display:none}
}
@media (max-width: 550px) {
  .site-hero {min-height: 680px}
  .site-hero .hero-photo {object-position: 50% 50%}
  .site-hero .display {font-size: clamp(36px, 9.6vw, 50px)}
  .site-hero .hero-content {padding-top: 135px;padding-bottom: 185px}
  .site-hero .set-attribution small {font-size: 10px}
}
@media (prefers-reduced-motion: reduce) {
  .site-hero .hero-photo {animation: none;transform: scale(1.035)}
}