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

/* ════════════════════════════════════════════════════════════
   WICHTIG · Steps-Neutralisierung
   Steglitz bringt eine EIGENE Ablauf-Choreografie mit (Nodes,
   Verbindungslinie, Spark, Staffelung aus steglitz.css). Die
   Waltersdorf-Pfadlinien-Styles aus standort-v3.css werden hier
   exakt zurückgenommen, damit nichts doppelt animiert.
   ════════════════════════════════════════════════════════════ */
.v3 .s-steps--steglitz .s-step { padding-top: 0; }
.v3 .s-steps--steglitz .s-step::before,
.v3 .s-steps--steglitz .s-step::after { content: none; }
.v3 .s-steps--steglitz .s-step__num {
  font-family: var(--font-mono); font-weight: 500; font-size: 15px;
  line-height: 1; letter-spacing: 0.12em; color: #fff;
  -webkit-text-stroke: 0; margin: 0 0 32px;
  display: grid; place-items: center;
}
/* Eigene Steps-Reveals der Seite haben Vorrang — v3-Reveal hier aus */
.v3 .s-steps--steglitz [data-rv] { opacity: 1; transform: none; transition: none; }

/* ── Hero · Bild auf eigener Ebene (Parallax via JS) ───────── */
.v3 .c-hero__bg img { will-change: transform; }

/* ── Kacheln & Karten · Politur (immer aktiv) ──────────────── */
.v3 .c-feature { transition: box-shadow 500ms var(--ease-standard); }
.v3 .c-feature:hover { box-shadow: 0 36px 80px -40px rgba(45, 8, 14, 0.55); }
.v3 .c-hood__media img { transition: transform 900ms var(--v3-ease); }
.v3 .c-hood__media:hover img { transform: scale(1.04); }
.v3 .c-voices__arrow { transition: background 260ms var(--ease-standard), border-color 260ms var(--ease-standard), transform 260ms var(--v3-ease); }
.v3 .c-voices__arrow:hover { transform: translateY(-2px); }

/* ============================================================
   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 */
  .v3 .c-hero .s-kicker { animation: v3-rise 900ms var(--v3-ease) 500ms backwards; }
  .v3 .c-hero__h1 { animation: v3-rise 1000ms var(--v3-ease) 630ms backwards; }
  .v3 .c-hero__row { animation: v3-rise 1000ms var(--v3-ease) 810ms backwards; }

  /* ── AKZENT · Community-Signatur: „man kennt sich" ─────────
     Die überlappenden Gesichter poppen nacheinander federnd in
     die Reihe — wie eine Begrüßung am Empfang — danach blendet
     der Schriftzug ein. Läuft einmalig beim Laden des Heros. */
  .v3 .c-welcome { animation: v3-fade 600ms var(--ease-standard) 150ms backwards; }
  .v3 .c-welcome__faces img { animation: v3-face-pop 650ms cubic-bezier(0.34, 1.56, 0.64, 1) backwards; }
  .v3 .c-welcome__faces img:nth-child(1) { animation-delay: 350ms; }
  .v3 .c-welcome__faces img:nth-child(2) { animation-delay: 500ms; }
  .v3 .c-welcome__faces img:nth-child(3) { animation-delay: 650ms; }
  .v3 .c-welcome__faces img:nth-child(4) { animation-delay: 800ms; }
  .v3 .c-welcome__txt { animation: v3-fade 700ms var(--ease-standard) 1000ms backwards; }

  @keyframes v3-face-pop { from { opacity: 0; transform: scale(0.3) translateY(8px); } to { opacity: 1; transform: scale(1) translateY(0); } }

  /* Kicker-Linie · auch für c-Sektionen (Selektor aus standort-v3
     greift bereits auf .s-kicker innerhalb [data-rv]) */
}

/* ── Finaler CTA · langes Schlusswort auf schmalen Handys (06.10.2026)
   „auszuprobieren.“ ist bei 42px breiter als die Zeile auf 320–375px
   und wurde mitten im Wort umbrochen. Schrift dort etwas kleiner. */
@media (max-width: 420px) {
  .v3 .s-final__h { font-size: min(42px, calc((100vw - 48px) / 7.9)); }
}

