/* Schicht 4 · geteilte Komponenten: Sticker, Etikett, Sprechblase, iPhone, Store-Knopf, Figur */

/* ---------- Sticker: weißer Stanzrand, weicher Schatten, schräg aufgeklebt ---------- */
.ff-sticker {
  --tilt: 0deg;
  position: relative;
  background: var(--surface-sticker);
  border: var(--sticker-rand) solid var(--border-sticker);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-sticker);
  rotate: var(--tilt);
}

/* Aufklebe-Effekt beim Scrollen, nur mit JS und ohne reduzierte Bewegung */
@media (prefers-reduced-motion: no-preference) {
  [data-ff-js] [data-ff-stick] {
    transition:
      opacity 260ms var(--ease-weich),
      scale var(--dauer-mittel) var(--ease-pop),
      translate var(--dauer-mittel) var(--ease-pop),
      rotate var(--dauer-mittel) var(--ease-pop);
    transition-delay: var(--stick-delay, 0ms);
  }
  [data-ff-js] [data-ff-stick]:not([data-ff-stuck]) {
    opacity: 0;
    scale: 1.22;
    translate: 0 -18px;
    rotate: calc(var(--tilt, 0deg) + 9deg);
  }
}

/* ---------- Etiketten (Urteile wie in der App) ---------- */
.ff-etikett {
  --tilt: -3deg;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .3em .8em .42em;
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
  color: var(--ff-pflaume);
  background: var(--surface-sticker);
  border: var(--sticker-rand) solid var(--border-sticker);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-sticker);
  rotate: var(--tilt);
}
.ff-etikett--sehr-gut { background: var(--ff-gold); }
.ff-etikett--keine-ahnung { background: var(--ff-lavendel); }
.ff-etikett--wer-bitte {
  outline: 2.5px dashed rgb(43 24 56 / .55);
  outline-offset: -9px;
}
/* gezackter Warnzettel: Rand und Fläche stecken im SVG, darum kein Stickerrand */
.ff-etikett--auf-keinen-fall {
  --tilt: 4deg;
  color: var(--ff-rosa);
  background: url("../img/warnzettel.svg") center / 100% 100% no-repeat;
  border-color: transparent;
  border-radius: 0;
  box-shadow: none;
  padding-inline: 1em;
  filter: drop-shadow(0 10px 14px rgb(var(--ff-lila-schatten) / .34));
}

/* ---------- Sprechblase ---------- */
.ff-blase {
  position: relative;
  padding: var(--space-4) var(--space-5);
  font-weight: 600;
  font-size: 1.125rem;
  line-height: 1.32;
  background: var(--surface-sticker);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-sticker);
}
.ff-blase::before {
  content: "";
  position: absolute;
  width: 24px;
  height: 24px;
  background: var(--surface-sticker);
  border-radius: 4px;
  rotate: 45deg;
}
.ff-blase--links::before { left: -10px; top: 50%; margin-top: -12px; }
.ff-blase--unten::before { bottom: -10px; left: 30%; }
.ff-blase--rechts::before { right: -10px; top: 50%; margin-top: -12px; }
.ff-blase--oben::before { top: -10px; left: 50%; margin-left: -12px; }
.ff-blase > * { position: relative; }

/* ---------- Figur Fritte mit Stickerrand ---------- */
.ff-fritte {
  display: block;
  filter: var(--rand-figur);
}

