/* Hero-Kachel mit echten Schauraum-Fotos */
.hp-tile.hp-photo { position: relative; overflow: hidden; isolation: isolate; background: #1d1c18 !important; color: #fff; }
.hp-photo .hp-ph { position: absolute; inset: 0; z-index: 0; }
.hp-photo .hp-ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.1); transition: opacity 1.1s ease, transform 5.2s linear; }
.hp-photo .hp-ph img.on { opacity: 1; transform: scale(1); }
.hp-photo .hp-ph::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14,13,10,.45) 0%, rgba(14,13,10,0) 34%, rgba(14,13,10,.15) 52%, rgba(14,13,10,.86) 100%); }
.hp-photo > :not(.hp-ph) { position: relative; z-index: 1; }
.hp-photo .hs-ic, .hp-photo .hp-arrow { position: absolute; z-index: 2; }
.hp-photo .hp-mid { color: #fff; text-shadow: 0 1px 12px rgba(0,0,0,.35); }
.hp-photo small { color: rgba(255,255,255,.82) !important; }
.hp-photo .hp-arrow { background: rgba(255,255,255,.22) !important; color: #fff !important; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.hp-photo:hover .hp-arrow { background: #9d343a !important; }
.hp-photo .hp-echt { position: absolute; z-index: 2; left: 50%; top: 22px; transform: translateX(-50%); display: none; }
.hp-bars { position: absolute !important; z-index: 2 !important; left: 14px; right: 14px; bottom: 8px; display: flex; gap: 3px; }
.hp-bars i { flex: 1; height: 2px; border-radius: 2px; background: rgba(255,255,255,.3); overflow: hidden; }
.hp-bars i::after { content: ""; display: block; height: 100%; background: #fff; transform: scaleX(0); transform-origin: left; }
.hp-bars i.done::after { transform: scaleX(1); }
.hp-bars i.run::after { animation: hpBar var(--dur, 3800ms) linear forwards; }
@keyframes hpBar { to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .hp-photo .hp-ph img { transition: opacity .4s; transform: none; } .hp-bars { display: none; } }
/* Mobil: Kachel ist eine kleine Zeile – Fotos wechseln im Icon-Feld */
@media (max-width: 620px) {
  body[data-page="home"] #studio .hp-tile.hp-photo { background: #fff !important; color: inherit; }
  .hp-photo .hp-ph, .hp-photo .hp-bars { display: none; }
  .hp-photo .hp-mid { color: inherit; text-shadow: none; }
  .hp-photo small { color: #6c685d !important; }
  .hp-photo .hs-ic { position: relative; background: var(--ph) center/cover, #9d343a !important; transition: background .6s; }
  .hp-photo .hs-ic svg { opacity: 0; }
  .hp-photo .hp-arrow { background: #f2ede4 !important; color: #9d343a !important; }
}