/* ============================================================
   RANDORI PRO · Standort Wilmersdorf v2 „High End" — Politur
   Additiv zu tokens.css + standort.css + wilmersdorf.css und zur
   geteilten v3-Schicht (standort-v3.css: Progress, Glas-Header,
   [data-rv]-Reveals, Kicker-Linien, Button-Glanz, Pfadlinie,
   Trainer-Hover). Hier nur die Urban-Performance-Sektionen (w-*).
   Keine neuen Farben, Schriften oder Komponenten.
   Aktiv ausschließlich unter body.v3.
   Alle Animationen respektieren prefers-reduced-motion.
   ============================================================ */

/* Hero-Parallax entfernt — Motion-Vokabular: Konsistenz vor Effekt.
   Das Bewegungsfoto steht statisch; der Hero-Einstieg bleibt als
   einmaliger, gestraffter Load-Moment (~600ms). */

/* ── Karten · sanfte Hover-Lifts auf den großen Bild-Kacheln ── */
.v3 .w-tile--img { transition: transform 600ms var(--v3-ease), box-shadow 600ms var(--ease-standard); }
.v3 .w-tile--img:hover { transform: translateY(-6px); box-shadow: 0 32px 64px -32px rgba(20, 8, 11, 0.55); }

/* ============================================================
   MOTION — nur bei prefers-reduced-motion: no-preference
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {

  /* Hero-Entrance · gestaffeltes Aufsteigen, Foto blendet nach */
  .v3 .w-hero__kicker { animation: wv-rise 600ms var(--v3-ease) 100ms backwards; }
  .v3 .w-hero .s-kicker::before { animation: wv-line 500ms var(--v3-ease) 360ms backwards; }
  .v3 .w-hero__h1 { animation: wv-rise 600ms var(--v3-ease) 180ms backwards; }
  .v3 .w-hero__sub { animation: wv-rise 600ms var(--v3-ease) 280ms backwards; }
  .v3 .w-hero__cta { animation: wv-rise 600ms var(--v3-ease) 380ms backwards; }
  .v3 .w-hero__cta + .w-cta-note { animation: wv-rise 600ms var(--v3-ease) 440ms backwards; }
  .v3 .w-hero__media { animation: wv-fade 700ms var(--ease-standard) 150ms backwards; }
  .v3 .w-hero__sig { animation: wv-fade 600ms var(--ease-standard) 620ms backwards; }

  @keyframes wv-rise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } }
  @keyframes wv-fade { from { opacity: 0; } to { opacity: 1; } }
  @keyframes wv-line { from { width: 0; } }

  /* ── Akzent-Animation der Seite · „Seit 1993" ──────────────
     Die Zeitleiste zeichnet sich von links, die drei Knoten
     leuchten nacheinander auf (JS setzt .is-lit auf .w-origin);
     die Jahreszahl zählt per JS kurz an. Ohne JS: statisch. */
  .v3.js-motion .w-origin__line { border-top-color: transparent; position: relative; }
  .v3.js-motion .w-origin__line::after { content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 1px; background: rgba(255, 255, 255, 0.2); transform: scaleX(0); transform-origin: 0 50%; transition: transform 1400ms var(--v3-ease); }
  .v3.js-motion .w-origin.is-lit .w-origin__line::after { transform: scaleX(1); }
  .v3.js-motion .w-origin__node::before { transform: scale(0); transition: transform 420ms var(--v3-ease), box-shadow 600ms var(--ease-standard); }
  .v3.js-motion .w-origin.is-lit .w-origin__node::before { transform: scale(1); box-shadow: 0 0 0 6px rgba(220, 13, 29, 0.16); }
  .v3.js-motion .w-origin.is-lit .w-origin__node:nth-child(1)::before { transition-delay: 250ms; }
  .v3.js-motion .w-origin.is-lit .w-origin__node:nth-child(2)::before { transition-delay: 800ms; }
  .v3.js-motion .w-origin.is-lit .w-origin__node:nth-child(3)::before { transition-delay: 1350ms; }
}

/* Zitate-Stapel (css/zitate-stapel.css): Die Karten dieser Seite haben
   keine Sternezeile — die Sternebewertung der einzelnen Google-Rezensionen
   liegt nicht vor. Damit der Zitattext nicht an der Kartennummer klebt,
   bekommt er den Abstand, den sonst die Sterne einnehmen. */
.zs-num + .zs-text { margin-top: 36px; }

/* Hero · echtes Foto „Hero Wilmersdorf" (quer, seit Oktober 2026).
   Auf breiten Bildschirmen stünde der Sportler am Sandsack sonst genau
   hinter der Textspalte (und unter ihrem dunklen Verlauf). Dort beginnt
   das Foto deshalb erst rechts der Textspalte und läuft nach links weich
   aus; den Ausschnitt setzt --fp am Bild. Hochformatige Bildschirme
   (Tablet hochkant, Handy) behalten das vollflächige Foto. */
@media (min-width: 901px) and (min-aspect-ratio: 1/1) {
  .w-hero__media img {
    left: 46%;
    width: 54%;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 16%);
            mask-image: linear-gradient(90deg, transparent 0%, #000 16%);
  }
}

/* Kachel Kung Fu (KI-Bild) · KI-Hinweis auf dem Handy kleiner und enger
   in die Ecke: Der Bildstreifen ist dort nur 68 px hoch, das Etikett in
   Normalgröße bedeckte rund die Hälfte davon samt Kopf der Figur. */
@media (max-width: 768px) {
  .w-tile--sm.ki-bild .ki-hinweis { top: 4px; right: 4px; font-size: 9px; padding: 1px 6px; }
}

/* Zitate-Stapel · Abschlusskarte („Die nächste Stimme …") deckt den
   Stapel ab. Ihr Text ist kurz, ohne Mindesthöhe war sie deutlich
   niedriger als die Bewertungskarten darunter, die dann oben und unten
   herausragten. Jetzt so hoch wie die Karten darunter, Inhalt mittig.
   Höchstens so hoch wie die freie Fläche (gleiche Rechnung wie die
   max-height in css/zitate-stapel.css). Nur mit Bewegung — bei
   reduzierter Bewegung stehen die Karten ohnehin untereinander. */
@media (prefers-reduced-motion: no-preference) {
  .zs-card--anker {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: min(460px, calc(100svh - var(--zs-oben) - var(--zs-unten) - 16px));
  }
  .zs-card--anker .zs-btn { align-self: flex-start; }
}
@media (prefers-reduced-motion: no-preference) and (min-width: 769px) {
  .zs-card--anker { min-height: min(470px, calc(100svh - var(--zs-oben) - var(--zs-unten) - 16px)); }
}
@media (prefers-reduced-motion: no-preference) and (min-width: 1101px) {
  .zs-card--anker { min-height: min(560px, calc(100svh - var(--zs-oben) - var(--zs-unten) - 16px)); }
}

/* Zitate-Stapel · Reihenfolge der Bewertungen nach Länge (lang → kurz,
   15.10.2026), damit beim Überschieben die Kante der unteren Karte
   oben herausschaut wie in Waltersdorf. Kleine Handys (z. B. 360×640):
   Die längste Karte war einige Pixel höher als die freie Fläche und
   hätte in sich gescrollt — etwas weniger Abstand über dem Zitat
   genügt (die Nummer steht dort oben rechts). */
@media (max-width: 400px) and (max-height: 700px) {
  .zs-section .zs-num + .zs-text { margin-top: 24px; }
}