/* 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-Foto (hochkant) · Ausschnitt Mobil/Tablet (14.10.2026) ─
   Das Hochkantfoto füllt auf Handy und Tablet-Hochformat genau die
   Höhe und ließ sich senkrecht nicht verschieben: Die Gesichter der
   beiden Mädchen lagen hinter Überschrift und Fließtext, oben war nur
   helle Fensterfläche zu sehen, auf der der beige Kicker verschwand.
   Bild deshalb vergrößert und nach oben gezogen (Gesicht des oberen
   Mädchens über dem Kicker), Verlauf oben kräftiger für die Lesbarkeit.
   .v3 vorne, damit die Verlaufsregel aus steglitz.css nicht gewinnt. */
@media (max-width: 768px) {
  .v3 .c-hero--steglitz .c-hero__bg img { top: -58%; height: 162%; }
  .v3 .c-hero--steglitz .c-hero__bg::after {
    background: linear-gradient(180deg, rgba(58,12,18,0.30) 0%, rgba(58,12,18,0.50) 30%, rgba(58,12,18,0.70) 55%, rgba(45,8,14,0.94) 100%);
  }
}
@media (min-width: 769px) and (max-width: 1100px) {
  .v3 .c-hero--steglitz .c-hero__bg img { top: -22%; height: 122%; }
  .v3 .c-hero--steglitz .c-hero__bg::after {
    background: linear-gradient(180deg, rgba(58,12,18,0.30) 0%, rgba(58,12,18,0.45) 36%, rgba(58,12,18,0.66) 64%, rgba(45,8,14,0.92) 100%);
  }
}
/* Tablet quer (z. B. 1024×768): Der Text füllt fast den ganzen Hero und
   liegt zwangsläufig über dem Foto — hier zusätzlich ein linker Verlauf
   hinter der Textspalte, damit Kicker und „kennen." lesbar bleiben. */
@media (min-width: 769px) and (max-width: 1100px) and (min-aspect-ratio: 1/1) {
  .v3 .c-hero--steglitz .c-hero__bg::after {
    background:
      linear-gradient(180deg, rgba(58,12,18,0.40) 0%, rgba(58,12,18,0.30) 30%, rgba(58,12,18,0.62) 70%, rgba(45,8,14,0.92) 100%),
      linear-gradient(90deg, rgba(58,12,18,0.62) 0%, rgba(58,12,18,0.40) 45%, rgba(58,12,18,0) 75%);
  }
}
/* Kicker und beiges Akzentwort stehen auf dem hellen Foto: weicher
   dunkler Schein hinter der Schrift statt einer dunkleren Bildfläche. */
.v3 .c-hero--steglitz .s-kicker { text-shadow: 0 1px 2px rgba(45,8,14,0.6), 0 0 16px rgba(45,8,14,0.65); }
.v3 .c-hero--steglitz .c-hero__h1 em { text-shadow: 0 2px 4px rgba(45,8,14,0.35), 0 0 28px rgba(45,8,14,0.55); }

/* ── Ablauf „In drei Schritten" tiefschwarz (14.10.2026) ──────
   Auf den Ablauf folgt der Zitate-Stapel mit roter Fläche. Zwei rote
   Flächen direkt hintereinander wirkten wie ein Fehler — der Ablauf
   steht deshalb wie in Waltersdorf auf Tiefschwarz. */
.v3 .s-steps--steglitz { background: var(--rp-tiefschwarz); }

/* ── Zitate-Stapel · sichtbare Stapelkante (15.10.2026) ───────
   Wie in Waltersdorf soll beim Überschieben oben die Kante der
   darunterliegenden Karte herausschauen. Die Bewertungen stehen
   dafür nach Länge (lang → kurz) im HTML. Ab Tablet schrumpft die
   untere Karte zur Mitte hin, dort reicht der Längenunterschied
   allein nicht immer: Karte 01 und 02 sitzen deshalb in der
   Klebe-Position 20 bzw. 10 px höher — eine feste Treppe, unabhängig
   von der Textlänge. Mobil (Schrumpfen nach oben) ist das nicht nötig.
   Nur mit Bewegung: bei reduzierter Bewegung stehen die Karten
   untereinander, dort bleibt alles bündig. */
@media (prefers-reduced-motion: no-preference) and (min-width: 769px) {
  .zs-section .zs-wrap:nth-child(1):not(:last-child) > .zs-card { top: -20px; }
  .zs-section .zs-wrap:nth-child(2):not(:last-child) > .zs-card { top: -10px; }
}
/* Kleine Handys (z. B. 360×640): Karte 01 war knapp 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; }
}