/* ====================================================================
   step8.css — Hero-Refresh e-carsharing (Edit-Plan Step 15)

   Dezente Pep-Hebel rund um das Phone-Mockup im .hero-device:
   (1) Tilt + Cyan-Glow            (2) Cyan-Underlines auf Headline
   (3) Phone-Reveal beim Laden     (4) Heartbeat-Live-Dot
   (5) Pin-Pulse über der Mini-Karte

   ABWEICHUNG vom Plan (Punkt 3): Der Live-Code führt den Geräterahmen
   als CSS-background (.device) und nur den App-Screen als einzelnes
   <img> — nicht zwei <img>s wie im Plan angenommen. Der Phone-Reveal
   ist daher EIN-stufig (eine .hero-phone-reveal-Klasse auf dem Phone-
   Wrapper) statt zweistufig mit --frame/--screen. Kein inhaltlicher
   Verlust. Tilt und Reveal liegen bewusst auf getrennten Wrappern,
   weil beide die transform-Eigenschaft belegen.

   Overlay-Positionen (4)/(5) sind in Prozent relativ zum Phone-Wrapper
   gesetzt — sie skalieren damit über alle Breakpoints, ohne dass je
   Breakpoint eigene Pixelwerte nötig sind.

   Alle Animationen respektieren prefers-reduced-motion.
   ==================================================================== */

/* (2) Cyan-Underlines — generische Klasse, in diesem Step ausschließlich
   auf e-carsharing.html. Ausweitung auf andere Heroes nur per expliziter
   Folge-Entscheidung. */
.hl-uline{
  /* Underline als Hintergrund-Gradient — bleibt ein inline-Element und
     bricht damit natürlich um (kein inline-block → kein Headline-Überlauf
     auf schmalen Viewports). Wächst per background-size von 0 auf 100 %. */
  background-image:linear-gradient(var(--m-cyan-500),var(--m-cyan-500));
  background-repeat:no-repeat;
  background-position:0 100%;
  background-size:0 3px;
  padding-bottom:2px;
  animation:drawUnderline 600ms var(--ease-standard) forwards;
}
.hl-uline:nth-of-type(2){animation-delay:220ms}
@keyframes drawUnderline{to{background-size:100% 3px}}

/* (3) Phone-Reveal — einmalig beim Laden, ein-stufig */
.hero-phone-reveal{
  opacity:0;
  transform:translateY(8px);
  animation:phoneReveal 420ms var(--ease-standard) forwards;
  animation-delay:120ms;
}
@keyframes phoneReveal{to{opacity:1;transform:translateY(0)}}

/* (1) Phone-Wrapper: Tilt + Cyan-Glow + Positions-Kontext für Overlays */
.hero-phone{
  position:relative;
  display:inline-block;
  transform:rotate(-3deg) perspective(800px);
  /* Overlay-Anker — Prozent des Phone-Wrappers, skalieren mit der Größe.
     Werte am gerenderten Screenshot ermittelt (app-zoe-detail.jpeg). */
  --livedot-x:33.4%;  --livedot-y:5.5%;
  --mappin-x:41%;     --mappin-y:79%;
}
/* Cyan-Glow dahinter — das Phone soll davor schweben, nicht leuchten */
.hero-phone::before{
  content:'';
  position:absolute;z-index:-1;
  width:480px;height:480px;
  left:50%;top:50%;
  transform:translate(-50%,-50%);
  background:radial-gradient(closest-side,
    rgba(111,203,220,.22) 40%,
    rgba(111,203,220,0)   100%);
  pointer-events:none;
}