/* ---------- iPhone-Rahmen ---------- */
.ff-phone {
  --phone-w: 300px;
  --tilt: 0deg;
  position: relative;
  width: var(--phone-w);
  max-width: 100%;
  padding: calc(var(--phone-w) * .032);
  background: var(--ff-pflaume);
  border-radius: calc(var(--phone-w) * .155);
  box-shadow:
    0 0 0 var(--sticker-rand) var(--border-sticker),
    inset 0 0 0 2px rgb(255 255 255 / .14),
    var(--shadow-hoch);
  rotate: var(--tilt);
}
.ff-phone__screen {
  position: relative;
  overflow: hidden;
  aspect-ratio: 720 / 1565;
  border-radius: calc(var(--phone-w) * .125);
  background: var(--ff-mesh-mitte);
  container-type: inline-size;
}
.ff-phone__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}
.ff-phone__status {
  position: absolute;
  inset: 0 0 auto;
  height: 7.5cqi;
  margin-top: 2.6cqi;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: 9.5cqi 8cqi;
  font-family: -apple-system, "SF Pro Text", var(--font-text);
  font-weight: 600;
  font-size: 4.2cqi;
  color: var(--ff-pflaume);
}
.ff-phone__insel {
  position: absolute;
  left: 50%;
  top: 0;
  width: 31cqi;
  height: 9.2cqi;
  translate: -50% 0;
  border-radius: var(--radius-rund);
  background: var(--ff-schwarz);
}
.ff-phone__icons { display: flex; gap: 1.6cqi; align-items: center; }
.ff-phone__icons svg { width: 4.6cqi; height: 4.6cqi; }
.ff-phone__icons svg:last-child { width: 6.6cqi; }
.ff-phone__home {
  position: absolute;
  left: 50%;
  bottom: 2cqi;
  width: 35cqi;
  height: 1.3cqi;
  translate: -50% 0;
  border-radius: var(--radius-rund);
  background: var(--ff-pflaume);
}
/* große, frontale Variante für die Bühnen: Höhe gibt die Breite vor (Rahmen + Screen 720:1565) */
.ff-phone--gross {
  --phone-h: var(--buehne-phone-h);
  --phone-w: calc(var(--phone-h) / 2.0985);
  --tilt: 0deg;
}


/* ---------- App-Store-Knopf (deutscher Badge-Stil) ---------- */
.ff-store {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 60px;
  padding: 9px 22px 9px 16px;
  color: var(--ff-weiss);
  background: var(--ff-schwarz);
  border: 1.5px solid #A6A6A6; /* Rahmengrau aus den Badge-Vorgaben, nur hier */
  border-radius: 14px;
  text-decoration: none;
  box-shadow: 0 0 0 var(--sticker-rand) var(--border-sticker), var(--shadow-sticker);
  transition: scale var(--dauer-kurz) var(--ease-pop), box-shadow var(--dauer-kurz) var(--ease-weich), rotate var(--dauer-kurz) var(--ease-pop);
}
.ff-store:hover { scale: 1.04; rotate: -2deg; box-shadow: 0 0 0 var(--sticker-rand) var(--border-sticker), var(--shadow-hoch); }
.ff-store:active { scale: .97; box-shadow: 0 0 0 var(--sticker-rand) var(--border-sticker), var(--shadow-gedrückt); }
.ff-store:focus-visible {
  border-radius: 14px;
  box-shadow: 0 0 0 var(--sticker-rand) var(--border-sticker), 0 0 0 calc(var(--sticker-rand) + 3px) var(--ff-pflaume);
}
.ff-store__apple { width: 30px; height: 30px; flex: none; margin-top: -3px; }
.ff-store__text {
  display: flex;
  flex-direction: column;
  font-family: -apple-system, "SF Pro Display", var(--font-text);
  line-height: 1;
  text-align: left;
}
.ff-store__klein { font-size: .78rem; font-weight: 400; letter-spacing: .01em; }
.ff-store__gross { font-size: 1.6rem; font-weight: 600; letter-spacing: -.02em; margin-top: 2px; }
.ff-store--lg { min-height: 70px; padding: 11px 26px 11px 18px; }
.ff-store--lg .ff-store__apple { width: 36px; height: 36px; }
.ff-store--lg .ff-store__gross { font-size: 1.9rem; }
.ff-store--lg .ff-store__klein { font-size: .88rem; }

/* ---------- Store-Knopf mit angeheftetem Preis-Badge ---------- */
.ff-store-gruppe {
  position: relative;
  display: inline-flex;
}
.ff-store-badge {
  position: absolute;
  z-index: 1;
  top: -18px;
  right: -22px;
  padding: 5px 11px 6px;
  font-weight: 600;
  font-size: .8125rem;
  line-height: 1.1;
  white-space: nowrap;
  color: var(--ff-pflaume);
  background: var(--ff-gold);
  border: 3px solid var(--border-sticker);
  border-radius: var(--radius-rund);
  box-shadow: var(--shadow-sticker);
  rotate: 6deg;
  pointer-events: none;
}

