/* Schwebende Ausschnitt-Karte (Variante A) auf den Produktdetailseiten.
   Echte App-Fläche zu 70 % abgedunkelt, goldener Rahmen am Ursprung, die
   vergrösserte Karte fährt ohne Neigung versetzt heraus. Die Geometrie liegt
   als Custom Properties (--ad-*) inline an der jeweiligen .app-detail-scene:
   --ad-slot-* = native Quellkoordinaten des Ausschnitts in Prozent der
   Basisfläche, --ad-card-* = Endlage unter 761 px, --ad-card-*-w = Endlage
   ab 761 px, --ad-pad = Platz unter der Aufnahme für die überstehende Karte.
   Abdunklung und Goldrahmen sind Pseudoelemente auf .app-detail-shot —
   gleiche Ebenenfolge wie zuvor die leeren <i>-Elemente (Karte via z-index
   darüber). Medien: /assets/media/2026-09/callout-<produkt>-*-poster.webp,
   Sprachumschaltung läuft über 20260912-homepage/media.js. */

.app-detail { position: relative; }

.app-detail-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .6rem 1.2rem;
  margin-bottom: clamp(1.8rem, 4vw, 2.8rem);
}
.app-detail-head h2 { flex: 1 1 auto; max-width: 24ch; }
.app-detail-desc { flex-basis: 100%; }

.app-detail-replay {
  display: none;
  flex: none;
  margin-left: auto;
  align-items: center;
  gap: .45rem;
  padding: .45rem .95rem;
  border: 1px solid var(--line, rgba(240, 237, 230, .14));
  border-radius: 999px;
  background: none;
  color: var(--muted, #bbb5aa);
  font: inherit;
  font-size: .8rem;
  cursor: pointer;
}
.callout-js .app-detail-replay { display: inline-flex; }
.app-detail-replay:hover { color: var(--amber, #dfad64); border-color: var(--amber, #dfad64); }
.app-detail-replay svg { width: .95rem; height: .95rem; }

/* Bühne: hält unter der Aufnahme Platz für die überstehende Karte. */
.app-detail-scene {
  --ad-ease: cubic-bezier(.22, .8, .24, 1);
  --ad-gold: 223, 173, 100;
  position: relative;
  max-width: 1040px;
  margin-inline: auto;
  padding-bottom: var(--ad-pad, 0);
}
.app-detail-shot { position: relative; }
.app-detail-base { display: block; width: 100%; height: auto; border-radius: 14px; }
.app-detail-shot::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 14px;
  background: rgba(6, 8, 12, .7);
  transition: opacity 1s ease;
}
.app-detail-shot::after {
  box-sizing: border-box;
  content: "";
  position: absolute;
  left: var(--ad-slot-l);
  top: var(--ad-slot-t);
  width: var(--ad-slot-w);
  height: var(--ad-slot-h);
  border: 1.5px solid rgba(var(--ad-gold), .9);
  border-radius: 6px;
  box-shadow: 0 0 0 5px rgba(var(--ad-gold), .13);
  transition: opacity 1s ease .15s;
}
.app-detail-card {
  position: absolute;
  z-index: 2;
  margin: 0;
  left: var(--ad-card-l);
  top: var(--ad-card-t);
  width: var(--ad-card-w);
  max-width: var(--ad-card-max);
  transition: left 1.1s var(--ad-ease), top 1.1s var(--ad-ease), width 1.1s var(--ad-ease);
}
.app-detail-card img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 30px 90px rgba(0, 0, 0, .65), 0 6px 22px rgba(0, 0, 0, .5);
}
.app-detail-card figcaption {
  position: absolute;
  top: calc(100% + .7rem);
  left: 0;
  right: 0;
  display: flex;
  gap: .6rem;
  justify-content: flex-end;
  color: var(--muted, #bbb5aa);
  font-size: .8rem;
  transition: opacity .6s ease .45s;
}
.app-detail-card figcaption b { color: rgb(var(--ad-gold)); font-weight: 600; }

/* Startzustand: die Karte deckt den Ursprungsrahmen exakt (gleiche Werte,
   gleiches Quellkoordinatensystem), bevor sie in die Endposition fährt. */
.app-detail-scene.is-pre .app-detail-card {
  left: var(--ad-slot-l);
  top: var(--ad-slot-t);
  width: var(--ad-slot-w);
  max-width: none;
  transition: none;
}
.app-detail-scene.is-pre .app-detail-shot::before,
.app-detail-scene.is-pre .app-detail-shot::after { opacity: 0; transition: none; }
.app-detail-scene.is-pre .app-detail-card figcaption { opacity: 0; transition: none; }

@media (min-width: 761px) {
  .app-detail-scene { padding-bottom: 0; }
  .app-detail-card {
    left: var(--ad-card-l-w, var(--ad-card-l));
    top: var(--ad-card-t-w, var(--ad-card-t));
    width: var(--ad-card-w-w, var(--ad-card-w));
  }
}

@media (prefers-reduced-motion: reduce) {
  .app-detail-card,
  .app-detail-shot::before,
  .app-detail-shot::after,
  .app-detail-card figcaption { transition: none; }
}
.motion-off .app-detail-card,
.motion-off .app-detail-shot::before,
.motion-off .app-detail-shot::after,
.motion-off .app-detail-card figcaption { transition: none; }

/* German Video uses the same complete, genuine capture on both surfaces.
   Its origin frame covers the whole image, rather than claiming a crop. */
.app-detail-mixed-video:lang(de) .app-detail-shot::after,
.app-detail-mixed-video:lang(de) .app-detail-scene.is-pre .app-detail-card {
  left: 0;
  top: 0;
  width: 100%;
  height: auto;
}
.app-detail-mixed-video:lang(de) .app-detail-shot::after { height: 100%; }