/* (4) Heartbeat-Live-Dot — über dem Live-Indikator in der Dynamic Island */
.hero-phone__livedot{
  position:absolute;
  left:var(--livedot-x);top:var(--livedot-y);
  width:7px;height:7px;margin:-3.5px 0 0 -3.5px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 0 0 2px #4FB3C8;
  animation:mleeHeartbeat 2200ms var(--ease-standard) infinite;
}
.hero-phone__livedot::after{
  content:'';
  position:absolute;inset:0;
  border-radius:50%;
  border:1.5px solid #4FB3C8;
  animation:mleeRipple 2200ms ease-out infinite;
}
@keyframes mleeHeartbeat{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.25)}
}
@keyframes mleeRipple{
  0%{transform:scale(1);opacity:.6}
  100%{transform:scale(2.4);opacity:0}
}

/* (5) Pin-Pulse — über der Mini-Karte im App-Screen.
   Nutzt die bestehende pin-pulse-Keyframe aus site.css. */
.hero-phone__mappin{
  position:absolute;
  left:var(--mappin-x);top:var(--mappin-y);
  width:9px;height:9px;margin:-4.5px 0 0 -4.5px;
  border-radius:50%;
  background:var(--m-cyan-500);
  outline:1.5px solid rgba(255,255,255,.9);
  outline-offset:-.5px;
  animation:pin-pulse 2200ms var(--ease-standard) infinite;
}

@media (prefers-reduced-motion:reduce){
  .hl-uline{animation:none;background-size:100% 3px}
  .hero-phone-reveal{animation:none;opacity:1;transform:none}
  .hero-phone{transform:none}                 /* Tilt entfällt */
  .hero-phone__livedot,
  .hero-phone__mappin{animation:none}
  .hero-phone__livedot::after{animation:none;opacity:0}
}


/* ====================================================================
   Step 16 — Spinner + Counter (Edit-Plan Step 16)

   .mlee-spinner — rotierende mobileeee-Mark als Lade-Indikator. Wird als
   Inline-SVG eingebunden (fill="currentColor"), eine eigene Kopie der
   Mark. Das geteilte Asset assets/logo/mobileeee-mark.svg (fest navy,
   kein currentColor) bleibt unangetastet.
   .mlee-counter — Hochzähl-Ziffern; tabular-nums gegen Breiten-Springen.

   ABWEICHUNG vom Plan: Der Modifier --snappy war im Plan referenziert
   (§2B/§2C), aber nicht definiert — hier als 0,7 s ergänzt.
   ==================================================================== */
.mlee-spinner{
  display:inline-block;
  vertical-align:middle;
  color:var(--m-navy-900);
  animation:mleeSpin 1.2s linear infinite;
  flex-shrink:0;
}
.mlee-spinner--sm{width:16px;height:16px}
.mlee-spinner--md{width:24px;height:24px}
.mlee-spinner--lg{width:48px;height:48px}
.mlee-spinner--cyan{color:var(--m-cyan-500)}
.mlee-spinner--white{color:var(--m-white)}
.mlee-spinner--slow{animation-duration:2.4s}
.mlee-spinner--snappy{animation-duration:.7s}
@keyframes mleeSpin{to{transform:rotate(360deg)}}

/* Karten-Ladezustand — Overlay über .stations-map-wrap (standorte.html) */
.stations-map-wrap{position:relative}
.mlee-loading{
  position:absolute;inset:0;z-index:500;
  display:grid;place-items:center;
  background:var(--m-paper);
  transition:opacity 240ms var(--ease-standard);
}
.mlee-loading.is-hidden{opacity:0;pointer-events:none}

/* Such-Spinner — rechts im Suchfeld. Wrapper positioniert, SVG rotiert
   (getrennt, weil pos. transform und mleeSpin sich sonst überschreiben). */
.stations-search{position:relative}
.stations-search__spin{
  position:absolute;top:50%;right:12px;
  transform:translateY(-50%);
  display:flex;pointer-events:none;
}
/* display:flex überschreibt sonst das [hidden]-Attribut */
.stations-search__spin[hidden]{display:none}

/* Counter */
.mlee-counter{font-variant-numeric:tabular-nums}

@media (prefers-reduced-motion:reduce){
  .mlee-spinner{animation:none}
}