/* Startseite: Hero (Video + Mini-Konfigurator) — seitenlokales Muster, Pattern-Klassen home-hero-* */
.home-hero { position: relative; isolation: isolate; overflow: hidden; background: var(--color-surface-dark); }
.home-hero-backdrop { position: absolute; inset: 0; z-index: -1; }
.home-hero-media { position: absolute; inset: 0; z-index: -2; }
.home-hero-poster, .home-hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.home-hero-video { opacity: 0; transition: opacity .6s ease; }
.home-hero-media.has-video .home-hero-video { opacity: 1; }
.home-hero-tint { position: absolute; inset: 0; background: linear-gradient(100deg, rgba(5,40,72,.94) 0%, rgba(5,40,72,.82) 42%, rgba(8,61,107,.45) 100%); }
.home-hero-inner { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 28rem); gap: var(--space-2xl); align-items: center; padding-top: var(--space-3xl); padding-bottom: var(--space-3xl); }
.home-hero .home-hero-title { font-size: var(--text-4xl); font-weight: 800; line-height: 1.06; letter-spacing: -.015em; color: var(--color-on-dark); margin: var(--space-xs) 0 var(--space-m); max-width: 19ch; hyphens: manual; overflow-wrap: break-word; }
.home-hero .home-hero-sub { font-size: var(--text-md); line-height: var(--lh-snug); color: var(--color-on-dark); opacity: .9; max-width: 46ch; margin: 0 0 var(--space-m); }
.home-hero-ticks { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-m); }
.home-hero .home-hero-ticks li { display: flex; align-items: center; gap: .5em; font-size: var(--text-sm); color: var(--color-on-dark); }
.home-hero-ticks .icon { color: var(--color-accent); }
.home-hero-config { min-width: 0; color: var(--color-ink); }
@media (max-width: 1024px) {
  .home-hero-inner { grid-template-columns: minmax(0, 1fr); }
  .home-hero-config { max-width: 35rem; }
  .home-hero .home-hero-title { max-width: none; }
}
/* Mini-Konfigurator ist eine helle Karte im dunklen Hero: .on-dark-Regeln zurücksetzen (Spezifität statt !important) */
.on-dark .home-hero-config a:not([class*="btn"]) { color: var(--color-primary); }
.on-dark .home-hero-config p, .on-dark .home-hero-config li { color: var(--color-muted); }
.on-dark .home-hero-config h2, .on-dark .home-hero-config h3 { color: var(--color-heading); }
@media (max-width: 767px) { .home-hero .home-hero-title { hyphens: auto; } }