/* ---------- kleiner Hinweis-Sticker ---------- */
.ff-tag {
  --tilt: 3deg;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 6px 14px 7px;
  font-weight: 600;
  font-size: var(--fs-small);
  line-height: 1.2;
  background: var(--surface-sticker);
  border: 3px solid var(--border-sticker);
  border-radius: var(--radius-rund);
  box-shadow: var(--shadow-sticker);
  rotate: var(--tilt);
}
.ff-tag--gold { background: var(--ff-gold); }
.ff-tag svg { width: 18px; height: 18px; flex: none; }

/* ---------- Pommes-Konfetti am Store-Knopf ---------- */
.ff-konfetti {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  pointer-events: none;
  z-index: 3;
}
.ff-konfetti__fry {
  position: absolute;
  left: -5px;
  top: -16px;
  width: 10px;
  height: 32px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--ff-gold) 70%, var(--ff-gold-schatten) 70%);
  border: 2.5px solid var(--ff-pflaume);
  border-top: 5px solid var(--ff-kruste);
  animation: ff-fry 900ms var(--ease-weich) forwards;
}
@keyframes ff-fry {
  0% { translate: 0 0; rotate: 0deg; opacity: 1; scale: .6; }
  70% { opacity: 1; }
  100% { translate: var(--dx) var(--dy); rotate: var(--dr); opacity: 0; scale: 1; }
}

/* ---------- Bühne: Vollbild-Section, Text und großes iPhone im Wechsel links/rechts ---------- */
.ff-buehne {
  min-height: 100svh;
  display: grid;
  align-content: center;
  padding-block: var(--buehne-pad);
}
.ff-buehne__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: var(--buehne-gap);
  align-items: center;
}
.ff-buehne--mockup-links .ff-buehne__grid { grid-template-columns: auto minmax(0, 1fr); }
.ff-buehne--mockup-links .ff-buehne__mockup { order: -1; }
.ff-buehne__text { max-width: 640px; }
.ff-buehne__mockup {
  position: relative;
  justify-self: center;
}
/* Fritte als großer Sticker halb über dem iPhone, zur Textseite hin */
.ff-buehne__fritte {
  --tilt: -6deg;
  position: absolute;
  z-index: 1;
  bottom: 9%;
  width: var(--buehne-fritte);
  height: auto;
  rotate: var(--tilt);
}
.ff-buehne--mockup-rechts .ff-buehne__fritte { left: calc(var(--buehne-fritte) * -.62); }
.ff-buehne--mockup-links .ff-buehne__fritte { --tilt: 6deg; right: calc(var(--buehne-fritte) * -.62); }
/* Platz für die Fritte, die links aus dem iPhone herausragt */
.ff-buehne--mockup-links .ff-buehne__text:has(+ .ff-buehne__mockup .ff-buehne__fritte) { padding-left: calc(var(--buehne-fritte) * .3); }

@media (max-width: 900px) {
  .ff-buehne__grid,
  .ff-buehne--mockup-links .ff-buehne__grid {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--space-8);
  }
  .ff-buehne--mockup-links .ff-buehne__mockup { order: 0; }
  .ff-buehne__fritte,
  .ff-buehne--mockup-rechts .ff-buehne__fritte,
  .ff-buehne--mockup-links .ff-buehne__fritte {
    --tilt: -8deg;
    top: -40px;
    bottom: auto;
    left: -18px;
    right: auto;
  }
  .ff-buehne--mockup-links .ff-buehne__text:has(+ .ff-buehne__mockup .ff-buehne__fritte) { padding-left: 0; }
  /* Sprechblase zeigt mobil nach unten zur Fritte am iPhone */
  .ff-buehne .ff-blase--rechts::before,
  .ff-buehne .ff-blase--links::before {
    left: 16%;
    right: auto;
    top: auto;
    bottom: -10px;
    margin-top: 0;
  }
}