.area-hof { padding: 4rem 0; background: #f5f5f5; }
.area-hof h2 { text-align: center; margin: 0 0 1rem; }
.area-hof-track { display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 4px 16px; }
.area-hof .pass-card { flex: 0 0 280px; min-width: 0; overflow: hidden; border: 1px solid #e1e1e1; border-radius: 4px; background: #fff; scroll-snap-align: start; }
.area-hof .pass-card-image img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.area-hof .pass-card-body { padding: 20px; }
.area-hof .pass-card-name { font-size: 1.25rem; line-height: 1.3; margin: 0 0 10px; }
.area-hof .pass-card-body p { font-size: 1rem; line-height: 1.5; margin: 6px 0 0; }
.area-hof .pass-card-date, .area-hof .pass-card-faults, .area-hof .pass-card-area { color: #666; }
.area-hof-controls { display: flex; justify-content: center; gap: 12px; margin-top: 20px; }
.area-hof-controls[hidden] { display: none; }
.area-hof-controls button { border: 0; border-radius: 50%; width: 48px; height: 48px; font-size: 24px; background: #d21123; color: #fff; cursor: pointer; }
.area-hof-controls button:disabled { opacity: .4; cursor: default; }
.area-hof :focus-visible { outline: 3px solid #222; outline-offset: 3px; }
.area-hof-link { text-align: center; margin: 24px 0 0; }
.area-hof-link a { color: #b50f20; font-weight: 700; }
@media (max-width: 600px) { .area-hof { padding: 3rem 0; } .area-hof .pass-card { flex-basis: 82%; } }

.area-hof .area-hof-subtitle { max-width: 960px; margin: 0 auto 2rem; text-align: center; font-family: Raleway, sans-serif; font-size: clamp(1.125rem, 1.5vw, 1.5rem); font-weight: 300; line-height: 1.6; }