/* Startseite: Hero-Animation, Bild-Zoom der Wohnungskarten, Feature-Texte, pulsierende Karten-Pins (content/home-motion.js) */

/* 1 · Hero: Wörter steigen gestaffelt auf */
.hm-word { display: inline-block; opacity: 0; transform: translateY(.45em); filter: blur(6px);
  animation: hm-rise .9s cubic-bezier(.2,.8,.2,1) forwards; animation-delay: calc(var(--i) * 110ms + 150ms); }
@keyframes hm-rise { to { opacity: 1; transform: none; filter: none; } }
.trust-metric strong { font-variant-numeric: tabular-nums; }

/* 3 · Wohnungskarten: Bild zoomt im Rahmen auf 110 % */
.prop-img-wrap { overflow: hidden; }
.prop-img { transition: transform 2.2s cubic-bezier(.25,.6,.3,1); will-change: transform; }
@media (hover: hover) { .prop-card:hover .prop-img { transform: scale(1.1); } }
.prop-card.hm-active .prop-img { transform: scale(1.1); }

/* 4 · What we offer: Titel stehen, Beschreibung fliegt weich ein */
.hm-desc { opacity: 0; transition: opacity .8s ease, transform .9s cubic-bezier(.2,.8,.2,1); transition-delay: .12s; }
.hm-desc.hm-from-left { transform: translateX(-48px); }
.hm-desc.hm-from-right { transform: translateX(48px); }
.hm-desc.hm-in { opacity: 1; transform: none; }

/* 2 · Karten-Pins: Pulsring unter jedem Marker */
.hm-pulse { position: absolute; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%;
  border: 2px solid #93a69a; pointer-events: none; animation: hm-pulse 2.4s ease-out infinite; }
@keyframes hm-pulse { from { transform: scale(1); opacity: .85; } to { transform: scale(2.8); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .hm-word { animation: none; opacity: 1; transform: none; filter: none; }
  .prop-img { transition: none; }
  .hm-desc, .hm-desc.hm-from-left, .hm-desc.hm-from-right { opacity: 1; transform: none; transition: none; }
  .hm-pulse { display: none; }
}

/* Gruppen-Popup auf der Karte: Stapel-Karussell ohne Popup-Rahmen (content/home-motion.js) */
.gm-style .gm-style-iw-c:has(.hm-carousel), .gm-style .gm-style-iw-d:has(.hm-carousel) {
  max-height: none !important; max-width: none !important; background: transparent !important; box-shadow: none !important; overflow: visible !important; }
.gm-style .gm-style-iw-c:has(.hm-carousel) .gm-style-iw-chr { display: none; }
.gm-style .gm-style-iw-c:has(.hm-carousel) + .gm-style-iw-tc { display: none; }
.hm-carousel { position: relative; width: var(--hm-w, 360px); padding: 14px 0 6px; font-family: 'Archivo', sans-serif; }
.hm-stack { position: relative; height: 350px; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.hm-slide { position: absolute; left: 50%; top: 0; width: var(--hm-slide, 240px); margin-left: calc(var(--hm-slide, 240px) / -2);
  border-radius: 14px; overflow: hidden; background: #fff; box-shadow: 0 14px 34px rgba(0,0,0,.28); transform-origin: center; will-change: transform; }
.hm-slide > div { width: var(--hm-slide, 240px) !important; }
.hm-stack:not(.hm-drag) .hm-slide { transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.hm-stack:not(.hm-drag) .hm-slide > div { transition: opacity .5s ease, filter .5s ease; }
.hm-slide:not(.hm-active) { cursor: pointer; }
.hm-slide img, .hm-slide a { -webkit-user-drag: none; }
.hm-slide:not(.hm-active) * { pointer-events: none; }
.hm-close { position: absolute; top: 0; left: 50%; margin-left: calc(var(--hm-slide, 240px) / 2 - 18px); width: 30px; height: 30px;
  border-radius: 50%; border: 0; background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.2); font-size: 18px; line-height: 1; color: #555;
  cursor: pointer; z-index: 200; }
.hm-nav { display: flex; width: max-content; margin: 10px auto 0; align-items: center; gap: 12px; padding: 5px 10px; border-radius: 999px;
  background: rgba(255,255,255,.94); box-shadow: 0 4px 16px rgba(0,0,0,.18); color: #7a9085; }
.hm-nav > button { border: 0; background: none; font-size: 18px; color: #7a9085; cursor: pointer; padding: 2px 6px; }
.hm-dots { display: flex; gap: 6px; }
.hm-dots button { width: 7px; height: 7px; border-radius: 50%; border: 0; padding: 0; background: #c9d3cd; cursor: pointer; transition: width .3s, background .3s; }
.hm-dots button.hm-on { width: 18px; border-radius: 4px; background: #7a9085; }
.hm-count { font-size: 12px; font-variant-numeric: tabular-nums; min-width: 44px; text-align: center; }
@media (prefers-reduced-motion: reduce) { .hm-slide, .hm-slide > div { transition: none !important; } }