/* ============================================================
   RANDORI PRO · Standorte-Hub v2 „High End"
   Additiv zu tokens.css + standort.css + standorte.css und
   standort-v3.css (Glas-Header, Progress, Reveals, Glanz).
   Eigene Komponenten (.h-*) bekommen hier ihre Politur.
   Aktiv ausschließlich unter body.v3.
   ============================================================ */

/* ── Kacheln · Politur (immer aktiv) ───────────────────────── */
.v3 .h-tile { transition: transform 500ms var(--v3-ease), box-shadow 500ms var(--ease-standard), border-color 300ms var(--ease-standard); }
.v3 .h-tile:hover { transform: translateY(-6px); box-shadow: 0 32px 60px -30px rgba(26, 20, 20, 0.45); }
.v3 .h-tile__badge { transition: background 300ms var(--ease-standard); }
/* Cape-Coral-Kachel ist kein Link → kein Hover-Lift */
.v3 .h-tile--cape:hover { transform: none; box-shadow: none; border-color: var(--rp-border); }

/* ── Hero · Microcopy unter dem CTA + 2 ruhige Kennzahlen ────
   (die große Zahlenbühne gehört der Sektion „Zahlen“ allein) */
.v3 .h-hero__hint { margin: 14px 0 0; text-align: center; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.55); }
.v3 .h-hero__stats { grid-template-columns: repeat(2, max-content); column-gap: clamp(72px, 12vw, 160px); }
/* Mobil untereinander (wie in css/mobil-v4.css vorgesehen) — die
   Zwei-Spalten-Regel oben ist spezifischer und schob „+1 Florida"
   rechts aus dem Bild. */
@media (max-width: 560px) { .v3 .h-hero__stats { grid-template-columns: 1fr; } }

/* ── Karte · weicher Schatten-Lift bei Hover ───────────────── */
.v3 .h-map { transition: box-shadow 500ms var(--ease-standard); }
.v3 .h-map:hover { box-shadow: 0 40px 100px -44px rgba(0, 0, 0, 0.55); }

/* ============================================================
   MOTION — nur bei prefers-reduced-motion: no-preference
   (Keyframes v3-rise / v3-fade kommen aus standort-v3.css)
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {

  /* Hero-Entrance · gestaffeltes Aufsteigen (kein Foto → kein Parallax) */
  .v3 .h-hero .s-kicker { animation: v3-rise 900ms var(--v3-ease) 150ms backwards; }
  .v3 .h-hero__h1 { animation: v3-rise 1000ms var(--v3-ease) 280ms backwards; }
  .v3 .h-hero__row { animation: v3-rise 1000ms var(--v3-ease) 460ms backwards; }
  .v3 .h-hero__stats { animation: v3-fade 1000ms var(--ease-standard) 750ms backwards; }

  /* ── AKZENT · Pins landen nacheinander auf der Karte ───────
     Erst nach Consent („Karte laden") wird .h-map sichtbar;
     JS reicht .is-pins nach, sobald .is-loaded gesetzt ist.
     Ohne JS-Motion bleiben die Pins schlicht sichtbar. */
  .v3.js-motion .h-map .s-pin { opacity: 0; transform: translate(-50%, -50%) scale(0); transition: transform 650ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity 250ms var(--ease-standard); }
  .v3.js-motion .h-map.is-pins .s-pin { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  .v3.js-motion .h-map.is-pins .s-pin:hover { transform: translate(-50%, -50%) scale(1.18); }
  .v3.js-motion .h-map.is-pins .s-pin:nth-of-type(1) { transition-delay: 350ms, 350ms; }
  .v3.js-motion .h-map.is-pins .s-pin:nth-of-type(2) { transition-delay: 470ms, 470ms; }
  .v3.js-motion .h-map.is-pins .s-pin:nth-of-type(3) { transition-delay: 590ms, 590ms; }
  .v3.js-motion .h-map.is-pins .s-pin:nth-of-type(4) { transition-delay: 710ms, 710ms; }
  .v3.js-motion .h-map.is-pins .s-pin:nth-of-type(5) { transition-delay: 830ms, 830ms; }
  .v3.js-motion .h-map.is-pins .s-pin:nth-of-type(6) { transition-delay: 950ms, 950ms; }
  .v3.js-motion .h-map.is-pins .s-pin:nth-of-type(7) { transition-delay: 1070ms, 1070ms; }
}